WCAG posts

Our Common accessibility misconceptions series sheds light on many misunderstood aspects of accessibility.

Most people working in digital are aware of the Web Content Accessibility Guidelines (WCAG) and know they can help make digital products work for everyone. However, the way the guidelines are discussed often leads to mixed assumptions about what they cover and how they should be used.

With the addition of Gez Lemon to the editing team, work continues on expanding and improving the HTML and screen reader support information.

By prioritising semantic HTML and offering keyboard-friendly alternatives for complex interactions, you help create a more inclusive experience for people who use a keyboard.

The European Accessibility Act (EAA) requires that products and services made available within the European Union (EU) are accessible. Like most EU Directives, the EAA (DIRECTIVE (EU) 2019/882) is hard to understand, and this has left many people unsure about what it means - and more importantly, what they need to do to make sure their products and services comply.

With this in mind, we'd like to share our understanding of the EAA as it applies to digital products and services.

In this post, we explore how to use the <fieldset> and <legend> elements to group and label form elements effectively, creating a more accessible and well-structured experience.

As well as labelling text fields with input and labels, and grouping forms with the <fieldset> and <legend> elements, form validation and error messages are also essential to making forms accessible to everyone.

In this post about forms, we explore how to effectively label text fields using <input> and <label> elements to create form inputs that are both accessible and user-friendly.

The ARIA Authoring Practices Guide (APG) contains an extensive range of design patterns aimed at helping developers to create accessible web experiences using WAI-ARIA. However, while we encourage web authors to follow these design patterns, a common misconception is that their usage is a prerequisite for conformance.

This is not the case.

A big question for many organisations is if WCAG 2.2 applies to native apps. In this post we explore what does and doesn't apply.

Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.

When tabindex="0" is applied to an HTML element, the content marked up using that element will become keyboard focusable, and is therefore a good starting point for supporting keyboard accessibility. However, applying this attribute haphazardly or unnecessarily can reduce the experience for people who use a keyboard or an equivalent input device to navigate web content.

Our foundations series provides an overview of core accessibility considerations.

They are a good starting point for visual designers, content designers, interaction designers, and developers when designing and building accessible products and services.

Supporting keyboard-only interaction is one of the most important principles of web accessibility. However, the scope of the Web Content Accessibility Guidelines (WCAG) in relation to keyboard accessibility is often misunderstood.

The UK Public Sector (Websites and Mobile Apps) Accessibility Regulations (PSAR) came into effect in 2018, following the approval of a 2016 Directive from the European Union (EU). In 2022, an amendment to the PSAR was released to address changes brought about by the UK's departure from the EU in 2020.

This post gives a high-level overview of what's new and what has changed in the Web Content Accessibility Guidelines (WCAG) 2.2, which have been promoted to stable W3C Recommendation today.

Sticky content helps prioritise important content so it's always visible, but it can create issues for sighted people who use a keyboard, or a keyboard-like device, as focused controls become hidden behind the sticky content.

This post discusses how you can keep controls behind sticky content visible and usable when they receive focus.

In this post, we cover updates we've made to our own site in order to better satisfy the requirements of the Web Content accessibility Guidelines (WCAG) 2.1 Level AAA.

An element's name, or accessible name, is how it's identified. An accessible description provides additional information, about the element, that complements the accessible name.

In this post we explore assigning accessible names and descriptions using HTML and WAI-ARIA.

A pointer gesture is an action a person performs using their finger, mouse, or an assistive technology like a head pointer or eye gaze system to operate a functional control. Some pointer gestures can be difficult or even impossible for certain people to perform, so an accessible alternative may be required.

This post introduces the different forms of pointer gestures and covers how and when to provide alternatives for people who can't perform them.

The Web Accessibility Initiative Accessible Rich Internet Applications specification 1.2, or WAI-ARIA or ARIA for short, is a technical specification written by the World Wide Web Consortium (W3C).

In this post we explore what WAI-ARIA is, and how it can enhance the user experience for people using screen readers.

