Forms
Associate a label with every form control
Use a for attribute on the label element linked to the id attribute of the form element, or using WAI-ARIA attributes. In specific situations it may be acceptable to hide label elements visually, but in most cases labels are needed to help all readers understand the required input.
Help users avoid and correct mistakes
Provide clear instructions, error messages, and notifications to help users complete forms on your site. Be as forgiving of format as possible when processing user input. For example, accept phone numbers that include spaces and delete the spaces as needed.
Images
Include alternative text for images
Ensure that alternative text for images is added to all informational and functional images. Use empty alternative text—alt=""—for decorative images, or include them in the CSS instead. Text alternatives are usually provided by those responsible for written content.
Structure
Use semantic markup to convey meaning and structure
Use appropriate mark-up for headings, lists, tables, etc. HTML5 provides additional elements, such as <nav> and <aside>, to better structure your content. WAI-ARIA roles can provide additional meaning, for example, using role="search" to identify search functionality. Work with designers and content writers to agree on meanings and then use them consistently.
Provide meaning for non-standard interactive elements
Use WAI-ARIA to provide information on function and state for custom components, such as accordions and custom-made buttons. For example, role="navigation" and aria-expanded="true". Additional code is required to implement the behavior of such component, such as expanding and collapsing content or how the component responds to keyboard events.
Reflect the reading order in the code order
Ensure that the order of elements in the code matches the logical order of the information presented. One way to check this is to remove CSS styling and review that the order of the content makes sense.
Language
Identify page language and language changes
Indicate the primary language of every page by using the lang attribute in the html tag, for example <html lang="en">. Use the lang attribute on specific elements when the language of the element differs from the rest of the page.
Keyboard
Ensure that all interactive elements are keyboard accessible
Think about keyboard access, especially when developing interactive elements, such as menus, mouseover information, collapsible accordions, or media players. Use tabindex="0" to add an element that does not normally receive focus, such as <div> or <span>, into the navigation order when it is being used for interaction. Use scripting to capture and respond to keyboard events.
This guide is adapted from the recommendations for designers by the Web Accessibility Initiative (WAI), a WC3 effort to promote accessibility adoption.
References
Useful links to get you started with accessibility as a developer:
-
Web Content Accessibility Guidelines (WCAG 2.2)
Official web content accessibility guidelines by w3.org
-
Introduction to web accessibility
Covers broad issues, such as the business case, and links to helpful resources
-
Accessibility principles
Introduces the concepts behind the web accessibility requirements
-
How people with disabilities use the web
Explores the impact of accessible design with real-life examples
-
Web accessibility tutorials
Includes some guidance related to designing, for example, providing alternative text for images
-
How to meet WCAG (quick reference)
Customizable reference of all WCAG requirements and techniques
-
Web accessibility evaluation tools list
Provides a range of tools to help explore the accessibility of code
-
WAI-ARIA overview
Introduction to WAI-ARIA with links to all the specifications