This article was written by Disability Inclusion Practice consultant Zel Iscel.
Since 2016, I have been working with Scope Global in various capacities. And often, this involves me doing something we all do: scouring the World Wide Web for information.
The internet is central, the nexus to everything. We use it for work, to buy movie tickets to the latest flick, or to chat with our friends.
However, a lot of online activities are not accessible for me as a blind person. While many organisations are considering how their homepage looks on mobile, most aren’t thinking about whether people like me can access their website. I often need a screen reader, such as JAWS or NVDA, to access the computer. The screen reader verbally reads the information on the screen if the site is designed properly – and therein lies one of my greatest troubles as a blind website user. When a website is not developed properly, it can be impossible, or very difficult and time-consuming to navigate around the site, complete forms and access the required information.
Interested in some inside knowledge on how to make your website more accessible, staying ahead of the digital game? Below are my top three tips to make your website accessible for blind users.
1. Headings and heading levels
Headings and heading ranks or levels give a good sense of the structure of the page and facilitate navigation around the page. When I’m on a website, my first inclination is to scan it by headings so I can gauge what information the page contains and how it is structured.
If headings are not used in pages, I can use other means to navigate but it is tedious and time consuming to get an idea of the structure of the page.
Let me use a menu to give an example of an ideally structured page:
- Level heading 1 could be used to display the title of the document.
- Level heading two could indicate the type of meal – entree, main meals, etc.
- Level heading three could be the name of the dishes under the meal types.
- The main meals may be divided into categories such as pizza, pasta, etc, and these category titles can be presented as level four headings under main meals.
When blind site users become familiar with a structure such as the one above, they can often jump straight to, for example, the pasta section. Clear and organised headings, I believe, also make it easier for sighted users.
It is important to note that while the use of headings is a success criteria of the Web Content Accessibility Guidelines (WCAG), the use of level headings are not. The rationale for this exclusion is to allow developers more room for creativity. While this may be true, I hope it is apparent from the example above, just how useful level headings can be for screen reader users.
When are headings not useful?
Sometimes list items and text are provided as a heading. This can be annoying for screen reader users, as their screen reader will often disrupt the information being presented by announcing the level heading each time the text wraps to a new line. I understand this is done for aesthetic purposes but there are other means to present information aesthetically such as using bullets.
For more information about headings and heading levels, visit https://www.w3.org/WAI/tutorials/page-structure/headings/
2. Well-labelled and directed links and buttons
Links and buttons are normally used to provide further information about a topic. Ideally, the site user clicks (or presses enter) on a link or button. Then, they are given the information they need or are presented with more links and buttons.
However, if the links are not coded or labelled properly, the screen reader user may not be able to access the information or even know that the information is available.
When are links not useful?
If a link is presented in the form of a moving element such as an animation or slide, the screen reader user will not be notified of its existence. It is thus best to avoid using moving elements as buttons or links. However, still images can be used as links or buttons if they also include the alt text attribute (explained further below).
Incidentally, it is much appreciated when a stop or pause button is provided to halt moving images as these can disrupt the screen readers or slow down the computer.
For further details about using best practice for links and buttons – including how screen readers handle buttons and links, when best to use a link or button and examples of good coding – visit this helpful resource.
3. The alt text attribute
The alt text attribute provides a text alternative for images. The alternative text attribute is not only useful for screen reader users but also for people who may not have sufficient bandwidth to download images. Furthermore, alt text is important for search engine optimisation which is the process of directing website users to the information they seek, as search engines recognize text but not images. Highly relevant content = happy search engines, happy browsers.
The information in the alt text attribute is accessible to screen reader users but not visible to sighted users. Therefore, using alternative text on images allows screen reader users to access the links and information without interrupting the website experience for sighted users.
You are probably wondering how alt text can be added to images? It is usually done through the property settings of the image. In Word, for example, you would right-click on the image; select ‘Edit Alt Text’ and you are then prompted to enter a short, contextual description (1-2 sentences recommended) for the image. Where the alt text attribute is not available, you can try to caption the image or name the file with the description of the image.
For further information about the alt text attribute and how it is best used with links and buttons, read here.
There are infinite ways to make websites accessible but using headings, links and buttons correctly and adding alt text to images is a fantastic start.
Connect with our Disability Inclusion Practice to learn more about making your business accessible.