Draft

Accessibility for Developers

1. Semantic HTML Use semantic HTML tags (e.g., <header>, <main>, <article>, <section>, <nav>) to provide meaningful structure and improve accessibility for screen readers.

2. Keyboard Accessibility Ensure that all interactive elements (e.g., links, buttons, form fields) can be navigated and activated using only the keyboard, using the correct HTML elements and managing focus.

3. ARIA (Accessible Rich Internet Applications) Roles and Attributes Use ARIA roles and attributes where necessary to make dynamic content and complex UI components (e.g., modals, tabs, dropdowns) accessible to screen readers.

4. Focus Management Manage focus effectively, especially when navigating between pages, modals, or dynamically loaded content, ensuring users can easily navigate with a keyboard or screen reader.

5. Skip Links Implement skip links (e.g., “Skip to main content”) that allow keyboard and screen reader users to bypass repetitive navigation.

6. Responsive Design and Viewports Ensure layouts and content adjust appropriately for different screen sizes and orientations, providing an optimal experience on both desktop and mobile devices.

7. Forms Accessibility

   • Use appropriate form elements (e.g., <label>, <fieldset>, <legend>) for all inputs.
   • Ensure that error messages are accessible, linked to their respective fields, and provide clear instructions.
   • Implement proper validation and feedback, making forms usable for screen readers and keyboard users.

8. Accessible Tables Ensure tables are accessible by using <th> for headers and the scope attribute to define relationships between header cells and data cells.

9. Media Accessibility

• Provide text alternatives for non-text content such as images, videos, and audio.
• Ensure that video content includes captions, transcripts, or audio descriptions.
• Use the <track> element for video subtitles or captions.

11. Heading Structure Maintain a clear, hierarchical heading structure using <h1> through <h6>, ensuring that headings follow a logical order to improve navigation for screen reader users.

12. Alt Text for Images Provide descriptive alt text for images, especially those conveying important information. Use empty alt attributes (alt="") for decorative images.

13. Accessible Navigation Menus Ensure navigation menus are accessible, properly coded, and usable by screen readers and keyboard navigation. Consider using ARIA landmarks to identify sections like <nav>.

14. Dynamic Content Accessibility Ensure that dynamic updates (e.g., AJAX content) are accessible by notifying screen readers and users about changes using ARIA live regions (e.g., aria-live="polite").

15. JavaScript Event Handling Avoid relying exclusively on mouse events like onclick or onhover. Ensure interactive elements are accessible via keyboard (onkeydown, onfocus) and screen readers.

16. Modals and Dialogs Implement accessible modals by trapping focus within the modal when it’s open, and returning focus to the triggering element when it’s closed. Use aria-modal, aria-labelledby, and aria-describedby for proper screen reader support.

17. Forms and Labels

• Ensure every form input has an associated label, either through the <label> element or aria-label.
• Use descriptive placeholders and error messages, and provide helpful hints where necessary.

18. Accessible Document Titles Ensure that each page has a unique, descriptive <title> element that provides context about the page’s content.

19. Screen Reader Testing Regularly test your site with screen readers (e.g., JAWS, NVDA, or VoiceOver) to ensure that all content is accessible, navigable, and understandable.

20. Time-Sensitive Content Provide users with the option to extend time limits or disable auto-advancing content (e.g., carousels) to accommodate users who may need more time.

21. ARIA Landmarks Use ARIA landmark roles (<header role="banner">, <main role="main">, <nav role="navigation">) to help screen reader users navigate more efficiently.

22. Error Prevention Help users avoid and correct mistakes by:

• Providing clear, actionable error messages.
• Implementing undo features, where appropriate.

23. Accessible Link Text Ensure that links are descriptive and meaningful out of context (e.g., avoid “click here” or “read more” as link text).

24. JavaScript & Accessibility Ensure that any JavaScript-driven functionality (e.g., tooltips, accordions, dropdowns) is accessible to users with disabilities by managing focus, keyboard access, and screen reader support.

25. Accessible Animations and Transitions

• Avoid using animations or flashing content that could trigger seizures (comply with WCAG’s guidelines on flash thresholds).
• Allow users to disable or reduce animations through system settings (respect “prefers-reduced-motion” media query).