Here are some tips you can use to make your website more accessible. 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
<article> over a generic
<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
- Avoid relying on visual cues (such as color) to convey meaning
- 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