Websites have changed drastically over the course of the last decade. Accessibility is at the forefront when planning a website’s design and structure. What is accessibility? Think of it as a type of universal design that is developed so that every possible user who visits your website will have the same experience regardless of how they browse it.
Here are five tips on how to make your website accessible:
Plan Heading Structure Before Development
Screen-reader user utilizes headings (<h1>, <h2>, <h3>, …) to properly browse your website. There should only be one <h1> heading per page. This heading should either be your website’s title or the subpage’s content title. When screen-reader users go to your <h1>, they will expect to begin traversing your website’s content. Having multiple <h1> tags will result in a poor user experience.
The rule of thumb for headings: you’re not allowed to skip down headings, but you can skip upwards.
For example, (<h1>, <h3>, <h3>) is an incorrect way to structure your headings, due to the missing <h2>. The screen reader may think that your page’s content is completed if the <h2> is missing, leading to a poor user experience. A correct way to structure your subpages would be (<h2>, <h1>, <h2>, <h3>), because no headings were skipped.
Ensure Proper Tab and Read Order
The reading order for screen-reader and keyboard-only users should be the same as the visual order. Two things you should always avoid:
Every Non-decorative Image Should Have Alt Text
Including alt text on images provides a wide array of benefits to the user base and to the website itself. Screen-reader users can listen to the alt text to understand how the image contributes to the page’s content. The screen reader identifies the image tag within the structure of the website and says either the alt text or the file name. If the image’s file name is too long, then the user may become disoriented. This often leads to users leaving the website because they assume the rest the website will offer the same poor experience.
The exception to this rule is when the image is for decoration only and doesn’t contribute to the page’s content. In this case, the image doesn’t need to have alt text.
Make Sure All Links are Recognizable and Descriptive
All links should be distinguishable from your body text and not ambiguous. A link should help users understand where they will be taken after clicking on it. Screen readers have the option to compound a list of links on the page for the user. If the links all read “Click Here” or “More,” then the user will not have a great experience on your website. Speech-recognition software often utilizes the word “Click” as a mouse command. If the link also says “Click” in its name, then the user may have difficulty accessing the link.
Design and Develop for Keyboard Accessibility
Users who prefer to utilize the keyboard over a mouse, or who are physically unable to use a mouse, might be navigating your website and require keyboard-only access. When developing for keyboard accessibility, here are techniques to remember:
All interactive features (dropdown menus, carousels, etc.) on the web page should comply with the recommendations of W3C. These features should be able to be browsed to and used efficiently with keyboard access only.
So, if you want your website to reach a wider audience and provide everyone a good user experience, incorporate these suggestions for making your website accessible.