Code posts
When to use tabindex='0'
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.
Can generative AI help write accessible code?
Like many inventions before it, Generative AI is changing the way we do things. Like those inventions that went before it, Generative AI is capable of great good and great harm, and like the humans that used those inventions before us, we need to be smart about the way we use Generative AI.
What's new in WCAG 2.2
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: focus in view
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.
Foundations: accessible names and descriptions
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.
Foundations: pointer gestures
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.
Foundations: introduction to WAI-ARIA
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.
Foundations: visible focus styles
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.
Foundations: native versus custom components
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.
Foundations: HTML semantics
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.