Visible focus styles help us to understand which part of a web page we're interacting with. You may have seen visible focus styles appear as an outline around a link or a button for example.

For people who only use a keyboard to navigate the web, visible focus styles may be one of the few ways to understand where they are in a page and what it is that they are interacting with.

A target size is the area that can be activated in order to interact with an element. For people who have dexterity issues, the smaller a target size is, the more difficult it may be to use the website.

This post explores how to create usable, consistent, and well-spaced target sizes.

Deciding whether to use native or custom components for a website or web application can have implications in terms of development effort, user experience, and accessibility. This post considers the pros and cons of each approach with a focus on accessibility, and provides guidance on how to choose one.

HTML semantics provide accessibility information about page structure and an element's role, name, and state, helping to convey the nature and purpose of content on web pages.

In this post we explore what HTML semantics are, and how they're experienced by people using assistive technologies like screen readers and speech recognition software.

TalkBack only announces role information for a relatively small number of user interface (UI) elements within native apps. When comparing this behaviour against web content, this can often give the (false) impression that these elements must have been coded incorrectly and therefore need to be "fixed".

This blog post looks at when it is acceptable for a role not to be announced, the roles that TalkBack does announce, and what this means for conformance to the Web Content Accessibility Guidelines (WCAG).

If you've taken the time to understand WCAG 2.1 Level AAA and have spent time testing WCAG 2.1 Level AAA, what do you do with the results?

A list is generally agreed to be a series of words or phrases that are grouped together for a reason. That reason might be to remember the items we want from the store, to share our top five favourite movies, or to write down the steps needed to complete a task.

Most websites have common areas of content like a header and footer, a main content area, and one or more navigation blocks. Sighted people can identify these areas based on the way they're styled and the content they contain, but people who are blind cannot do that quite as efficiently. Landmarks, like headings and lists, offer screen reader users a more comparable experience for identifying and navigating between different areas of content.

Session timeouts are designed to protect privacy and security, but if they’re implemented incorrectly, they can prevent people from completing tasks on a website.

Well structured content helps everybody understand and navigate documents. When coded properly in the HTML, headings, lists, and landmarks help people who use screen readers (software that reads what’s on screen) both scan and navigate pages.

Colour is a valuable tool for communicating meaning. But if you can't see colour, then meaning is lost. Always plan to use colour to convey meaning in combination with another means of identification.

Good contrast is about using colours that provide enough variation between the content and background. This is particularly important for people who have conditions that affect vision or colour perception, as well as people browsing on mobile in different light conditions.

Text descriptions are primary content, and when images do not have a text description, anyone who cannot see the image will not know its purpose. This means people may be unable to access content or perform related tasks.

Animation and movement can add to the visual appeal of content, but poorly designed animations can cause problems for many people unless they are implemented correctly.

In our second post on WCAG 2.1 Level AAA, we discuss how to test against various Level AAA success criteria. You can read about the benefits of Level AAA and when to consider including Level AAA Success Criteria in our first post, Understanding WCAG 2.1 Level AAA, and what to do with your test results in our third post, Triaging WCAG 2.1 Level AAA.

In our first post about WCAG 2.1 Level AAA, we discuss why it is useful and when to consider including it. You can also read about how some Level AAA Success Criteria expand upon Level A and Level AA Success Criteria and how to test them in our second post, Testing WCAG 2.1 Level AAA, and what to do with your test results in our third post, Triaging WCAG 2.1 Level AAA.

An Accessibility Conformance Report (ACR) is a document that formally summarises the extent to which an information and communications technology (ICT) product or service conforms to an agreed set of international accessibility guidelines and standards.

The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making websites and apps accessible to people with disabilities. This article explains WCAG and how to use them.

A new law concerning the accessibility of public sector websites and mobile apps came into effect in 2018. This article explains what the Public Sector Accessibility Regulations mean, what’s included and what isn’t, and the deadlines by which all public sector websites and mobile apps must comply.