WCAG 2.1 Guidelines Explained
Published: April 12, 2022
A history lesson: where did the website accessibility guidelines come from and what’s in them?
- 1995: The first web accessibility guidelines were compiled by Gregg Vanderheiden shortly after the 1995 Chicago WWW II Conference.
- 1998: University of Wisconsin–Madison compiled the Unified Web Site Accessibility Guidelines.
- 1999: they formed the basis for WCAG 1.0.
WCAG 1.0. were focused on HTML and web pages.
- 14 guidelines.
- 65 checkpoints.
- Each with a priority level: A, AA. AAA.
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.
14 WCAG 1 Guidelines
- Guideline 1: Provide equivalent alternatives to auditory and visual content.
- Guideline 2: Don’t rely on colour alone.
- Guideline 3: Use markup and style sheets, and do so properly.
- Guideline 4: Clarify natural language usage.
- Guideline 5: Create tables that transform gracefully.
- Guideline 6: Ensure that pages featuring new technologies transform gracefully.
- Guideline 7: Ensure user control of time-sensitive content changes.
- Guideline 8: Ensure direct accessibility of embedded user interfaces.
- Guideline 9: Design for device independence.
- Guideline 10: Use interim solutions.
- Guideline 11: Use W3C technologies and guidelines.
- Guideline 12: Provide context and orientation information.
- Guideline 13: Provide clear navigation mechanisms.
- Guideline 14: Ensure that documents are clear and simple.
WCAG 2 – Published 2008
Not just websites, but also PDF, Google Docs, Spreadsheets, e-Books… and other ‘digital assets’.
WCAG 2.1 – Published 2018
- WCAG 2.1 does not deprecate or supersede WCAG 2.0.
- The differences between WCAG 2.0 and 2.1 are mostly related to the use of tablets and mobile devices.
- They are designed to make content more accessible to a wider range of people, including accommodations for blindness and low vision.
WCAG 2.1 Based on 4 Principles
What do the principles mean?
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.
- 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: information and the operation of user interfaces must be understandable.
- 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.
Each Principle Has A Set Of Guidelines
1. Perceivable: the guidelines relate to:
- Text alternatives for non-text content.
- Captions and other alternatives for multimedia.
- Content can be presented in different ways, including by assistive technologies, without losing meaning.
Operable: the guideline Relate To:
- Ensuring functionality is available for keyboard users.
- Giving users enough time to read and use content.
- Avoiding content that causes seizures or physical reactions.
- Help users navigate and find content.
- Making it easier to use inputs other than by keyboard.
Understandable: the guideline Relate To:
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
Robust: the guideline Relate To:
- Maximising compatibility with current and future user tools.
- For example, by using valid code.
For Each Principle
There are guidelines – these are the basic goals that authors should work toward in order to make content more accessible.
And For Each Guideline
Ther are ‘testable success criteria’.
- Three levels of conformance are defined as: A (lowest), AA, and AAA (highest).
- Techniques and examples are provided for meeting those criteria.
- All ‘success criteria’ apply to mobile platforms as well as desktop platforms.
- However, the techniques sections does not yet fully cover mobile techniques.
Tags: accessibility, accessible, criteria, Gregg Vanderheiden, legislation, operable, percievable, robust, standards, understandable, validation, WCAG 1, WCAG 2, web development
Use YouTube to create video captions
Published: April 8, 2022
Automatically generated captions
YouTube generates captions automatically for most videos. This is useful even if you are not using Youtube to serve them; you can download the resulting captions file to use on other video platforms. For example, if I want to share a video on Facebook or Twitter or transcribe an interview for an article.
And if you need to convert the captions file to another format there are plenty of websites that offer the service for free,
There are a couple of downsides:
- They are not generated instantly.
- They are never accurate because the captions are generated by machine-learning algorithms.
You will always need to check and edit the text that Youtube generates.
How to add captions to YouTube videos
- Sign in to your YouTube channel and click on the ‘Manage Videos’ button.
- Upload your video and fill in the basic meta-information, e.g. title, description, keywords, and so on.
- Under More Options set your video language. It’s a good idea to change the visibility to private if you don’t want your video to go public without captions or with incomplete captions.
- Publish your video.
You can now wait a few hours or a few days for Youtube to automatically create the captions for your video. Once your video captions are generated and edited for accuracy you are ready to make your videos public.
Manually add or edit captions
However, if you are impatient, you can also add and edit captions manually.
Add captions manually
- When you are logged in select Subtitles from the left-hand menu (you might have to scroll the left-hand menu to find it).
- Click on the video you have just uploaded or any video you want to add captions to.
- If you have not already set the default language select your language from the drop-down menu.
- Click Confirm.
Assuming captions have not already been generated you will be presented with a dialog box with three choices,
- Upload a file i.e., an existing captions file.
- Auto-sync. This allows you to edit existing text or copy and paste a transcript for YouTube to sync.
- Type Manually, i.e., type in the speech in real-time as you watch the video).
I recommend you use the Auto-sync option.
To use Auto-sync – write out a full transcript of your video – ignoring any related time information. Then click the Auto-sync option and paste your text into the form field. Click Submit.
Youtube will then create the timings automatically – syncing your text with the audio of your video.
Writing out a transcript of the video in your favourite word processor is easier than typing the captions into the YouTube form as you watch the video. I’ve done that many times and it’s a taxing and time-consuming activity.
To edit your captions, click the Subtitles link from the left-hand menu and choose the video you would like to edit.
- If you have added captions manually it will say, Edit.
- If you have not added captions manually, the link will say Add.
If captions have been generated automatically, you will have a link that says, DUPLICATE AND EDIT.
- To add captions manually click the Add link. To edit manually created text click the Edit link, to edit the automated captions click DUPLICATE AND EDIT.
Edit automatically created captions
To edit the automatically added captions click DUPLICATE AND EDIT and a new editable copy will be created.
Then click the Edit link for the copy of the published captions text.
YouTube is not good at adding proper punctuation and capitalisation of words – so be sure to look for those issues.
Download the resulting captions file
To download the captions file click on the three dots to the right of the EDIT AS TEXT link within the captions dialog and choose Download subtitles.
By default, it downloads the captions in .sbv format (it does for me – but check if that’s the case for you). Use a conversion service such as the one provided by Arizona State University to convert the file to .srt.
If you Google for .sbv to .srt conversion you will find several websites that will cover the file for free.
© Jim Byrne 2022
Zoom video conferencing and accessibility
Published: December 7, 2021
Zoom was created in 2011 but it didn’t take off until its use during the pandemic – when it became the de facto video chat tool. There can be no doubt that it’s a powerful and valuable communication tool, however, it also has some major accessibility issues. In this short article I set out what some of those issues are and suggest ways to get around them – where possible.
For example, Zoom doesn’t always work well with screen reading software.
- Users are not alerted to new chat activity. It can be difficult to copy and paste URLs from the chat. And the audio can cut out if the screen reader user switches between chat and video.
- There are issues with screen sharing. The Share Screen function in Zoom is only screen-reader-accessible to the individual sharing their screen.
- There are issues with closed captioning.
- The Whiteboard function in Zoom is not accessible. Using the whiteboard is equivalent to posting an image to the screen – however, the image does not have a text description.
If you are going to be using the chat function you can use a ‘chat wrangler’, i.e., a person who monitors the chat, tells the group of new messages, and reads them out. Or you can separate out the chat and use an accessible chat application instead of the one built-in to Zoom.
Any important information, such as links should be sent to participants by email after conclusion of the session.
Accessible chat applications :
Keyboard navigation issues with Zoom desktop application
The Whiteboard function in Zoom is not accessible to screen reader uses – as it is the equivalent to posting an image to the screen – but it is an image without a text description.
If you intend to use the whiteboard – be sure to make the whiteboard content available in an alternative accessible format.
If you are using the whiteboard – ensure you are keeping screen reader users up to speed with what you are doing and what you are writing on the board.
Share screen functionality
The Share Screen function in Zoom is only screen-reader-accessible to the individual sharing their screen. If the session is going to involved screen sharing then seek out an alternative to Zoom for the session. There is a list of the most accessible video chat software at, the Big Hack website.
The Polling tool
The Zoom polling tool also has accessibility issues for presenters and participants with some impairments (as reported on Yale University accessibility page). As with the chat example above, you could look at using a third-party tool instead. For example, Mentimeter have a polling tool; they write about inclusivity in their accessibility statement – which suggests that it’s accessible. However, I’ve never used it, so check it out first.
Survey tools are necessarily the same as online poll tools but they might be worth checking out to see if they suit your purposes. The University Of Washington’s has a review of online survey tools. And I see SurveyMonkey has information about how you can make their surveys accessible – so that may also be worth investigating.
COCo (the Centre for Community Organizations) – about the accessibility of Zoom
DLF Wiki page for access issues with zoom
Jim Byrne December 2021
Accessible PDFs from MS Word
Published: October 8, 2021
PDFs are generally created from source documents; often that is an MS Word document – which has to be made accessible before being exported (or in the Mac version, saved) as a PDF.
In this short article I outline the steps you need to take to ensure your PDFs are accessible after you have gone through the conversion process. The information in this article assumes that you have already read my article on how to create an accessible Word Document (outlined in my ‘Creating Accessible Word Documents’ guide).
A summary: how to create an accessible Word document
In summary to make your Word document accessible you must:
- Use styles to add semantic structure, i.e. to create headings, paragraphs, lists and so on.
- Ensure your images have appropriate alt descriptions.
- Ensure that link text makes sense when read out of context and that you avoid using URLs as link text.
- Remove superfluous spacing.
- Avoid using text boxes and floating images; instead use use ‘inline with text’ for images.
- Ensure that you have good contrast between text and background colours.
Create and format your tables correctly to ensure that they are accessible.
How to create an accessible PDF
Once you have ensured that you Word document is accessible you are ready to convert it to PDF What you are now trying to do is to ensure that all the work you have done is preserved during the conversion process.
Luckily it is easy, as all you have to do is, export the file to PDF and ensure that ‘Document structure tags for accessibility’ has been checked within the export preferences pane. Don’t print to PDF – that will not preserve the work you have done in your Word document.
Once you have exported the file to PDF there are still a few things that you need to do to complete the process. You have to carry these steps out within Adobe Acrobat Pro DC.
- Check that PDF tab order is set to use ‘Use Document Structure’. Show thumbnails, select all thumbnails then right-click (Ctrl click on Mac) and on the resulting menu choose Page Properties.
- Click ‘Tab Order’ tab and check click ‘Use Document Structure’.
- Give the document a title via File / Properties / Description.
- And finally, run the built-in accessibility checker. Via, View/Tools/ Accessibility/Open/Accessibility Check.
- Accessible PDFs are tagged documents
The major difference between an accessible PDF and an inaccessible PDF is that the accessible version will be tagged, i.e. each element of the document will have a tag. In simple terms, that means each element has a text label saying what type of element It is, i.e. is it a paragraph, a heading, an image a bulleted list and so on.
It is these tags that allow accessibility technologies to read and organise the content in ways that make it accessible. For example, a blind person can use a screen reader, such as JAWS to list all of the headings in the document and jump to the section they are interested in – only because the headings in the document are identified as headings – using tags. If there were no tags in the PDF document JAWS would not be able o recognise headings from all of the other text in the document.
A note on the Arial font and accessibility
Published: July 27, 2021
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 and accessibility
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.
Slab serif Fonts
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
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
5 ideas to improve your online presence and make your site more secure in 2018
Published: January 9, 2018
Happy New Year. I hope you had a restful break. 🙂
This is the time of year to make plans; freshen up your website; reach more people or try to do things more efficiently.
Here are five things to consider as we move in to 2018. Click the appropriate link for information about those activities you are interested in:
1. Make sure your website has been upgraded or re-designed to work well on mobiles and tablet computers. 2017 was the year that mobile usage finally overtook desktop browsing. Every website now needs to be a ‘responsive’ website and able to operate on all devices. Is yours?
The importance of having a mobile friendly website is, of course, not new. In 2016 Google made changes to the way they rank sites, to the extent that more mobile friendly sites are moved up the rankings. It is no longer simply about usability, it’s also about whether you can be found at all, ‘on any platform’. Gianluca Fiorelli wrote in the Moz* newsletter (Moz are an SEO consulting company) that, ‘Google is steadily moving to a mobile-only world’. Get in touch if you would like to discuss upgrading yours site to work well on mobiles.
2. Consider commissioning an accessibility audit of your site. You may be breaking the law without knowing it. If you web content is not accessible to disabled people that is considered a form of discrimination under the Equalities Act 2010.
If you ensure your website is accessible you are likely to increase the audience for your content. Accessible websites also tend to be easier to use for all visitors. This is an area I have over two decades of experience in so if you have any questions or if you would like to commission an audit get in touch. Get back to me within two days of receiving this newsletter and I promise to provide an unprecedented good deal on a website accessibility audit of your site. I will check your site against WCAG 2 level 2, or whatever level you require.
3. Ensure your website is protected against being hacked and that if you are hacked you have your content backed up. I am currently providing a discount on my standard website backup service.
I also provide a 24/7 monitoring (and cleanup) service to ensure that if your website gets hacked you will know right away. Immediate action is required if you website is hacked:
- If you are hacked and Google detects that your site has been hacked then your site will be blacklisted. This means that Google will start to tell visitors that your site is dangerous. Clearly that is not good for your credibility and, of course, you will lose much of your traffic as not many people will override a Google warning to visit your content. Once Google has blacklisted your site you need to clear your site of malicious content and then you need to try to get Google to remove the blacklisting.
- Hackers can add malicious code and content to your site and serve adverts to your visitors without you noticing. If you visit your site directly it looks fine. However when people are finding your site via Google it appears to be serving drugs or porn or some other malicious content.
In other words you need your site to be monitored and you need to be alerted right away if malicious code or content has been added to your site. You might think it won’t ever happen to you. Not true, it is almost guaranteed that you will be hacked at some point. 43,000 sites get hacked every day and 10,000 sites get blacklisted by Google every day. Get in touch if you have a WordPress website and you are not already using a monitoring and cleanup service. Not only can I give you a great deal, I’ll also install the monitoring software for free.
4. Make sure you are ready for the new General Data Protection Regulations (GDPR). The GDPR is the EU data protection regulation which replaces the current Data Protection Act. It aims to simplify regulation and give individuals more control over their personal data. I recently wrote a short summary about the GDPR I think you will find useful.
5. Get a brand new accessible, mobile friendly, feature rich website; one that is designed from the ground up to help you meet your goals, whether that be to get more members, sell more products or get more people registered for your newsletter. If it’s been on your mind for a while now’s the perfect time to take action.
Get in touch if you want to chat about any of the above. Tel: 07810 098119 Email: firstname.lastname@example.org
All the best,
Public Sector Equality Duty – A summary
Published: January 31, 2017
What is the public sector equality duty for?
The public sector equality duty is designed to ensure that those carrying out public functions (including public authorities) consider how they can contribute to and help foster a more equal society. They have a duty to promote good relations between different groups and to advocate and advance equality.
- Deliver improved outcomes for everyone.
- Develop policies, based on evidence.
- Take action to advance equality.
- Be transparent, accessible and accountable.
- With this policy the onus shifts away from the individual’s need to assert their right to equal treatment onto public authorities. Public authorities are now expected to be pro-active in tackling institutional discrimination.
The public sector equality duty covers a list of ‘protected characteristics’:
- religion or belief
- gender reassignment,
- pregnancy and maternity
- sexual orientation
The duty also covers marriage and civil partnerships, in relation to eliminating unlawful employment discrimination.
How does it relate to disabled people?
Organisations must take into account a disabled person’s impairment and ensure that that impairment is not a barrier to equal treatment. Organisations need to be pro-active i.e. not wait to react if someone complains about an issue or requests equal access or treatment. An example would be a local authority making their website accessible to disabled people and providing alternative formats available by default.
The General Equality Duty
The public sector equality duty is set out in the Equality Act 2010 and referred to as the ‘general equality duty’.
The general equality duty has three elements:
- To eliminate unlawful discrimination.
- To promote equality of opportunity.
- To foster good relations between those with ‘protected characteristics’ and those who do not.
A public authority must take account of these three needs to comply with the general equality duty.
Who is subject to the General Equality Duty?
The list includes health boards, education authorities, further and higher education authorities, local authorities, the police, fire and rescue authorities and Scottish Ministers. There is a full list of those subject to the act online.
The duty covers public authorities when carrying out their public functions as service providers, as policy makers and as employers and also covers services and functions which are contracted out.
When private and voluntary sector organisations are carrying out a ‘public function’ they are also covered by the duty. A public function’ is one defined as such by the Human Rights Act 1998.
In order to meet the general duty, a public authority must:
- Be educated about the the act and the requirements implied so that they can be applied to policies and practices. Duties under the act should be considered at the time when new policies are being created.
- The decision making process must take heed of the three needs of the general equality duty in a way that influences the outcomes of those decisions.
- The general equality duty is a ‘continuing duty’ – so it has to be considered during the implementation of policy and must be continually reviewed.
- The public equality duty also applies to anyone exercising public functions on behalf of a public body; the duty rests with the public authority even when delegated to a third-part organisation.
Secondary legislation outlining specific duties came into force on 27 May 2012.
Each listed authority is required to:
- Publish progress on mainstreaming of the equality duty, equality outcomes, gender pay gap and equal pay.
- Review policies and practices and asses them.
- Gather employee information.
- Consider award criteria in relation to public procurement
- Publish information in a manner that is accessible.
How Jim Byrne Accessible Website Design Can help organisations comply with the Public Sector Equality Duty
Many of the organisations subject to the act have websites and documents that are not accessible to disabled people. If a disabled person cannot access information on a website managed by a public authority and no alternatives are offered that would be considered as unequal treatment under the Equality Act 2010 .
The services I provide can help in the following ways. I can:
- Carry out a website access audit to check if there are any barriers to disabled people accessing content.
- Help make the updates necessary to ensure your website is accessible
- Develop a new usable accessible website for your in so that you are being pro-active in meeting the needs of disabled people
- Update your existing website to make it more accessible.
- Identify and fix accessibility problems with PDF’s or Word documents you publish so that your publications are accessible to your target groups.
Contact me to discuss any of the above. Telephone: 07810 098 119
Or fill in the contact form below:
[contact-form-7 id=”132″ title=”Contact form 1″]
WordPress Plugins that help accessibility
Published: December 4, 2014
Many of the websites I develop use WordPress for Content Management; so I’m I’m always happy to come across plugins that help make WordPress sites more accessible.
Here are two that I thought looked particularly useful.
A cross-browser, accessible audio player (MP3 player).
There are a couple of features that make it more accessible than the ‘bog-standard’ mp3 player:
- The audio file can be downloaded by text browser users.
- Screen reader user can control the player buttons, i.e. play, stop and so on.
My Read More
This plugin replaces the default “read more” with text that you specify, and adds words from the title to it (the number of words is your choice). This means that all your links will be unique.
Download My Read More.
Do you know of any accessibility plugins?
Get in touch if you have come across any WordPress plugins designed to make WordPress sites more accessible; your recommendations are appreciated.
All the best,
p.s. and of course you can also contact me for all your WordPress development needs.
How to make client-side image maps accessible
Published: November 3, 2014
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.
<img ismap src="imagemap.gif" >
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:
<img ismap src="imagemap.gif"
alt="Alternative text links are provided at the foot of the page.">
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.