Website Accessibility Checklist

When it comes to website accessibility, it's not only about the usage for people with disabilities, but also for users on different devices and contexts. Imaging the site can be browsed through mobile, TV, watches, and outdated devices.

Followings are basic checklist items to make sure your site provide certain level for the accessibility:

• Keyboard Navigation: Ensure that all interactions can be achieved using a keyboard alone.

  Test the sites with Tab and Return/Enterto see what can be selected and what can be triggered with keydown events. For example, you might want user can navigate some primary button through press Tab, but don't accidentally focus on the submenu items. With the tailored keyboard navigation experience, user can easily access your site with the best navigation.⁠

• Focus Indicators: Ensure that focusable elements have a visible focus indicator.

• Aria roles and attributes: Use ARIA roles and attributes where semantic HTML elements are not available.

  As the web application getting more complicated, semantic HTML tags sometime cannot explicitly express what the group of divs do. So putting correct ARIA-role will provide the semantic meaning to content. See more for the ARIA-roles list

• Alt Text for Images: Every image (where appropriate) should have a descriptive alt attribute. The alt text can have a text hint when the image resource is not available and allow screen reader to read the image caption.

• Accessible Forms: Labels are associated with input elements, error messages are helpful and accessible. You can refer to Accessible Forms fore more details.

• Semantic headings and tags: Correct semantic headings and tags can clearly structure your web content, it's not only allow screen reader to navigate a page according to its headings, but also beneficial for SEO score by letting Google Indexer correctly parse the content structure.