The a11y Project
NOTE - Any classes used in the examples below are purely for styling purposes and do not impact the accessibility of the components below.This little project aims to generate fully semantic, accessible code for all your HTML needs. Check the Table of Contents on the right for the specific element you would like to generate, select the appropriate prompts, and copy the generated code into your project. Keep in mind that these changes will not guarantee your application is fully accessible, but it cover a lot of ground in improving your site's accessibility.
I don't require any attribution for the use of any code generated here however, if you'd like to help this programmer get more visibility, simply linking to this page is more than enough! Happy coding!
Controls
Select the options below that best describe your use case
Summary:
The control has been marked as being used for a redirect or as an anchor. As such, the most appropriate control for this use case is a link, declared through an a tag.
Whether a button or a link, update your styling to ensure that your element has a visible focus state (i.e. an outline on focus or an underline on focus/hover). This is particularly helpful in identifying our location on the page during tabbed navigation.
Forms
Select the options below that best describe your use case
Summary:
There are a couple of steps that we must take in order to ensure that our forms are fully accessible:
1) Always label form inputs
2) Specify the input type for all inputs
3) Use the autocomplete attribute where appropriate
4) Highlight input elements on focus
Images
Select the options below that best describe your use case
Summary:
The image has not been marked as being purely decorative or needing a visible caption. As such, you must provide a text alternative in order to be compliant with accessibility practices.
Lists
Select the option below that best describes your use case
Summary:
Lists are quite straightforward when it comes to accessibility. Just ensure that you use semantic HTML by selecting the appropriate HTML tags.
In the case of ordered or unordered lists, also ensure that any content inside your list wrapper is wrapped in an li tag.
Tables
Select the options below that best describe your use case
Summary:
Tables are some of the easier components to make accessible, if you stick to the appropriate semantic HTML. Always make use of the table, thead, tbody, and tfoot to create your tables.
Since you've marked your table as having one header, we add a thead to our table and declare each column header inside it using th tags. We also specify the scope="col" attribute to remove any ambiguity as to what each tag is a header for.
Always double check to make sure your th and td are in the proper order across table rows. Especially when dealing with rows with offset headers, it's important to align these tags to avoid any unintended ambiguity.
Other
This section is for other minor details you should consider as you develop your web applications.
Animation
- Use subtle animations. Certain animations with too much flashing or strobing effects can trigger seizures, or simply be disruptive to individuals with cognitive disabilities such as ADHD.
- Respect the prefers-reduced-motion media query. Remove animations in your site when the "reduce motion" setting is activated. For animations which aid in providing meaning for a subject matter and are therefore required, slow their duration down.
Layout
- Use the lang attribute on the html element so assistive technology is aware and can use proper pronunciation.
- Give all your pages a unique title so assistive technology can properly inform a user of the page they are going to navigate.
- Do not disable viewport zoom, as users may need to increase text size for greater legibility.
- Use semantic elements for important sections of your page. These include aside, footer, header, main, nav, and section.
- Headings convey structure and are not purely visual. Use only one h1 per page, maintain the logical order, and never skip heading levels (any visual purposes for skipping a heading level should be addressed through CSS).
Media
- Ensure that no media autoplays. If you require media to autoplay, it should be muted by default.
- Provide controls. Users should be able to pause media in your site at any point in time, especially background video which can distract a user from any content that might be over it.
- Provide captions for your videos and transcripts for your audio so users who cannot hear the audio can still access the material.
- Remove seizure triggers. You can read more about the specific requirements here
Mobile and touch
- Ensure your site works for both landscape and portrait orientations.
- Ensure the pages in your site do not have horizontal scrolling.
- Ensure appropriate sizing of interactive elements and sufficient spacing between interactive items so users have a scroll area. Users with motor control issues may have a hard time scrolling past interactive items with zero spacing.