Points North

How to Design Your Website for Accessibility

on Mar 18, 2022 in Business

According to the Pew Research Center, people with disabilities are less likely to use the internet than people without disabilities (15% vs 5%). Yet a majority (75%) of people with disabilities are using the internet on a daily basis [1].

More tools are being developed to help people with disabilities have a good experience on the internet. For example, accessFind is working to develop a search engine that helps connect people to websites that are designed to be accessible.

If you want your website to be a welcoming place for everyone, you will want to consider the following three areas of design that commonly impact users with disabilities.

How to Design for Screen Readers

A screen reader helps people who are blind or have limited vision access and interact with digital content by reading it aloud. Users are able to navigate with the keyboard from field to field and can adjust the language and the speed of the reading to meet their needs [2]. Thinking about how screen readers work can help you design your website that is more accessible. Here are a few tips.

Use your headings correctly.

Screen readers users will navigate your site according to your headers. For these users, you want to make sure your content is well-organized, logical, and easy to interpret. To make sure you are using your headers correctly avoid using <h1> for anything other than page titles and don’t skip over heading levels. For example, if you move from <h1> to <h3> a screen reader will wonder if they are missing important content [3].

Use alternative text for images appropriately.

Screen readers will read the alternative text for images on your website. This is particularly important for images that are used as links. If no alt text is used, the screen reader will read the website file name, which is distracting. So be sure to update all the alt text with the information you are trying to convey with the image.

If the image is purely decorative, no alt text is needed as it will just distract from the content.

Use descriptive and unique link names

Just like sighted people can scan a page for bolded or colored text links, screen readers users can also scan for links. This means, visually impaired users often will not read the link within the context of the page. Therefore, descriptive link names will help your users find the content they are looking for easily.

What to avoid

Screen readers can get confused by unnecessary tables and poorly labeled forms. So if you are going to use either of these for your displaying data or retrieving data from you users, you want to be sure you do so thoughtfully. There are many different tools you can use to test the accessibility of your website to screen readers. Find them here.

How to Choose Colors Thoughtfully

Color can help and harm the accessibility of your content so it must be used carefully. The most common color deficiency is red-green, impacting about 8% of the population. If you use these colors, especially when indicating required fields in a form, you should also use other cues (such as an asterisk) so that users who can not decipher these colors are still able to understand your messaging. Tools like TPGI Color Contrast Analyzer can help you make informed decisions about your color use to make sure your content is also usable for people with low vision or color blindness.

However, people with learning disabilities often find color to be an extremely helpful way to distinguish content areas. Using color can help someone navigate your site with clarity. It is also helpful to distinguish blocks of content using white space or borders.

How to Design for Keyboard-only Users

People with mobility disabilities may not be able to use a mouse or trackpad, so they are likely to use their keyboard’s “tab” or “arrow” buttons to navigate your website. To help keyboard users, pages with lots of content should utilize anchor links to allow users to skip to relevant sections easily.

When designing dropdown menus, especially with sub-items, it is important that each level can be accessed by a keyboard. Avoid using elements that only activate when a mouse or trackpad hovers over them. Both keyboard and screen reader users will not be able to access this content.

With 61 million, or about one in four, adults in the United States living with some kind of disability, it is important that the Internet be a welcoming place for everyone [4]. There are simple steps we can all take when designing our websites to ensure they are navigable to everyone, regardless of abilities. To learn more about designing for accessibility you can go to WebAIM.org, which is considered to be the most comprehensive resource on the web for learning about accessibility as well as evaluating your own website.

 

Sources:

[1] Pew Research Center. “Americans with disabilities less likely than those without to own some digital devices.” 2021.

[2] AbilityNet. An Introduction to Screen Readers.

[3] Berkeley Web Access. Top 10 Tips for Making Your Website Accessible

[4] CDC. Disability Impacts All of Us. 2020.

Photo by Paulius Dragunas on Unsplash

You Don't Want to Miss This

A monthly newsletter with creative inspiration, industry tips, and good vibes.