On my WCAG 2.1. training course, I outline why designing a flexible website is the key to accessible website design – by flexible I mean designing your site so that visitors can change it to suit their own needs.
It’s a good approach for you because you don’t need to design a million different websites, e.g. one with big text for people with a visual impairment, another for people who are colour blind and yet another for people with motor impairments. You just need to design one website; one that can flex to accommodate a million different needs.
I said that you should aim to, ‘divorce content from presentation’. Unfortunately, that can all sound a bit theoretical, so in this article, I will give you some practical examples of how that works in practice.
Examples of flexible design
1. For people using older browsers ensure you set font sizes using relative units (e.g. em units or percentages) rather than absolute units (e.g. pixels or ppints). If you use absolute font sizes visitors to your site using older browsers might not be able to resize the text to suit their needs.
2. Ensure your website is ‘responsive‘, i.e. it reflows or resizes itself to work on all devices – no matter their size or shape. If your website is not responsive visitors may have to scroll left and right, to see all of your content or it may be unusable on smaller screens. I agree with the Bureau of Internet Accessibility who explain that making your website responsive is essential – but it is not the full story.
3. Don’t use background images for important content. It is not possible to add text description (i.e. via the alt attribute) to background images. For a portion of your visitors, some of your content will be missing. For example, enabling high contrast mode in Mozilla’s Firefox automatically hides background images. It does this to ensure that all of the text on the page has the desired high contrast – with the background. If those background images have essential content in/on them – that content is gone for some visitors. The visitor is no longer getting equivalent content to those people using the default contrast.
4. Ensure all links clearly describe their destination. Screen reader users can quickly navigate around a page by extracting all of the links – so I can quickly jump to the one I want. If the links are all called ‘click here’ or ‘more’ or ‘PDF download’ then they need to read the entire page to get the context for every link. The designer did not build in flexibility; they built-in a barrier that only became apparent when a screen reader user tried to access the site. Never turn off user scalability; this will make it difficult for visitors to resize the text.
5. Similarly, a screen reader user can summarise headings on a page – to get a sense of how the content is organised. This will only be possible though if the content is organised in a logical way using appropriate headings, i.e. an h3 heading is used to indicate that the content of the headings is related to but subservient to the content in the preceding h2 heading. If there are five headings on a page and they are all marked up using h1 – visually they may look related – but as far as the screen reader (and access tools) are concerned – there is no logical order to any of them.
6. Ensure your site is keyboard-friendly. Many assistive technologies rely on keyboard accessibility – not just screen reader users. For example, people who use mouth and head sticks and those who use adaptive keyboards.
Try using your tab key to navigate your website. Check if any links are being missed, check that the links are in a logical order, check that there is a visual indication of the link you are on; one common method is to have the link outlined in a colour that contrasting colour. If there is no ‘focus indicator’ it is very easy to get lost when using a keyboard to navigate.