Real-world accessibility issues

On this page:

• Navigation using a keyboard or a screen reader
• Real-world examples: perceivable
• Real-world examples: operable
• Real-world examples: understandable
• Real-world examples: robust

Navigation using a keyboard or a screen reader

Individuals that use keyboards or screen readers often face accessibility issues. Therefore, read more about these important assistive tools.

Navigation using a keyboard

Not everyone is able to use a mouse. Think of individuals with movement difficulties, such as not being able to move their hands properly, for example because of RSI, MS, ALS or Parkinson’s disease. They use special assistive tools, such as:

• a keyboard;
• a joystick;
• voice commands; or
• switch control (e.g. head tracking).

These assistive tools often use keyboard operation. If users are able to use your website and app with just a keyboard, these types of tools will often work as well.

In any case, users must:

• be able to scroll up and down using the arrow keys;
• be able to use the Tab key (and back with Shift + Tab) to jump between buttons, hyperlinks, and input fields;
• be able to press Enter to open a button or link;
• be able to use the space bar to make choices, such as ticking circles and checkboxes; and
• be able to use the arrow keys to go through options within a selection list.

Navigation using a screen reader

Blind and visually impaired people often use keyboards together with screen readers. A screen reader is a software program on the user’s own laptop or phone. With screen readers, users are able to have everything read aloud, and subsequently navigate using their keyboards: from opening an app, to searching the internet in a browser, to navigating a page. In that way, they are able to use a website or app without seeing it. You are not required to create a ‘listen’ button. However, you must build your website or app in such a way that it works well with a screen reader.

Real-world examples: perceivable

With regard to the accessibility principle of ‘perceivable’, the following issues often occur:

Hyperlinks only in color

Hyperlinks sometimes have a different color than the regular text. In such situations, people that are color-blind or visually impaired do not notice that there is a hyperlink that you can click on. This often occurs in product descriptions and cookie notifications.

Make hyperlinks recognizable. For example, use arrows or underscoring in addition to colors.

Images without alternative text

A screen reader cannot read out images, such as pictures or icons. Therefore, if an alternative text is missing, not all users will notice that there is an image. Alternative texts are often missing from image-only buttons, such as menus, shopping carts, ‘my account’ sections, and favorites. In such cases, it is unclear what these buttons do. For example, users will not be able to find the shopping cart easily.

Always add an alternative text.

Too little contrast

The text or other key elements on a website or app are sometimes difficult to read due to a low contrast. This is difficult for seniors and people that are visually impaired or color-blind.

Make sure you have sufficient contrast on your website and app.

Unreadable text when zooming in

When users zoom in to make a text bigger, the content sometimes becomes unreadable. The text and page elements may overlap. This is a problem for seniors and visually impaired people that zoom in to look at text or images.

Make sure that users are able to zoom in on your website or app. Ensure that the text remains readable when zooming in, and that users are still able to use buttons and hyperlinks easily.

Videos without subtitles

Many advertisements and product descriptions include videos, sometimes without subtitles. Deaf and hard-of-hearing people need subtitles to understand what is said in videos.

Real-world examples: operable

With regard to the accessibility principle of ‘operable’, the following issues often occur:

Websites cannot be operated with a keyboard

If your website or app cannot be operated with a keyboard, not all users will not be able to operate the buttons or hyperlinks, such as people who have sight or movement problems. For example, they will not be able to choose a payment method or delivery date, which prevents them from placing an order.

Make sure that users are able to operate your website or app with a keyboard.

Stuck on the page

Users sometimes get stuck when navigating with a keyboard. This happens, for example, with search fields that automatically suggest words as you type. In such cases, users are unable to continue, go forwards or backwards, complete an order, and therefore need to leave your website or app.

Make sure that users cannot get stuck when navigating your website or app with a keyboard. For example, enable users to close navigation menus, notifications, and pop-up windows using the escape button.

Users cannot see where they are on the page

When using a keyboard, users must see a clear focus on the element where they currently are, such as a distinct colored outline. This visual focus has sometimes been disabled. In such cases, users cannot see where they are on the page. As a result, some users will be unable to use your website or app, and therefore unable to place an order.

