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.
How is the term ‘disabled people’ defined and why does it matter?
Published: December 7, 2018
As a website designer or an organisation commissioning a website you need to know how the term ‘disabled people’ is defined for the following reasons:
It will have an impact on the approach you take to making your website accessible.
As an organisation you will want to stay on the right side of the law when it comes to making your content and service accessible to ’disabled people’.
Ok, how is the term defined in law?
To paraphrase the UK equality legislation, the term, ’disabled people’ is defined not by the cognitive or physical impairment of the individual but by the physical (or virtual) environment they live in.
For example, if a wheelchair user turns up for a job interview to find that they can’t get in the building because there are steps up to the front door, that’s a problem. The legislation states that it is not the individuals mobility problem that makes them disabled it’s actually the lack of a ramp.
The design of the building and a lack of an alternative access route is preventing them from attending the interview. What needs changed here is not the person but the design of the building or the addition of an alternative way in.
In other words the individual is not expected to suddenly regain the power of their legs – their lack of mobility is not the issue. However, in this the lack of access to the building has put the individual at a disadvantage and that is against the law.
I understand how that works for buildings, what about websites?
The issues are exactly the same on the web. You can’t say that your website is not designed to be accessible to people who are blind or have Dyslexia or people with a hearing impairment.
If you said that you would be breaking the law; because you are implying that accessibility is due to a problem with the the person and not a problem with the website.
So in summary. If you are a website designer, this definition of ‘disabled people’ tells you that it’s your job to create a design that is flexible enough to accommodate the needs of individuals with different impairments.
If you are an organisation commissioning a website, you may be surprised to know that the accessibility of your website is not the responsibility of your website designer.
The UK legislation clearly states that the responsibility for ensuing your website is accessible lies with you, the owner of the site.
So for you the definition of the phrase ‘disabled people’ means you need to be absolutely clear when commissioning your website that it must be accessible to all users.
There are exceptions to this rule in that the any costs incurred and efforts you make are considered reasonable in relation to the resources you have as an organisation.
Digital Accessibility Consultant
Do you need your website to be accessible to disabled people? Do you need an accessibility audit of your existing website? I can help. Contact me. Tel: 07810 098 119
Developing An Accessible Searchable Directory For Evenbreak
Published: June 6, 2017
I’d like to tell you about a project that I have recently been working on called, Evenbreak. They provide such a fantastic service that I feel I need to spread the word.
The aim of Evenbreak is to help disabled people and inclusive employers find each other. Employers upload jobs and disabled people register their employment interests and upload their CV’s. Evenbreak was set up by Jane Hatton as a social enterprise and it is one of those rare projects that is run by and for disabled people.
“With Evenbreak, inclusive employers can be confident that they will attract additional disabled candidates that they may not find through any other recruitment channels. Disabled jobseekers can be confident that employers who have chosen to place their vacancies on this site are serious about looking beyond their disabilities to identify what skills they have to offer.”
“Evenbreak is run by disabled people, for disabled people. As a social enterprise we are keen to promote a positive image of disabled people in employment, and any surplus income will fund positive publicity campaigns promoting the benefits of employing disabled people, to balance out some of the current negative, and inaccurate, portrayals of disabled people in the media.”
Jane Hatton got in touch to ask if I could develop a new companion website that would provide employers with “confidence around the practical issues around inclusion and accessibility in the work place.” The new website would be a searchable resource of content related to inclusive employment. It would be a members only website.
Although the visual design of the site was already existed (i.e. the existing Evenbreak site), my job was to create all the functional aspects. I.e. all of the membership requirements (registration, secure login, members access levels and so on), a way to add, edit, tag and display the content, a way to hide content from non-members and alternative ways to search the content. Although most of the content would be hidden there would need to be a way to show some ‘teaser’ content to encourage new members to join.
Jane already had a huge amount of content to add to the new site, including over 300 documents on every imaginable subject related to employing disabled people. All of this content needed to be stored, categorised and tagged appropriately to ensue it could be found. All the forms needed to be accessible and easy to use.
Within the constraints of fulfilling the aims for the site I was given a free rein in terms of the technologies used and the approach taken.
As the budget was small I decided to create the site using WordPress and where possible to create the functionality using existing technologies and modifications of existing plugins. The budget did not stretch to creating a custom application from scratch.
The other constraint, apart from money, was time. It all had to be functioning by the time of a pre-arranged meeting that Jane had set up to show the service to a room of potential corporate clients. The meeting date was set for 6 weeks from the point Jane got in touch.
Given the complexity of the project this was an incredibly tight time-frame. However, I did manage to provide a fully functioning website by the time of the meeting. The site was still located on my development server rather than on the evenbreak server at that point but nonetheless it was a bit of a miracle to get it done so quickly. The new site had to include a huge number of document and rsources so that the breadth of content could be demonstrated during the presentation.
I was delighted when Jane provide the following ‘testimonial’ which is so good it would get my in to heaven. 🙂
“Jim came highly recommended from experts in web accessibility, and so we engaged him to take over the Evenbreak site for us. However, Evenbreak is an online job board, and therefore a very complex site, with facilities for employers to pay for and post their roles, candidates to register and search for jobs, and many other complexities. Jim took all of this in his stride, having to understand the thinking of the previous developers very quickly. In addition to all of this, we asked Jim to design a bespoke portal for us, with very little lead-in time, which he worked on tirelessly, ensuring it was up to a fantastic standard for when we launched it.”
“I have vast confidence in Jim’s abilities, and am frankly quite amazed that he met all of our very demanding requirements so quickly and so professionally! We will be asking him to entirely re-build our site using his talents to build in both accessibility and responsiveness from the start. Many developers claim to have knowledge in these areas, but in my experience, very few if any have the practical knowledge and pragmatic approach that Jim has. I would advise any organisation looking for a high quality accessible website to talk to Jim. You won’t be disappointed (heąs also incredibly easy to work with).” Founder/Director, Evenbreak.
Give me a shout if you have an idea for a development project you would like to see realised. Tel: 07810 098119
Don’t use the statistics defence as a reason to exclude people from your content
Published: August 4, 2014
I was recently involved in a discussion about whether website designers should still be expected to accommodate Internet Explorer 6 users.
The case against accommodating IE 6 users is invariably backed up with statistics about how few people now use this, admittedly flawed, browser. I’ve heard ‘the statistics defence’ (as I will call it) so often over the years that this latest evocation prompted me to think about why I don’t agree with this approach.
Examples of the ‘statistics defence’:
“We design for 17″ screens because that’s what most people use these days”
“We assume 92dpi resolutions because most people use a PC”
“We use IE 7 as a baseline because very few people use older browsers now.”
“We don’t provide an alternative to our flash site, because everyone has the flash plugin these days.”
“We don’t need to make our site accessible because it isn’t aimed at, and doesn’t get used by disabled people.”
My arguments against this approach
I’ll give my conclusion first: content on web pages needs to be accessible to your visitors – irrespective of the ‘user agent’ they happen to be using.
The argument that we can ignore a particular set of users – because they only make up a small percentage of our audience (i.e. they use a particular browser or a particular bit of access technology) – isn’t one web designers should be buying into. It is irrelevant whether a person is using Netscape 4, Internet Explorer 6, a screen reader, or a keyboard driven text only browser – the issues are basically the same; it is about accessibility of web content.
The statistics defence assumes users needs and user agents are predictable
What assumptions do many web designers make about their intended audience. e.g. what browsers do they assume they are using? what Screen size? screen resolutions, bandwidth, colour palette? Are those assumptions based on the computer they have on their own desk, i.e., the one we are using to design the website? Probably – but is this a good approach? – probably not.
Have any of the following things changed in the past: browsers, hardware devices connected to the web, screen size, screen resolution, Markup versions? Will these things change in the future? Yes – all of them. Designing for a specific configuration of hardware and software isn’t a good way of making pages future proof. Even users with the same hardware and software resize their browser windows to suit their own preferences.
A vital lesson to learn is – change is the norm: the most predictable thing we can say is that everything changes. The best chance we have of dealing with this unpredictability is:
Use standards so that sites have the best chance of working on the widest range of user agents.
Create sites that are flexible enough to deliver our content – no matter what the end user is using.
That is not to say that the presentation will be the same on every device – it won’t be. The presentation is important – but if the content isn’t accessible – the presentation doesn’t matter – because there is nothing to present.
The web isn’t paper
Cross platform/cross browser compatibility is the strength of the web – that was the problem it was designed to solve. Designing a web page is not like designing an advert or a bus shelter or a magazine page or a document to be printed on a sheet of A4; where the amount of ‘real estate’, colours, text size and so on is predictable.
To take the specific issue of access for disabled people; do we have to accommodate the needs of disabled people? Do we have perfect knowledge about their access needs? The answer to the first question is yes; in the UK the law tells us that we can’t discriminate against disabled people. The answer to the second question is no; we don’t have perfect knowledge about the access needs of disabled people.
10% – 20% of people in most populations have some kind of impairment: some of those impairments are not obvious: 8% of men have colour blindness (0.4% women) – approx 5% pop with visual impairments – approx 5 – 15% Dyslexia. Once people get older (say over 40) their eyesight, hearing and motor skill start to deteriorate
In the university where I used to work had many disabled students – not all of them were registered as disabled, but approximately 500 were.
Autistic or Asperger
Unseen disability (Epilepsy, diabetic,etc)
Disability not listed
Two or more of the above
We don’t have perfect knowledge about the access needs of each individual listed above – so we need general strategies to deal with this unpredictability. In terms of approach, dealing with the diverse needs of disabled students isn’t much different from dealing with the problem of making sites work on different browsers and different hardware platforms.
We have to assume that we don’t know what the end user will be using – or what their access requirements will be – and think about what this means when we make design decisions. If it turns out that our content isn’t accessible on a particular browser – we need to find a workaround to solve the issue (while maintaining standards markup and accessible design). There is always an answer – even if sometimes it takes a bit of time to find it.
We have to make our websites accessible because it is the law (in many countries).
In the UK we have the Equalities act: and in a university that means we can’t discriminate against a student on the grounds of their impairment; reasonable adjustment and anticipation of students needs is required.
We can’t argue that we won’t accommodate disabled students because they only make up a small percentage of the student population. Equally we shouldn’t argue that we won’t accommodate users with particular browsers because they are part of a minority. In relation to the particular case of Internet Explorer 6, it is legitimate to ask users to upgrade so that they get both the content and the good design – but not legitimate to argue that they won’t get the content at all if they don’t upgrade.