Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

Theory into practice; designing a flexible website is the key to accessible website design

Published: February 17, 2021

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.

Link text should describe the content linked to

Published: August 19, 2014

This tip is a very short one; ensure that the text used for links adequately describes the page or content being linked to. Link text should be short and descriptive – and ideally still make sense when read out of context.

Some people using screen readers will be navigating through your site by jumping from link to link; if all your links say ‘click here’ the usability and accessibility of your site is considerably reduced.

When a link falls at the end of a sentence put the full stop outside the anchor tag

Published: August 8, 2014

Consider the World Wide Web Consortium Web Content Accessibility Guidelines (WCAG 1), Checkpoint 10.5:

“Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. ”

Generally when trying to ensure that my web pages meet this particular requirement I’m thinking about navigation bars; I’m either marking them up as lists, or putting printable characters between adjacent links (if necessary I make them invisible via CSS).

Unfortunately that isn’t always enough to ensure a clean bill of health with regard to this particular checkpoint. It is easy – particularly on a page that gets updated often – to violate this rule in the bodytext of the page, e.g., when a sentence that ends with a link, is followed by one that begins with a link.

The solution is to get into the habit of adding the full stop after the anchor tag; simple but effective. As web accessibility tips go – it’s not the most significant one I’ve ever published. However, having adjacent links without a printable character between them, means your well-crafted page won’t pass WCAG Priority 1; and someone is bound to get in touch to alert you to that fact.

Links

WCAG 1 Checkpoint 10.5.

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.

07810 098 119

Alternative access to client feedback

Client Quotes

Loading Quotes...