How to make your website accessible

Ideally, everyone should be able to use any website on the internet. It shouldn’t matter if they have a condition that affects their capabilities or what hardware and software they need to use. This is the main tenet behind the concept of web accessibility. The fact is that millions of internet users have special needs, disabilities, and impairments that can make it difficult or even impossible for them to use certain types of websites. By designing your site with these challenges in mind, you can ensure that it’s welcoming to as many users as possible. Many people use assistive technologies to browse the internet. This includes screen readers that vocalize the text on each page, speech recognition software that converts speech into text, Braille terminals, and even alternative keyboards that accommodate special needs. As such, it’s possible for almost anybody to browse the web. What’s more, you can make their experiences significantly better by designing your site with accessibility in mind.

Here are some top tips to make your website accessible.

Tips for accessibility

• 1. Use headings to structure your content correctly

  Screen reader users can use heading structure to navigate content. By using headings (h1, h2, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers. Be sure to adhere to the correct order of headings, and separate presentation from structure by using CSS (Cascading Style Sheets). Do not pick a header just because it looks good visually (which can confuse screen reader users); instead, create a new CSS class to style your text.

• 2. Give links descriptive names

  When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user. Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.

• 3. Use colour wisely

  Use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders). There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.

• 4. Add alt text to images

  Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.

  
  

• 5. Don't avoid using italics

  WCAG Understanding Guideline 3.1 includes an advisory technique for “avoiding chunks of italic text”. Similarly WebAIM advises as follows: “Do not use italics or bold on long sections of text”, but at the same time “use various stylistic elements (italics, bold, color, brief animation, or differently-styled content) to highlight important content”.

WCAG guidelines

Check out the WCAG guidelines to make sure you are complying with the web accessibility standards to meet the needs of your website visitors using assisitive technology.

---

Find out more about making a website accessible for visually impaired users by joining one of my online workshops

Register your interest

Coded by @Sarah Bailey