Digital accessibility results when we work to ensure that as many people can use and interact with the web using whichever method they choose. Since disability can manifest in many areas of life, so too do accessibility needs. At a minimum, we look to ensure that our site works for those who cannot see or hear, those who cannot use a mouse, or those who need specialised assistive technology such as a braille keyboard to interact with the web.
You can read more about what constitutes digital accessibility.
Accessibility is a testing specialty, but that doesn’t mean that all testers need to become experts just to do some accessibility testing. Just as anyone can check for SQL injection or URL manipulation for security, this guide will show you accessibility tests that all testers can execute and add to their toolbox. Some can even be combined with other forms of testing simply by doing them slightly differently.
According to We The 15 (#WeThe15), there are 1.2 billion people with disabilities in the global population. That of course does not account for all those with temporary disabilities such as broken limbs, infections, viruses, or illness. In fact the demographic of disability is the only one that everyone on the planet can join at any moment through illness or injury.
When discussing disabilities it is important not to make any assumptions. Society often assumes that screen readers are used only by blind people but that is simply not true. Screen readers are also used by people with low vision or cognitive disabilities (like dyslexia) and by those for whom English is not their first language, just as two examples.
Accessibility is a legal requirement in many countries, and beyond that it helps garner more frequent use for your site (and more revenue). And, ethically speaking, it is the right thing to do. Accessibility promotes usability generally: everyone benefits from clear instructions, opportunities to correct form errors, simple visual layouts, high colour contrast, and the option to read a transcript or captions to a video or audio recording.
So let’s get started with the simplest accessibility test anyone can do.
Note: All tests are browser based.
“Skip to Main” Link
The simplest test you can do for accessibility takes one or two tabs. That’s right, just one or two tabs. A “skip to main” link helps keyboard users reduce the number of tabs they need to reach the main content of a web page. The link is usually hidden and does not show unless it has focus. It is used where pages have top or side menus to allow a keyboard user to “jump” over them directly to the information they want to access.
You can see here on WebAIM’s site the “Skip to main content” element showing as it has keyboard focus. Without keyboard focus it is not a visible element. The main content in this case is the start of the “Skip Navigation Links” article so the top menu and search element would be skipped over.
Why It Matters
Any multi-page website with a top menu of any length should offer a “skip to main” link for keyboard users. Otherwise, they are left with no option other than to spend a lot of time tabbing through menus over and over again. One retail site forced users to click through more than 170 tabs after they added a single item to the shopping basket! Please don’t be that site.
To be clear, “main” in this context is the main content of a page. For example, on the BBC website, the main content would be the news stories. When the user tabs to it, the “skip to main” link should be shown, although it should be visible to keyboard users only when it has focus. Selecting “enter” when the link is in focus should take you to the main element.
Frequently, “skip to main” does not have keyboard focus, so a second tab is required to see where you are, or for a screen reader to announce it.
Having a good page structure where the main element is clear on each page is important. For a site with many sections, the “skip to main” content can be its own menu, from which the user can jump to key parts of the site. For the retail site example mentioned above, a simple “skip to basket” link would have solved the problem.
The PayPal accessibility team in association with the University of Illinois have created a Skip to Content (Main) menu to replace “skip to” links. See the screenshot below, followed by a link to the relevant GitHub repository.
Keyboard Navigation And Visible Focus
Any site should be keyboard accessible, with the current focus visible (either to the eye or through a screen reader). The good news is that you don’t have to do anything extra to test for it. Just leave your mouse alone and use your keyboard.
This does not mean you should test only with a keyboard and not a mouse, but having keyboard days or sessions will improve your testing as well as your keyboard skills. Completing any planned testing using just your keyboard adds an extra element and dimension to your testing.
Why It Matters
Poor keyboard navigation makes all or part of your site unusable to keyboard users, and those using screen readers will not know where the focus is. It will also mean that all other input types such as braille keyboards, eye trackers, blow tubes, and more that rely on keyboard navigation will be unusable on your site. Good keyboard navigation is the foundation of good accessibility.
And without consistent and clear visible focus, people who cannot use a mouse will not be able to fully interact with the site as they will not know where on the page they are.
Visible focus should be clear, consistent and look good when framing elements.
For example: depending on the browser the outline of text fields can be square or have rounded edges. The colour is often blue or black for light backgrounds and white for dark backgrounds.
Here is an example from https://design-system.service.gov.uk/get-started/focus-states/ of focus as a black outline.
Alternative Text (Alt-Text)
Alternative text is applied to images so that its description can be announced by screen readers.
What It Means
Images that convey specific information need alt-text descriptions so screen readers can announce them.
Essentially any image whose content is critical to the page, or an “informative image,” needs a well-defined description. If the clarity of page content would suffer if an image was removed, then that image is informative and therefore needs an alt text entry.
Well-written alt text can create a fulfilling and inclusive experience for people using assistive technology.
Why It Matters
Without a text description, the message that the website wants to convey cannot be fully understood by people who cannot see the image. Imagine an image that is important to the content but does not load.
There is a school of thought that the best approach to alternative text is to establish a clear reason for having it rather than the other way round. There are many ways to ensure that information in an image is conveyed to the user. Here are a few examples.
If the purpose of a graph is to convey trends, ensure that the trends are explained in the pages text
If the image is purely decorative, then no alt-text is required (alt=”” is also described as null alternative text)
The alt text needs to describe the image as concisely as possible, because long alt text makes for a poor screen reader experience. Avoid writing text alternatives longer than 100 characters. If the image requires a lengthier description, it is better to describe the image in the content and provide a shorter alt text.
A final tip is never to start your alternative text description with “image of” or “a picture of” or anything similar, because screen readers describe the element type. This means that if your description begins with ‘image’ then the screen reader announces ‘image image…’ For more information, see WebAIM: Alternative Text.
In Microsoft Word, you can right-click on images and choose “edit alt text”. A panel shows so you can populate it. All images in the document have alt-text, why not right click and see? Why mention this? Well most applications and social media sites have the capability to add alt-text to images. Whether LinkedIn, Twitter or elsewhere there is now no excuse for not adding alt-text.
That being said, it is a myth that every image needs an alt-text entry. That is not true. Only images that convey specific information that is not found elsewhere on the page need a description. If the image is only for decoration, there is no need for alt text.
Bad alt-text - “A dog”
Better alt-text - “An alsatian dog”
Best alt-text - “A close-up of an alsatian dogs face”
Contrast is the difference in perceived brightness between the words on a page (or anything in the foreground) and the background colour. Good contrast is one that makes the text easier to read. In web accessibility, how well one colour stands out from another colour determines whether most people will be able to read the information.
There are multiple tools you can use to measure a website's colour contrast level. There are different levels for standard and larger text sizes. The how to guide showing the WAVE tool shows how you can use it to measure and suggest improvements.
What It Means
Colour is an essential feature of web design and how good the contrast between them is is a core consideration of a website's accessibility.
Why It Matters
Good contrast is vital for many people to ensure that they can distinguish text or elements from the background. It can also be useful in certain lighting scenarios or outside in daylight.
What Is The Colour Contrast Ratio?
Colour contrast ratio is the numerical value assigned to the difference in perceived brightness between the foreground and the background. In web accessibility, the colour contrast ratio is how contrast is measured. This is possible because colours on the web are generated through unique codes, providing a way to analyse and compare those codes against each other accurately, resulting in a ratio.
The WCAG (Web Content Accessibility Guidelines) 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Having good contrast helps people with a variety of different needs and in different circumstances. Ensuring that your site allows third party applications to change contrast is also a good way of allowing users to customise the site for their own needs.
Heading levels are the elements that give structure to a web page. Without well defined heading levels the page will have no clear and logical order to it. Just as good keyboard navigation is a foundation of accessibility, having a clear page structure is important too.
What It Means
In total, there are six levels of headings you can use to structure sections of content on the page (<h1> through to <h6>). Heading 1 is the most important and is the heading for the page: it typically corresponds to the title of the page. Its text gives users an indication of what the page is about — you should have only one Heading 1 on each page.
Each heading 2 creates a section of content, dividing pages into consumable sections.
Why It Matters
Without headings, it can be more difficult to get a sense of a page and what is on it, so users may spend more time than is necessary finding information. This structure is especially important for screen reader users. Many screen reader users say skimming for headings is the first thing they do when they open a Web page. In fact, of over 1,200 people asked, 830 responders to WebAIM’s 2021 screen reader survey, or nearly 70 percent, said they navigate through the headings on a page first.
Having a good clear page structure improves both accessibility and interactions with pages. The BBC website is often cited as a good example of how headings should be structured and follows a simple well-defined pattern. See the image below, which was taken from https://www.nomensa.com/blog/how-structure-headings-web-accessibility.
What It Means
Defining language, done via code, allows a browser to choose the language in which to render the page or section. Defining the language of your content allows you to do several things automatically: changing the look and behaviour of a page; extracting information; or changing the way that an application works. Some language applications work at the document level, while some work on appropriately labelled document fragments.
Why It Matters
W3.org describes the intent of defining language as follows;
“The intent of this Success Criterion is to ensure that content developers provide information in the Web page that user agents need to present text and other linguistic content correctly. Both assistive technologies and conventional user agents can render text more accurately when the language of the Web page is identified. Screen readers can load the correct pronunciation rules. Visual browsers can display characters and scripts correctly. Media players can show captions correctly. As a result, users with disabilities will be better able to understand the content.”
If your site does not have languages defined, users cannot translate your pages with third party software. It can also affect localisation if your site is to be used in multiple countries and languages.
The lang (or sometimes the xml:lang) attribute specifies the natural language of the content of a web page. An attribute on the <html> tag sets the language for all the text on the page.
If part of the page uses text in a different language, you can add a language attribute with a different value to the element that surrounds that content. It is best to add language information to your content early in page development so that you can reap the benefits when new features are added.
For example: BBC News has a language definition of en-GB, as seen in the code snippet lang="en-GB".
Success criterion 1.3.3 of the WCAG is Sensory Characteristics, and while that sounds very complicated it is actually quite straightforward. Sensory characteristics of components are things like shapes, sounds, positioning, orientation, sound, colour and size.
What It Means
When considering the accessibility of a web page, instructions or information contained in a web page can’t rely solely on spatial relationships, size, position, colour, or sound.
An example of using a sense to convey information is something turning green as a positive indicator. On its own someone with colour vision deficiency, such as not being able to distinguish red and green, would not know the positive indicator is present.
Why It Matters
Some users with disabilities are not able to perceive shape or position due to the nature of the assistive technologies they use. Therefore, additional information must be provided.
There are many ways to ensure that your site does not rely on a single sense to be understandable
- Avoid relying on senses like sight and hearing for instructions.
- Avoid using sensory characteristics only as a method to emphasise information on a webpage
- Use a grayscale tool to test for information that relies on colour only
- Do not use shapes solely by colour, use text in addition to colour
- Use text labels to elements in addition to sensory characteristics
- Avoid instructions that rely on sound
- Use more than one sensory characteristic to instruct or inform the users
Zoom to 200 percent
One of the simplest tests to run is to make sure that the page can be increased to 200 percent zoom without loss of clarity of meaning.
What It Means
The users can enlarge the screen view percentage to 200 percent rather than the standard 100 percent.
When zoomed in, the site may change in appearance, but the text and elements must remain readable, and nothing should be truncated. This can also include text escaping its wrapper.
Why It Matters
There are many ways in which vision can be affected, from medical conditions to age-related deterioration. An often-quoted figure is “more than two million people in the UK live with sight loss.” That figure is an estimate based on how commonly different eye conditions and resulting sight loss occurs. The figure considers factors such as age, gender, and ethnicity, and builds up a picture of the numbers of people who are living with significant sight loss in the UK. It includes not only people who are registered2, but also those who are waiting for treatment, those whose sight could be improved, those who have not registered, and people whose sight loss is not at a level that allows them to register.
Having a website with good responsive design means whatever the size, orientation, or zoom selected, the user gets the best experience.
Accessibility Is Not An Exact Science
There are some key things to remember when considering accessibility on a website.
Something that is great for one group of people may not be so good for another
Choice is the key to accessibility
You don’t have to know everything about accessibility to help someone through your testing
Don’t get bogged down with WCAG success criterions. It is better to flag something that looks or feels wrong and get it checked then spend hours trying to find if it is one reference number or another.
1. WeThe15 is a global movement founded by a coalition of organisations in sport, human rights, policy, communications, business, arts and entertainment, uniting to change attitudes and create more opportunities for persons with disabilities, as well as improve mobility and accessibility.
2. Each local authority holds their own register of blind and partially sighted people.
For Further Reading And Watching
- Accessibility For Your Mobile Audience: Identifying Accessibility Gaps In Mobile Responsive Designs & Native Apps by Helen Burge
- How to Bring Accessibility Testing into Your Teams? by Laveena Ramchandani
- Understanding WCAG 2.2
- WCAG Checklists
- Nordic Testing Days Workshop Participants Pack by Ady Stokes: Many accessibility resources such as cheat sheets, templates, handouts and more.