During our recent trip to the Frontend Developer Love and Vue.js Amsterdam conference a standout topic of discussion for us was accessibility. While we always work to the WCAG standard of accessibility in our digital designs where possible, we’re also always looking for improve our work and help our clients accommodate and reach the broadest audience possible, and the conference had a few new takeaways for us.
Do you know what it’s like to use a screen reader to navigate a website? Have you ever closed your eyes and tried it? The user experience of many sites leaves a lot to be desired. You might think few people need a screenreader, but the Royal National Institute of Blind People shows otherwise:
- 2 million people in the UK live with sight loss
- Around 350,000 people are registered as partially sighted or blind in the UK
- Adults with learning disabilities are 10 times more likely to be blind or partially sighted.
It’s important to note that accessibility isn’t limited to blind people. Major visual impairments such as reduced contrast sensitivity, light sensitivity, and types of colour blindness can affect how your site and its contents are experienced by users. With this in mind, it’s important to ensure your websites and content are accessible to everyone.
Two of the easiest ways to get started with this are through the use of semantic HTML markup, and making sure the media and designs we use conform to best practice.
Semantic markup
Semantic markup is HTML code that reinforces the semantics, or meaning, of the content. This allows screenreaders to read a site in a meaningful way, giving the visually impaired a better understanding of what a page contains and how the content is structured. For example:
A good way of testing whether we are using good semantic markup is to turn off the CSS and see if the content still makes sense, or trying using a screenreader to check it out.
Another method is to use WAI-ARIA, a set of additional HTML attributes made to improve accessibility on dynamic or rich content web sites. This set contains three main features:
- Roles, which describe what an element is or does, e.g. role=“navigation” for navigation elements or role=“tab” for tabs.
- Properties, which give extra meaning to certain elements, e.g. <input type=“text” aria-required=“true” will enable the screen reader to understand it’s a required field.
- States, which define the current status of element e.g. <input type=“button” disabled=“disabled” aria-disabled=“true”> which tells a screen reader that the input is disabled.
Using these methods can make a great difference in accessibility and helps users with impaired sight make better sense of your site. This is especially true if your site uses navigation menus, sub-navigation menus, pop-ups, and other functions that might confuse screenreaders if not coded appropriately.
Accessible media
For other visual impairments there are several basic steps which can make a big difference. It’s important to note that catering to this audience is not just the responsibility of developers, but designers too.
When designing a website, it’s crucial that you don’t rely solely on colour to indicate actions or distinguish a visual element. You can use pages like coloursafe.co to generate colour palettes for you using WCAG Guidelines.
This isn’t always possible due to specific design or branding constraints. In such cases, you can use text, texture and icons instead to make buttons and calls to action more visible and accessible to a wider audience.
Contrast sensitivity
Contrast sensitivity is often related to old age; older audiences tend to struggle to read text on a background with low contrast. Consider these low-contrast examples:
In comparison, high-contrast is more easily read by a wider audience:
Tools like WCAG’s Contrast Checker are a great way to help boost legibility and ensure text and backgrounds have sufficient contrast to reach a broader audience.
Light sensitivity
Finally, some users have extreme sensitivity to light; a website with a white background can be bright enough to make the content illegible for some, or even painful to look at. Similar to your choice of colour palette, we might be required to keep a website’s background white (most commercial sites have white backgrounds) but what we can do is add a ‘dark mode’ option for people with light sensitivity, as seen on the Microsoft official docs site:
‘Dark mode’ has grown increasingly popular in recent years, and is a simple way to make both websites and mobile apps more accessible to wider audiences.
Taking all these tips into account will help make your websites more accessible, but this is only a small portion of what accessibility encompasses. If you’d like to learn more about accessibility, the accessibility section in the W3C website and this cheat sheet are great resources to use in your future projects.
Resources:
https://www.rnib.org.uk/professionals/knowledge-and-research-hub/key-information-and-statistics
https://www.w3.org/TR/wai-aria/
https://webaim.org/blog/wcag-2-0-and-link-colors/
https://www.w3.org/standards/webdesign/accessibility
https://moritzgiessmann.de/accessibility-cheatsheet/
We’re always looking for ways to improve the reach of our client’s sites. If you want to chat on the topics more, get in touch and we’d love to talk.
Germán
Senior Developer