Bruno Prieto - Making accessible web apps with Rails and Hotwire - Rails World 2024

Use proper HTML semantics and elements for their intended purposes - this makes accessibility nearly automatic rather than requiring extensive custom code

Structure content logically in the HTML with appropriate headings (H1-H6) that create clear document hierarchy, similar to a table of contents

Utilize HTML5 semantic regions like <main>, <header>, <nav>, <aside> to help screen readers navigate content sections

Avoid custom controls when native HTML elements exist - custom implementations often break accessibility and require extensive testing across browsers/screen readers

Use buttons for actions/interactions and links only for navigation between pages - don’t style links as buttons or vice versa

Properly hide elements using hidden attribute or CSS properties like display: none rather than moving them off-screen

Include accessible labels (aria-label) for icons and visual elements that lack text descriptions

Maintain proper focus management, especially for interactive elements like modals and custom widgets

Consider the reading order of content from top to bottom as screen readers process the DOM sequentially

Test with actual screen readers during development rather than treating accessibility as an afterthought

New HTML5 elements like <dialog> provide accessible functionality out of the box - use them instead of custom solutions