Web Accessibility Checklist A beginner's guide to web accessibility Landmarks ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website. <header role="banner"> A region of the page that is site focused. Typically your global page header. <nav role="navigation"> Contains navigational links. <main role="main"> Focal content of document. Use only once. <aside role="complementary"> Supporting section related to the main content even when separated. <form role="form"> A region that contains a collection of items and objects that, as a whole, combine to create a form. <footer role="contentinfo"> Contains information about the document (meta info, copyright, company info, etc). <form role="search"> Add a `search` role to your primary search form. Document Outline Use semantic headings and structure Links Ensure links have :focus state. Ensure links are recognizable (underlined). Images Use appropriate alt text. Read article on using ALT text Javascript Unobtrusive Javascript Use unobtrusive Javascript (never use inline scripting). No-JS Alternatives Provide alternatives for users without Javascript enabled. Forms Logical layout Tab order of the form follows a logical pattern. Associated label for all form controls (e.g. input, select etc.) (e.g. <label for="name">Name:</label><input id="name" type="text">) Group related form elements with fieldset and describe the group with legend Important for <input type="radio"> and <input type="checkbox"> Media (Audio and Video) Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well. Provide text transcripts Synchronized subtitles for videos Color and Contrast Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone. Contrast Ratio is one tool for checking the contrast of your colors for both standard vision and color deficient user. Test color contrast Test against different types of color blindness with a tool like http://colorfilter.wickline.org/. Deuteranopia Protanopia Tritanopia Testing Navigating your site using a screen reader may help you understand how a blind or low-vision user will experience it. Test using a screen reader