Developing Accessible Content

Developer's Role in Accessibility

While accessible design lays the groundwork, developers are responsible for implementing these designs in a way that ensures functionality and usability for everyone, including those using assistive technologies. This involves writing clean, semantic code, understanding ARIA attributes, ensuring keyboard navigability, and more.

Adherence to the WCAG Guidelines is paramount, and this page provides technical insights into achieving that. For developers, a solid grasp of version control is also essential in collaborative projects, which you can learn more about by Understanding Git and Version Control.

Leveraging Semantic HTML

Using HTML elements according to their intended purpose is the foundation of accessible web development. Semantic HTML provides inherent meaning and structure to your content, which assistive technologies rely on.

• Headings: Use <h1> through <h6> to structure content hierarchically. Don't skip heading levels.
• Lists: Use <ul> for unordered lists, <ol> for ordered lists, and <dl> for definition lists. List items should be <li>.
• Landmarks: Use elements like <header>, <nav>, <main>, <aside>, and <footer> to define regions of a page. These help screen reader users navigate quickly.
• Text Semantics: Use <strong> for importance, <em> for emphasis, <blockquote> for quotations, etc.

<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>

<main>
<article>
<h1>Page Title</h1>
<p>Content...</p>
</article>
</main>

Using ARIA Wisely

ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to make web content and web applications more accessible, especially dynamic content and custom UI components. However, ARIA should be used carefully: no ARIA is better than bad ARIA.

• When to use ARIA: When native HTML elements lack the necessary semantics (e.g., for custom widgets like sliders, tabs, or menus not built with standard HTML controls).
• Key ARIA concepts:
  • Roles: Define the type of an element (e.g., role="navigation", role="button", role="alert"). Many HTML5 elements have implicit roles.
  • Properties: Define characteristics of elements (e.g., aria-required="true", aria-labelledby="labelID").
  • States: Define the current condition of an element (e.g., aria-expanded="false", aria-disabled="true").
• Always prefer using native HTML elements with built-in accessibility over adding ARIA to non-semantic elements.

Ensuring Keyboard Accessibility

All interactive content must be operable via a keyboard. Users with motor disabilities or visual impairments often rely solely on keyboard navigation.

• Focusability: All interactive elements (links, buttons, form fields) must be focusable. Use tabindex="0" to make custom controls focusable. Avoid tabindex values greater than 0.
• Focus Order: The tab order should be logical and intuitive, typically following the visual flow of the page.
• Visible Focus: Ensure a clear visual indicator shows which element currently has focus. Browsers provide default focus indicators, but they can be enhanced with CSS.
• Interaction: Ensure elements can be activated using Enter or Space keys (e.g., buttons, links styled as buttons). Custom controls may require JavaScript to handle keyboard events (e.g., arrow keys for sliders).

Building Accessible Forms

Forms are critical interaction points. Ensure they are accessible by:

• Labels: Associate every form control (<input>, <textarea>, <select>) with a <label> element using the for attribute linked to the control's id.
• Grouping: Use <fieldset> to group related controls (e.g., radio buttons for a single question) and <legend> to provide a caption for the group.
• Instructions & Cues: Provide clear instructions and indicate required fields (e.g., with text like "(required)" and/or an asterisk, along with ARIA attributes like aria-required="true").
• Error Handling: Clearly identify errors, provide descriptive error messages, and programmatically associate errors with their respective form fields using aria-describedby or aria-invalid. Help users correct errors easily.

Managing Dynamic Content & AJAX

When content updates dynamically (e.g., through AJAX), assistive technologies need to be informed of these changes.

• ARIA Live Regions: Use attributes like aria-live="polite" or aria-live="assertive" on elements whose content may change. This tells screen readers to announce updates. polite waits for a natural pause, while assertive interrupts immediately (use sparingly).
• Focus Management: When new content appears or modals open, manage focus programmatically to ensure a smooth experience for keyboard users.
• Alerts and Notifications: Use role="alert" for important, time-sensitive messages.

Multimedia Accessibility

For audio and video content:

• Captions: Provide synchronized captions for all pre-recorded video content with audio.
• Transcripts: Offer a text transcript for audio-only and video-only content, and as a supplement to video with audio.
• Audio Descriptions: For videos where visual information is not conveyed through audio, provide audio descriptions that narrate key visual elements.
• Accessible Media Players: Ensure media players are keyboard accessible and provide controls for captions, volume, etc.

CSS and JavaScript Considerations

• CSS for Presentation: Use CSS for styling and layout, not HTML (e.g., avoid using tables for layout). Ensure content remains readable if CSS is disabled.
• Content Visibility: Do not rely on CSS (display: none or visibility: hidden) alone to hide content that should be available to screen readers if it is meant to be conditionally shown. Consider off-screen techniques or aria-hidden="true" when appropriate.
• Unobtrusive JavaScript: Ensure core functionality is accessible even if JavaScript fails or is disabled (progressive enhancement).
• Responsive Design: Use CSS media queries to create responsive designs that adapt to different viewport sizes and zoom levels.

Continuous Effort for Accessible Development

Developing accessible content is an ongoing process of learning and applying best practices. By integrating these technical considerations into your workflow, you play a vital role in making the web more inclusive. Always remember to test your work thoroughly with various tools and assistive technologies.