Check whether keyboard focus has been enabled. You can test this yourself by operating your website and app using a keyboard. Check whether a focus outline is visible.

Captchas are not accessible

A captcha is a puzzle to check whether a user is human. Captchas are often difficult to complete using a keyboard. Moreover, solving the puzzle sometimes also requires too short a reaction time from users. As a result, not all individuals are able to complete the captcha. This problem is often found on registration pages. This often means that users cannot create accounts or place orders.

The use of captchas is best avoided. If a captcha is needed, make sure to include an alternative, for example, an audible version if users need to see something in order to solve the puzzle. Solving captchas must be accessible for everyone.

Real-world examples: understandable

With regard to the accessibility principle of ‘understandable’, the following issues often occur:

Language setting is incorrect

Dutch websites or apps sometimes contain a lot of text in English. The language setting for such texts on the website is sometimes incorrect. In such cases, screen readers will read the text aloud incorrectly. As a result, visually impaired or blind users are not able to understand the text properly.

Make sure to use the correct language settings for your website or app, so that texts can be read aloud properly in all situations.

Unclear how to use the website

Sometimes it is unclear how a website or app works. For example, a website or app uses product filters, and if you click on a filter, the page immediately refreshes. That can be confusing. Also, finding help is not always easy, such as finding contact details, customer service or a live chat function.

Make sure the website or app navigation experience is consistent. That means: you ensure that the navigation experience is always the same. In that way, users can easily find certain elements in their usual spots, such as menus and contact details.

Forms are not clear

Forms sometimes lack a proper explanation or contain error messages. It is not always clear whether it is mandatory to enter text in certain fields. Also, fields sometimes lack labels above them. In such cases, the text is only visible in the field itself, and then disappears as soon as the user starts typing. As a result, users are unable to properly check whether they have entered the right information, especially when fields have been completed automatically. In addition, labels are not always properly linked to the fields. In such cases, screen readers are unable to tell you what needs to be entered in each field. This often occurs on pages where users enter their details to place an order, and when entering a discount code.

Provide a proper explanation when using forms. Use clear labels for each field, and place these labels above their respective fields. Clearly explain in advance how information needs to be entered in each field, for example, the proper date format when filling out date fields. Provide clear error messages when errors are made, for example “this is an incorrect postal code”. And explain how an error can be resolved, for example: “Enter a valid postal code. A valid postal code contains 4 numbers and 2 letters”. In addition, clearly indicate which fields are mandatory.

Real-world examples: robust

With regard to the accessibility principle of ‘robust’, the following issues often occur:

Changes are not relayed to the assistive technology

Sometimes, a change occurs on a page, but the user is not informed of this. That is because that change is not always relayed to the assistive technology. As a consequence, people that use assistive technology, such as a screen reader, do not always know what is happening on the page, for example when adding a product to the shopping cart, or if the shopping cart opens as a new section on the same page, instead of a new page, and when error messages and confirmations are presented after filling out a form. As a result, users miss important information.

Make sure that changes on a page can also be recognized by assistive technology. In that way, users that use assistive technology receive all the important information.

Auto-complete does not work properly

Some forms do not support automatic completion of names, addresses, or email addresses. Users thus always need to enter this data themselves, which takes additional time and effort. This particularly inconveniences people with movement difficulties, for example not being able to use their hands properly. This problem often occurs when entering a delivery address.

Make sure that auto-complete works properly. Check whether you use the correct auto-complete values on your website or app.

Problems caused by accessibility overlays

Accessibility overlays are tools that seek to improve the accessibility of websites. With such overlays, users are able to adjust the visual presentation of a website or app. Think of color contrast, font size, or a text-to-speech functionality. Some overlays seek to resolve accessibility issues on a website automatically. However, the use of overlays can cause issues, and make a website actually less accessible (in Dutch). Overlays can disrupt the assistive tools of users. For that reason overlays are not an appropriate solution. So make sure you address accessibility issues on your website at the source.