Accessibility Highlights
Every accessibility highlight in one file, each with what it’s for, how to support it and useful links, plus a glossary of terms.
Accessibility
Highlights covering topics related to accessibility.
Files
Accessibility Debt
Accessibility debt is like technical debt, but for accessibility.
Accessibility Overlays
Accessibility overlays are automated tools that claim to find and fix accessibility issues on websites.
Accessibility Testing
Accessibility Testing is the process of checking a digital product to ensure it can be used by people with disabilities.
Accessible Authentication
When people can't use a login page, the harm can be serious.
Accessible Links
Link text should say where a link goes, so it makes sense on its own, including for people using assistive technology.
Accessible PDFs
We use PDF (Portable Document Format) to present all kinds of documents like guidelines, contractual agreements, data-heavy reports and even site maps.
Alt Text
Some people cannot see the images we display.
Accessible Rich Internet Applications (ARIA)
ARIA stands for 'Accessible Rich Internet Applications'.
- PDF View in a new tab: Accessible Rich Internet Applications (ARIA), PDForDownload: Accessible Rich Internet Applications (ARIA), PDF, 58KB
- Word document Download: Accessible Rich Internet Applications (ARIA), Word document, 194KB
- PowerPoint Download: Accessible Rich Internet Applications (ARIA), PowerPoint, 232KB
ASCII Art
ASCII art is the practice of arranging punctuation and symbols to create a picture, like the ‘shrug’ ¯\_(ツ)_/¯ or drawings of animals.
Assistive Technology (Beyond Screen Readers)
Assistive Technology (AT) is any tool that helps people with disabilities use a computer.
- PDF View in a new tab: Assistive Technology (Beyond Screen Readers), PDForDownload: Assistive Technology (Beyond Screen Readers), PDF, 31KB
- Word document Download: Assistive Technology (Beyond Screen Readers), Word document, 112KB
- PowerPoint Download: Assistive Technology (Beyond Screen Readers), PowerPoint, 233KB
Basic Accessibility Testing
Testing makes sure that what gets built actually works for everyone.
Breadcrumbs & Wayfinding
Breadcrumbs are a secondary navigation system that shows a user's current location within a site's hierarchy.
Buttons
Buttons let people take an action, such as submitting a form, saving information or opening a menu.
Captions & Transcripts
Captions are timed text that appears with a video to show spoken words, music, and sounds, helping viewers who are deaf or hard of hearing.
Carousels & Sliders
A carousel is a sliding banner that automatically cycles through images or messages on a webpage, like a digital billboard.
Colour-blind Series: Anomalous Trichromacy
Anomalous trichromacy is when all three types of colour sensing cells are present, but one doesn’t work as strongly as it should.
- PDF View in a new tab: Colour-blind Series: Anomalous Trichromacy, PDForDownload: Colour-blind Series: Anomalous Trichromacy, PDF, 38KB
- Word document Download: Colour-blind Series: Anomalous Trichromacy, Word document, 112KB
- PowerPoint Download: Colour-blind Series: Anomalous Trichromacy, PowerPoint, 232KB
Colour-blind Series: Deuteranopia
Deuteranopia is a form of colour blindness that affects the ability to see green.
Colour-blind Series: Protanopia
Protanopia is a form of colour blindness that affects the ability to see red.
Colour-blind Series: The Rarer Types
Earlier entries in this series covered Protanopia, Deuteranopia, and Tritanopia.
Colour-blind Series: Tritanopia
Tritanopia is a form of colour blindness that affects the ability to see blue.
Colour Blindness
Colour blindness (or Colour Vision Deficiency) is about more than just seeing in black and white.
Colour Contrast
Websites, social media images, and out-of-home advertising should have a good colour contrast between text and background colour.
Consistency
Navigation, buttons and labels that look and work the same on every page help people find their way around.
Dark Mode
Dark mode is a colour option that flips the user’s view from the typical dark text on a light background to light text on a dark background.
Device Orientation
Websites and apps should work whichever way a screen is turned, as some people can’t turn their device.
Error Messages & Validation
Form errors are a major barrier for all users, but they can completely block users with disabilities.
Flashing & Photosensitivity
High-energy videos with strobing effects or rapid transitions can be physically dangerous.
Focus States
Focus states occur when an interactive element receives focus.
Focus Traps
A focus trap keeps keyboard focus inside one part of the page while it’s open, such as a modal, but always lets the user leave.
Fonts
Fonts are used everywhere, whether that's in a Word document, in a design, in a slide deck, or on a website.
Forms
An accessible form is an online form that everyone can fill in, including people with vision, movement, or cognitive disabilities.
Good Alt Text
While basic alt text just labels an image, good alt text explains its purpose.
Head Pointer
Head pointer allows users with limited hand function to control a computer cursor using head movements and, in some cases, facial expressions.
Headings
Most people are familiar with headings, whether that's a title in a document or a title sheet on a slide deck.
Hover states
Hover states are what happen when a mouse pointer moves over an interactive element.
Inclusive Language
Inclusive language means using words that respect everyone.
Keyboard Only
Keyboard only is a method for navigating the web using just a keyboard (not using the mouse at all).
Landmarks & Roles
Imagine trying to navigate a city with no street signs, where every building looks exactly the same.
Link Text
Many screen reader users navigate websites by pulling up a list of only the links on a page.
Meetings
Meetings are part of most workdays, and there are many ways to make them fully accessible and inclusive.
Modals
Modals are manually triggered pop-ups that provide extra information.
Neurodiversity & Inclusive Design
Neurodiversity describes the natural variations in how human brains function, process information, learn, and interact.
Personas
Personas are made-up people with real accessibility needs, which you can role-play as while testing your work.
Prefers-reduced-motion
Some people struggle with motion on websites.
Presentations
Most people will have to give a presentation at some point.
QR Codes
A QR (Quick Response) code is a type of two-dimensional barcode.
Screen reader only styling
Screen reader only styling ensures that everyone who uses a website can access the important information it contains.
Screen Readers
Screen readers are pieces of software that announce content audibly.
Shifting Left
Imagine baking a cake, pulling it out of the oven, and realising you forgot the sugar.
Social Media: Alt Text
On social media, images often hold the core message or punchline.
Social Media: Custom Fonts
People often use generator websites to make their text look unique (e.g.
Social Media: Emojis
Emojis add personality and tone to messages, but for a screen reader user, they are read aloud as literal text descriptions.
Social Media: Hashtags
Imagine trying to read a sentence where all the spaces have been removed.
Tap Targets
Buttons and links should be big enough, with enough space around them, to press without hitting something else by mistake.
Temporary & Situational Disabilities
People often link accessibility with permanent disabilities.
Text Alternatives for Complex Images
Standard 'alt text' is great for simple photos, but it often fails for complex data like charts, graphs, flowcharts, or infographics.
Time Limits
Time limits refer to when a page sets a time limit on doing a certain action.
Tooltips & Popovers
Tooltips and popovers give users extra info on demand (like for an icon button).
Touch Gestures
Imagine trying to open a heavy door, but the rule is you can only use your pinky fingers.
Zooming
Some people need to make the text and images on a website bigger to see them clearly.