Welcome to the Accessibility Page! Here you will learn some tips on how to make web pages more accessible to everyone. The 10 digital access tips listed here will help you build web pages that people using assistive technologies or adaptive strategies can perceive, operate, and understand more easily.
Please note that five of the accessibility issues referenced in the tips have been intentionally built into this page so that you can have fun trying to detect them. The Resources page has links to some cool tools that you could use to locate them.
Important points on this page have been indicated in red font.
10 Tips to make your Web Pages Accessible
We all access the web often and some of us create web pages too. We know that different people access web pages differently. Some use additional technologies with their computer or phone called assistive technologies. If we want everyone to be able to use the web pages we create, we need to understand the needs of different users and build our pages to meet those needs.
In this page, you will find some useful information to help you build web pages that are accessible to most users.
1. Add alternative text for images
Whenever you add an image to a web page, please make sure to add an alternative text description for it. Most web page authoring tools will allow you (or even force you) to add a text description when you try to add an image. If you think that the image is only decorative and does not add any information, you can choose to indicate it as decorative.
2. Add captions for videos
Whenever you upload a video, make sure that it has captions. Captions are important for users who cannot hear the audio from the video for whatever reason. They could be deaf or hard of hearing; they could be recovering from ear surgery; or they simply could be sitting in a quiet zone like a library while playing the video.
Video clip adapted from W3C website
3. Provide meaningful descriptions for hyperlinks
Think of the description as a brief statement of where the hyperlink will take the user who clicks on it. It must provide meaning even when read out of context. This is especially useful to screen reader users who often view a list of links for navigation. Avoid repeated link descriptions such as ‘Click here’ or ‘Read more’ for the same reason. Label your links with meaningful and descriptive text.
4. Use headings correctly
Headings on a web page provide an outline of the content on the web page and make understanding the content easier. Using a Heading level 3 right after a Heading level 2 element denotes a section that is a subsection of the preceding Heading level 2.
Heading tags allow screen reader users to jump to the sections they’re interested in. Heading levels h1 through h6 are used commonly. Heading level numbers should increase sequentially. For example, using h4 after an h2 is not correct because screen reader users could wonder that they missed something.
Without section headings that indicate where the web form begins, screen reader users would have to wade through a lot of content in order to get to what they want to read deeper.
5. Use distinct and meaningful page titles
The first thing a screen reader user will encounter right after the web page fully loads is the text in between your title tags. The worst thing you can do, aside from not having the title tag, is having them all the same in all of your web pages. This makes it difficult for users who rely on your HTML markup to determine what page they’re on, or if the link they clicked on is the same web page they were previously on or not. Distinguish your pages by using appropriate titles.
6. Use skip navigation
Screen reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in. Skip navigation allows screen reader users and persons who can’t use a mouse to skip long lists of links, such as the primary navigation on a website. Read more about skip navigation here.
Skip navigation is simply a link right at the top of your web page that, when clicked, positions you to the content section. You can hide this link from able-bodied users by moving the link outside of the browser viewport using CSS.
7. Ensure adequate contrast between text and background
Users with low vision require better contrast than a person with 20/20 vision. The Web Content Accessibility Guidelines specify 4.5:1 as the required ratio of contrast between colour density of text and background. Always make sure to use colours for text and background to provide adequate contrast.
8. Do not use colour alone to convey information
Some of your users could be colour blind. Colour blindness occurs when you are unable to see colours like most of the people do. Colour blindness often happens when someone cannot distinguish between certain colours. This usually happens between greens and reds, and occasionally blues.
9. Do not use images of text in place of text
To a person who can see well, reading the image of a text might not be a problem so long as they know how to read that language. However, users who are vision impaired and use a screen reader require text input. To them text presented as image is not accessible unless the same text is also provided as a description of that image.
10. Use simple language
When complex sentence structures are used, it becomes harder to make sense of the meaning. English might not be the first language of some of your users. It is good to keep the writing style simple if you want to reach most of your users.
As stated at the beginning, five of the above 10 accessibility suggestions have been violated within this page. Try to detect them with the tools provided on the Resources page.