Ensuring that your online content is accessible isn’t merely a legal obligation—it’s a reflection of your dedication to inclusivity and your forward thinking. As an experienced accessibility consultant, I provide custom solutions to guide you through the intricacies of digital accessibility, offering everything from comprehensive audits to straightforward practical advice. In this short article, I explain what digital accessibility is, why you need it, and how to get started.
Digital accessibility is about crafting online spaces – and content delivered via computer interfaces – where everyone, regardless of their abilities can engage with the content. For example, for your website, it means ensuring every aspect is welcoming and accessible to visitors, whether they are using a screen reader, navigating with a keyboard, or facing other challenges.
The essence of digital accessibility—in the wider sense—means designing and developing digital content in a way that breaks down barriers and opens up avenues of access for everyone. This is done by ensuring the format of content is designed to be flexible, i.e., it can change to fit the needs of the individual, not the other way around. We don’t force the individual to change to fit with the way we present our content.
For example, when digital content is accessible, it will be possible for a blind person, using a screen reader, to have your content read out to them, including descriptions of any image or photographs on the page. And those descriptions will be equivalent to the function the image or photograph plays for sighted visitors.
When we talk about digital accessibility, we’re not just talking about ticking boxes or meeting legal requirements (although that’s important too!). We’re talking about fostering a digital world where everyone feels included, empowered, and able to fully participate in the online experience.
First and foremost, there’s the matter of reputation. By prioritising digital accessibility, you’re not just showing the world that you care about inclusivity—you’re also demonstrating your commitment to excellence. You are telling your audience, your customers, your partners, and your competitors that you mean business when it comes to inclusion and equality.
Then, there’s the matter of legal compliance. In many jurisdictions, digital accessibility isn’t just a suggestion—it’s the law. By ensuring your content meets accessibility standards, you’re not just avoiding potential legal headaches down the road—you’re also safeguarding your brand’s reputation and integrity. In the UK that means complying with The Equality Act 2010.
By reaching a wider audience, you’re opening up new revenue streams, tapping into markets you might have overlooked, and ultimately, boosting your bottom line. If you are a charity, a non-profit, or a public sector organisation you are getting your message out to more of your potential audience.
When you prioritise accessibility, you’re also opening the door to new ideas and possibilities. You are flexing your creative muscles, pushing the boundaries of what’s possible, and ultimately, setting yourself apart from your competition.
So, in a nutshell, the advantages of digital accessibility for content producers are clear: enhanced reputation, legal compliance, increased audience and/or revenue opportunities, and a boost to innovation. It’s a win for you and for those who consume your content and services.
One of the first things you can do is to assess where you are right now, i.e., find out how accessible your current digital content is. A good way to do that is to commission an accessibility audit. For example, if you have a website and you want to know if it is accessible, an accessibility auditor can check it against the de facto standards that are used by governments across the world, i.e., the WCAG 2.1. (and WCAG 2.2 when it is adopted by governments).
WCAG stands for Web Content Accessibility Guidelines. These are the guidelines published by the W3C. You will be reassured to know, that I provided feedback on version two of the guidelines, in my previous role as Director of the Guide of Accessible Website Designers. I have detailed knowledge that I can put to good use when assessing the accessibility of websites and other digital content, including PDFs and MS Word documents, videos, and dynamic content. I have been working in the area of accessible website design since 1996, written multiple books on the subject, creating training courses (check out my bestselling WCAG 2 Accessibility online course) and given advice to 100s of organisations. I’ve also got over 20 years experience of building websites – so I understand the problems you meet and need to solve.
I WCAG 2.2 audit of your website tests it against 56 WCAG A & AA checkpoints on a variety of different platforms (including mobile and tablet), using a variety of accessibility tools (e.g., screen reader, keyboard, magnifier, colour contrast changers) and different browsers. Both automated and manual testing are used as part of the audit.
When I carry out an accessibility audit I ask two of my disabled colleagues will give feedback on the accessibility of your website. John Turley is blind and uses a screen reader on both his mobile phone and laptop; Ruby Shah has a visual impairment and uses a variety of accessibility tools including a screen magnifier and contrast changer. They will also test the site to ensure that it is keyboard-only accessible.
The length of the report can vary depending on the size of the website, the amount of issues found, and their complexity.
An accessibility audit is your first step to ensuring you are complying with relevant equality laws and reach more poeple with your content and your message.
“We requested a root-and-branch evaluation of our website to help inform its development, and in a short space of time Jim and his fantastic team put together an incredibly comprehensive report that fulfilled every aspect of our brief. He was able to identify specific instances of non-compliance, as well as highlight recurring themes and issues and make recommendations to ensure that our web presence not only complies with WCAG AA standards but is fully optimised for usability. Moreover, the first-hand feedback from his auditors provided invaluable insight into the UX of users with disabilities. I’d be delighted to recommend Jim and his colleagues to anyone looking to make their web presence accessible to the widest possible audience.”
Alex Norton (Communications Manager, CLOSER)
Contact me today to discuss your accessibility needs. I provide accessibility advice and support as well as practical services such as website and document accessibility auditing.
This short article will set out the basic ideas underlying the World Wide Web Consortium’s Web Content Accessibility Guidelines 2 (WCAG 2).
The WCAG 2 guidelines are based on four principles: all content must be Perceivable, Operable, Understandable, and Robust.
Ok, if you are anything like me, that’s about as clear as mud. So to understand it, let’s start by defining what some of these words/principles mean; which we can do by translating them from WCAG speak to the much simpler, Jim speak.
WCAG speak: Information and user interface components must be presentable to users in ways they can perceive.
Jim speak: The site visitor must be able to recognise that the content exists. For example, by being able to see it, hear it, or touch it (e.g. being presented as raised dots for a braille user).
WCAG speak: User interface components and navigation must be operable.
Jim speak: The site visitor must be able to navigate around the site and use the features and functions presented.
WCAG speak: It should be easy to understand page content and easy to use the website.
Jim speak: Not only should visitors be able to recognise the existence of the content and be able to interact with it, but they must also be able to understand it.
WCAG speak: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Jim speak: It must be possible to access the content using everything from a text-only web browser to the latest Firefox browser. And everything in between, including screen readers and all the different brands and versions of browsers now available
‘Success criteria’, may not be a phrase that most people will be familiar with; however it is an idea at the heart of WCAG 2 – so we need to figure out what it means.
WCAG speak: For each principle there are guidelines. For each guideline, there are testable ‘success criteria’.
Jim speak: There are things you will need to check to assess whether your website is accessible or not.
Providing accessible Internet services, including accessible web design, website accessibility auditing, website accessibility training, online training, web development, mobile web development and social media integration.
Get in touch if you would like to discuss your latest project ideas.
A Compliance: the guidelines must be satisfied otherwise it will be impossible for one or more groups to access the Web content.
AA Compliance: should be satisfied, otherwise some groups will find it difficult to access the Web content.
AAA Compliance: may be satisfied: to make it easier for some groups to access the Web content.
Not just websites, but also PDF, Google Docs, Spreadsheets, e-Books… and other ‘digital assets’.
WCAG speak: information and user interface components must be presentable to users in ways they can perceive.
Jim speak: the site visitor must be able to recognise that the content exists. For example, by being able to see it, hear it or touch it.
There are guidelines – these are the basic goals that authors should work toward in order to make content more accessible.
Ther are ‘testable success criteria’.
Arial is a sans serif typeface, designed in 1982, based on Monotype Grotesque. The font has a similar proportion and weight to Helvetica.
It is a font with a contemporary look. Since 1992 it has shipped with every version of Microsoft Windows, which has helped it become ubiquitous.
It is a favourite of desktop publishers, though less so with designers; who think it inferior to Helvetica. The story goes, that it was designed primarily to avoid having to pay royalties (to Linotype) for the use of Helvetica.
It is rarely recommended for print work (though it is a print font). Helvetica is considered a better-looking, more flexible font.
Arial is recommended by RNIB and other organisations concerned with accessibility. If you search for guidelines for document accessibility they all tend to say, use Arial, with a minimum size of of 14pt.
However, I am not aware of any research that shows Arial to a better font than similar sans serif fonts. I think it’s more likely that it was the sheer ubiquity of this sans-serif font that led to the recommendation.
There are similar contemporary-looking, clean and easy-to-read fonts that would do the job just as well. I.e. Calibri, Century Gothic, Helvetica, Tahoma, and Verdana or Myriad Pro.
Note that all of the above fonts are sans serif. Serif fonts are rarely recommended – as more ornate fonts are considered more difficult to read. On lower resolution computer screens the serifs can be distorted, making the words look blurry.
Having said that, slab serif Fonts (a type of serif typeface characterized by thick, block-like serifs) such as Rockwell, Clarendon, and Museo Slab are considered easy to read and accessible. They tend to be used for headings rather than body text.
Photo: “Pool of Knowledge” by Ian Muttoo is licensed under CC BY-SA 2.0
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.
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.
Non-profits need to ensure their websites are accessible. This jargon free guide will help.
Just a quick follow up from my New Year Newsletter in which I gently encouraged you to think about your website and online marketing strategy. One area I mentioned in my newsletter was website accessibility. As I am sure you already know, it is considered a form of discrimination if disabled people are not able to access website content (the Equalities Act 2010). So with that in mind I thought I’d take the opportunity to look at the benefits of accessible website design from a slightly different perspective, i.e. the business case.
In September last year I spoke at the Accessibility Scotland conference and an audience member asked whether there was a ‘cast iron’ business case for making a website accessible? They were having trouble trying to get their managers to prioritise accessibility or put any resources into ensuring the website was accessible to disabled people.
‘Off the top of my head’ I could not remember any statistics to quote, though I did mention the usual stuff about a more accessible site generating more traffic, being easier to use and having reduced maintenance costs.
However, it seems that these logical arguments do not ‘cut any ice’ when it comes to making the case; what people want are facts, figures and case studies showing increased traffic and increased sales.
So with that in mind here are three major case studies showing the benefits of accessible website design in real terms.
These case studies clearly show that an accessible website design reduces maintenance costs, increases usability and increases traffic. In short, accessible website design is good for your business.
Even if you are not planning a brand new website from scratch I can help you realise some of the benefits outlined above by making your existing website more accessible. The first step in that process is to have your website audited to see if there are any aspects that are inaccessible to disabled peoples. You will then be in a position to have those issues addressed; thus increasing the accessibility and usability of your website.
As an website accessibility auditor since 1996 I am one of the most experienced and skilled practitioners in the UK. I will check your site against the WCAG 2.0 guidelines to ensure that your site is compliant with the BS8878 Web Accessibility Code of Practice.
An audit by myself goes way beyond tick box checks; I will check that your site is accessible and usable to the real people who visit your site.
Contact me today to take advantage of this unique expertise to utilise my expertise to attract more visitors to your website and make it easier to use by everyone. No matter what your budget or how big or small your website is I will be able to provide an audit that fits with your needs.
“Jim’s patience and close work with his designer meant we got a vibrant new image that we could use across all media.” Clare MacGillivray, Development Coordinator Edinburgh Tenants Federation
Or phone to talk over your ideas: 07810 098 119.
Photo by yvestown on Flickr – used under a Creative Commons licence
In this tip I recommend you check out a new Toolbar for Internet Explorer developed by Steven Faulkner, of the National Information and Library Service (NILS). Support for the toolbar is confined to Internet Explorer on Windows, so I haven’t been able to try it out myself (I use a Mac) – however, Gez Lemon of the website Juicy Studio is giving it glowing reviews – and I trust his judgement.
According to the blurb, ‘It is designed to help the user to interrogate aspects (structure/code/content) of a html document that can have an affect on the accessibility of that html document. ‘
It does all sorts of things I would find useful as a developer of accessible websites (validation, screen resolution changes, CSS on/off, links to online checking tools and so on), so I think you will find it very useful. You can find installation instructions, and a full feature list for the accessibility toolbar on the website.
The Web developer tool for Firefox is also worth checking out: http://www.chrispederick.com/work/firefox/webdeveloper/ – and it is according to Mike Pepper, ‘bloody good’.
Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.
The following markup example is typical of the code used to reference a server side image map.
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" > </a>
The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" alt="Alternative text links are provided at the foot of the page."> </a>
You then make the following links available at the foot of the page,
<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>
As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.
Other posts in this category