📌 Note: Please use the accessibility feedback form if you have any questions, ideas, or difficulties with the accessibility of our product.
What is accessibility?
Accessibility is the practice of ensuring the content and functionality of your website is available to all users, regardless of their technology or ability. Nearly 1 in 5 people in the U.S. and over 1 billion worldwide have a disability, many of which may need the help of assistive technology such as screen readers, magnification, and keyboards to navigate the web. Improving accessibility is about making sure that all users, including those using assistive devices, will have the best experience possible.
Accessibility starts with Semantic HTML
Accessibility starts with the best practices of Semantic HTML. Writing Semantic HTML means using the most appropriate HTML elements to define meaning and provide structure, e.g. using <header> or <article> over a generic <div> or <span>. Just making sure you are using valid, semantic markup can have the biggest impact on improving accessibility because it allows assistive devices to properly interpret the structure, content, and functionality of your site for a user.
Here are some quick tips:
Use semantic HTML5 elements to define the structure and purpose of your content
If necessary, use ARIA landmarks to provide structural context instead of semantic elements
Structure page headings in a sequential order (h1 - h6) without skipping levels
Declare the default language of your site by using a lang attribute
Provide a link that allows the user to skip over navigation to the main content in the page
Provide alternative text for any images or non-text content that conveys equivalent meaning
Make sure forms are accessible
It’s important to make sure forms on your site are accessible so that all users can complete actions like signing a petition, making a donation, or RSVPing to an event. Forms should be organized in a logical manner with any instructions or cues clearly identified to users. Some users, especially those using assistive devices, may not be able to use visual cues to determine whether a check box has been checked or which label is associated with an input and so making sure labels are correctly associated with their inputs is crucial to providing them with a usable experience.
Here are some quick tips:
Identify all form controls with an associated label that is adjacent to the field when displayed
Group related form controls such as radio buttons or checkboxes
A logical tab order should allow users to navigate the form using only the keyboard
How to perform your own accessibility testing
There are numerous free tools for testing your website’s accessibility. While these tools can’t make your site accessible on their own, they will help you identify, understand and resolve many issues standing in the way.
Here are a few tools:
Lighthouse: accessibility auditing tool for Google Chrome
axe: accessibility testing extension for all modern browsers
W3C Markup Validation Service: HTML validation