Tips on Developing for Web Accessibility

This page introduces some basic considerations to help you get started developing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the "Understanding" document, guidance from Tutorials, user stories, and more.

On this page

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.

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 clear instructions, error messages, and notifications to help users complete forms on your site. When an error occurs:

  • Help users find where the problem is
  • Provide specific, understandable explanations
  • Suggest corrections

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.

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.

Use responsive design to adapt the display to different zoom states and viewport sizes, such as on mobile devices and tablets. When font size is increased by at least 200%, avoid horizontal scrolling and prevent any clipping of content. Use progressive enhancement to help ensure that core functionality and content is available regardless of technology being used.

Use WAI-ARIA to provide information on function and state for custom widgets, 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 widgets, such as expanding and collapsing content or how the widget responds to keyboard events.

Think about keyboard access, especially when developing interactive elements, such as menus, mouseover information, collapsable 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.

CAPTCHAs create problems for many people. There are other means of verifying that user input was generated by a human that are easier to use, such as automatic detection or interface interactions. If CAPTCHA really needs to be included, ensure that it is simple to understand and includes alternatives for users with disabilities, such as:

  • Providing more than two ways to solve the CAPTCHAs
  • Providing access to a human representative who can bypass CAPTCHA
  • Not requiring CAPTCHAs for authorized users.

These tips are a few of the things you need to consider for web accessibility. The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.