The most effective ways to help improve accessibility for users with sight loss, starts with considering the point of view of a disabled user and implementing inclusive design on your site.
Digital accessibility for the visually impaired
In the UK, more than 2 million people are living with sight loss, and globally, at least 2.2 billion people have a visual impairment. Poor digital accessibility impacts on these users daily, even though there are simple adjustments that can be made to help to mitigate these issues.
Everyone deserves access to online platforms, and it shouldn’t be something that is more difficult or, in some cases, impossible to use.
How do those with visual impairments access a website?
The digital world is fraught with sites, apps, and online tools that are unusable for people with visual impairments. Fortunately, there are numerous assistive technology devices and software that assists with accessibility for those who are blind or have low vision. That being said, websites still need to be structured correctly for users to be able to efficiently perceive, operate, understand, and interact with a digital platform’s information or services.
The most common way for users who are blind to navigate the internet is with the use of a screen reader, also known as text-to-speech software. You’ll find access to screen readers on most modern platforms, including JAWS for Windows, NVDA or Voiceover for Mac.
Users with low vision may need to zoom into an entire web page or use software that acts similar to a magnifying glass, allowing them to control the size of text and imagery.
Accessible design for screen reader users
Build for keyboard-only use
A screen reader user will use a keyboard to navigate through a website. Using a keyboard only, check that you can easily tab through your site, and access all links and site features. There should also be a visual reference to show where you are on the page to assist low vision users.
Add alternative text
It’s important that you describe what is in an image on a web page. A screen reader will read out this alt text description, allowing the user to understand what the image is displaying and its context. Giving the user the same online experience as everyone else.
Write descriptive links
As a visually impaired user relies on a screen reader to navigate a website, hyperlinks need to be descriptive when they are read out. Writing links such as ‘click here’ or ‘read more’, doesn’t let the user know where the link will be directing them.
Avoid only displaying information as an image or video
Though graphics or infographics may look attractive, often, these aren’t accessible to users of screen readers.
If you choose to include these features on your site, it’s important to also provide an alternative. This can be achieved by either writing the information on the page as well, providing a video transcript, or even adding a link to a separate page with a text-based version.
Correctly structure your content
Ensure that your site’s content has a consistent, logical, linear layout.
Level heading structures are crucial for screen reader users, as they rely on these for navigation. Do this by nesting headings, starting with the most important being <h1> (which there should only be one of per page). It’s important not to skip heading levels, as this can cause confusion for the user. For example, <h2> should not be followed directly by an <h4>.
Designing content for users with low vision
In addition to the above points, there are extra considerations to be made for users with low vision.
Use good colour contrasts
It’s imperative when using colour on a page to ensure that there is a strong contrast between text and the background. Poor contrasts may not be legible, which will impact upon users with low vision.
Present readable content
To make a document or site legible, selecting the right typeface and font size is vital.
- Steer away from using any fancy fonts or italics.
- Your font size ideally needs to be 12pt or above.
- Keep text left-aligned and avoid using full justification.
- Avoid underlining text. Underlining should only be used to identify hyperlinks within a document.
Allow for page magnification
A user should be able to zoom into your site’s web page up to 200% without the assistance of a screen magnifier and without losing any content or functionality. If not designed correctly, this may cause text to overlap or disappear completely.
Don’t use colour to convey meaning
Some users may have a colour vision deficiency, which may mean they will not be able to distinguish the difference between certain colours (e.g. red and green), so it’s important to appropriately label content. Provide text alternatives, rather than a green box signalling yes and a red box signalling no for example.