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.
Related Content
- Website Accessibility Auditing Service – for WCAG 2.1, WCAG 2.2 ComplianceRichard Morton is a member of our website accessibility audit team "A large proportion of my work over the last six years has been web accessibility auditing, using the Web Content Accessibility Guidelines (WCAG 2.1 & WCAG 2.2).I do manual testing, using the standard browsers, and light tools like the AIS ...
- About Web Designer and Accessible Website Design Specialist Jim ByrneA passion for equality and accessibility Decades before he became an accessible website design specialist, Jim started his working life as a computer programmer in 1979 using 'miniframe' computers that had LP (a long player record) sized 'not very floppy disks'. The disks needed to be screwed into a large cabinet ...
- Accessibility Auditing – WCAG 2.1 & WCAG 2.2 and Accessible Website Design, UKJim Byrne is an accessibility specialist with three decades of experience in accessible website design, training and accessibility auditing and consultancy for the not-for-profit, education, public and third sector. An award-winning website developer, website accessibility training provider and WCAG 2 expert ( he provided feedback on the development of WCAG ...
Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance
Learn to design and manage WCAG compliant, accessible websites with my online course
You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.Working with non-profits, charities, voluntary and public sector organisations and social enterprises for over 20 years. Jim set up one of the worlds first website accessibility web agencies in the mid 1990s.