CATEGORIES

Five Tips for Making Your Website Accessible

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:

• Designing and developing websites with features that may lead to improper movement.
• Moving the focus indicator programmatically. When adjustments are necessary, they should be made to the website’s structure.

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.

• Alt text should be as descriptive as possible. This will not only benefit the user base but could also strengthen your website’s SEO.
• If images are disabled or the images fail to load, then alt text is a great fallback. This will allow the user to still have a positive experience on your website.

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.

• Avoid the use of “Click Here,” “More,” “Continue,” etc.
• Links in your body text should be styled with more than just color.

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 links, buttons, and controls should be accessible by a keyboard, via the tab button. If a controller doesn’t have tab access, then you will have to include “tab index” on the element.
• A focus indicator should be used. This allows keyboard users to always know where they are on the page.

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.