Digital accessibility means building websites, apps and documents so that disabled people can see, hear, understand and operate them with whatever they use: a keyboard, a screen reader, zoom, captions or voice control. The common yardstick is WCAG level AA, and most of the work is ordinary craft: clear structure, enough contrast, text for images, controls that answer the keyboard and forms that explain their errors.
This site gives plain-English answers to the questions people actually type in: what a success criterion means, which contrast ratio passes, how to write alt text for a photo, how to switch a screen reader off again. Start with the basics below, or jump to the guide map further down the page.
Quick facts
Standard to aim for
WCAG 2.2 level AA, which is 55 success criteria.
Who benefits
People with permanent, temporary and situational disabilities, so in practice almost every visitor at some point.
Fastest first test
Put your mouse away and press Tab through your home page.
What tools catch
Automated checkers find roughly a third of real problems. Manual checks find the rest.
Overlay widgets
A script added on top of a site cannot make it conform. Fix the code and content.
What digital accessibility means
Web accessibility is the same idea applied to sites and web apps. In web development it is less about special features and more about using the platform properly. A real button element already works with a keyboard and announces itself to a screen reader. A clickable div does neither until you add a lot of code.
The measuring stick is WCAG, the Web Content Accessibility Guidelines from the W3C (its own WCAG overview is the official source). WCAG turns the vague word "accessible" into testable statements called success criteria, sorted into levels A, AA and AAA. Courts, regulators and buyers across the US, EU, India, UK and Canada point to it, usually at level AA. Read the WCAG explainer for how it is put together, or the accessibility laws overview for the legal side.
Accessibility is not a second, simplified copy of your site for disabled users. It is the one site everybody uses, built so it does not shut people out.
Who web accessibility helps
A helpful way to think about who is affected is to split each need into three kinds: permanent, temporary and situational. A person with one arm, a person with a broken wrist and a parent holding a baby all need a site that works with one hand.
| Need | Permanent | Temporary | Situational |
|---|---|---|---|
| Seeing | Blind or low vision | Eyes dilated after an eye test | Glare from bright sun on a phone |
| Hearing | Deaf or hard of hearing | Ear infection | Loud train, or a sleeping child nearby |
| Moving and touch | Tremor, paralysis, limb difference | Arm in a cast | Holding shopping in one hand |
| Thinking and focus | Dyslexia, ADHD, memory loss | Concussion | Tired, stressed or reading in a second language |
| Speaking | Speech disability | Sore throat after surgery | Noisy room where voice commands fail |
Older people are the largest group of all. Eyesight, hearing and fine motor control change with age, and older visitors rarely call themselves disabled, so they will not look for an accessibility menu. They just leave.
Types of disabilities web accessibility covers
WCAG is written around functions, not diagnoses. The table maps the main groups to what they use and what your site has to get right for them.
| Group | How people use the web | What your site must get right | Start here |
|---|---|---|---|
| Blind | Screen reader speech or braille, keyboard or touch gestures | Text for images, real headings, labelled controls, correct roles | Screen readers |
| Low vision | Zoom up to 400 percent, magnifiers, high contrast modes | Contrast of 4.5:1 for body text, layouts that reflow at narrow widths | Contrast ratio rules |
| Color vision deficiency | Normal browsing, but some hues look alike | Never use color alone to carry meaning | Use of color |
| Deaf and hard of hearing | Captions, transcripts, sign language | Captions on video, text versions of audio | Accessible design |
| Motor and dexterity | Keyboard, switch devices, voice control, eye tracking | Everything works from the keyboard, targets are big enough | Keyboard access |
| Cognitive and learning | Plain language, predictable layouts, reminders | Clear labels, helpful errors, no sudden changes | Error identification |
| Seizure and vestibular | Settings that reduce motion | No flashing, and a way to stop moving content | Pause, stop, hide |
Benefits of web accessibility
The benefits of web accessibility reach well past the disabled visitors you build it for.
- More customers finish what they started. Clear forms, readable text and working buttons lift completion rates for everyone.
- Lower legal exposure. Courts and regulators in many countries measure sites against WCAG. Meeting it does not make you immune, but it puts you on firm ground. Treat that as background, not legal advice.
- Better search visibility. Real headings, descriptive link text and alt text help search engines understand pages too. See alt text and SEO.
- Cheaper maintenance. Semantic HTML and shared accessible components mean fewer custom fixes later.
- Works in hard conditions. Captions help in silent offices, contrast helps in sunlight, keyboard support helps power users.
Accessibility costs least when it is part of design and build. Retrofitting a finished site costs more, and the bill grows with every extra template, PDF and custom widget.
How to start: an introduction to web accessibility work
You do not need to learn all of WCAG before you begin. This order gets the biggest wins first.
- Pick your target: WCAG 2.2 AA unless a law or contract names something else.
- Run a free automated scan on your main templates with one of the WCAG checkers. Fix the easy, certain errors.
- Unplug the mouse. Tab through each template and check you can see focus and reach every control.
- Check text and button colors with the contrast checker at the top of this page.
- Paste your page source into the alt text checker to find missing and weak descriptions.
- Try one key journey, such as sign up or checkout, using a screen reader, following our screen reader testing steps.
- Fix shared components and templates first, then content. Track progress with the WCAG checklist.
- Post an accessibility statement that tells people how to report barriers, and plan a full accessibility audit for larger sites.
Be wary of anything that promises one-line compliance. Accessibility widgets cannot repair missing labels or broken keyboard support in your code.
Guide map: accessibility basics, law and process
These guides cover the people side of the work: law, process, design, testing and careers.
| Guide | Use it when |
|---|---|
| Accessible web design | You are planning a new site or redesign and want patterns that pass from the first sketch. |
| Accessibility examples | You learn best from side by side broken and fixed code. |
| Accessibility testing | You need a test plan that mixes tools, keyboard checks and assistive technology. |
| Accessibility audit | A buyer, client or regulator asks for a formal review and report. |
| Accessibility services | You are comparing outside help for audits, remediation or training. |
| Training and certification | You or your team want structured learning or a recognised credential. |
| Accessibility jobs | You want to work in the field, from testing roles to describing images. |
| Accessibility laws | You need to know which rules apply in your country or market. |
| ADA website compliance | Your business serves customers in the United States. |
| Accessibility widgets | A vendor offers a toolbar plugin that claims to fix everything. |
| Accessibility icons | You need a symbol for an accessibility page, menu or entrance. |
Guide map: WCAG versions and levels
Everything about the standard itself: what it is, which version applies and what conformance really means.
| Guide | Use it when |
|---|---|
| WCAG explained | You want the full picture of the guidelines in one place. |
| POUR principles | You need the four ideas that hold every criterion together. |
| Levels A, AA, AAA | Someone asks which level you must reach and why not the top one. |
| WCAG compliance | You must show or claim that a site conforms. |
| WCAG versions | You are unsure which version a contract or law points to. |
| WCAG 2.0 | An older policy or procurement rule still names the original 2.x release. |
| WCAG 2.1 | You want to know what the mobile and low vision update added. |
| WCAG 2.1 AA | Your legal target is the 50 criteria most regulators cite. |
| WCAG 2.2 | You need the newest criteria on focus, dragging and logins. |
| WCAG 2.2 AA | You are building to the current recommended target. |
| WCAG 3.0 | You heard about the next major version and wonder if it matters yet. |
| WCAG checkers | You are choosing scanners and extensions for testing. |
| WCAG for mobile apps | Your product is a native iOS or Android app, not only a website. |
Guide map: success criteria
One guide per success criterion that audits flag most often, each with tests, failures and fixed code.
| Guide | Level | Use it when |
|---|---|---|
| WCAG checklist | All | You want every criterion in one filterable list to tick off. |
| Non-text content, 1.1.1 | A | Images, icons or image buttons have no text equivalent. |
| Info and relationships, 1.3.1 | A | Headings, lists or form labels only look right but are not coded. |
| Meaningful sequence, 1.3.2 | A | The screen reader order makes no sense compared with the layout. |
| Sensory characteristics, 1.3.3 | A | Your instructions say things like the green button on the left. |
| Identify input purpose, 1.3.5 | AA | Personal data fields lack autocomplete values. |
| Resize text, 1.4.4 | AA | Text gets cut off or overlaps when zoomed to 200 percent. |
| Images of text, 1.4.5 | AA | Headings or banners are pictures instead of live text. |
| Reflow, 1.4.10 | AA | Pages scroll sideways on a narrow screen or at 400 percent zoom. |
| Text spacing, 1.4.12 | AA | Wider line or letter spacing makes text overflow its box. |
| Hover or focus content, 1.4.13 | AA | Tooltips or popovers vanish, block content or ignore Escape. |
| Keyboard, 2.1.1 | A | Some feature only works with a mouse or touch. |
| Pause, stop, hide, 2.2.2 | A | Carousels, tickers or background video move with no off switch. |
| Focus order, 2.4.3 | A | Tab jumps around the page in a confusing order. |
| Link purpose, 2.4.4 | A | Your links say read more or learn more with no context. |
| Headings and labels, 2.4.6 | AA | Headings and field labels are vague. |
| Focus visible, 2.4.7 | AA | Someone removed the focus outline in CSS. |
| Focus not obscured, 2.4.11 | AA | Sticky headers or banners cover the focused item. |
| Label in name, 2.5.3 | A | Voice control users cannot activate a button by saying its visible label. |
| Target size, 2.5.8 | AA | Tap targets are tiny or crowded together. |
| On input, 3.2.2 | A | Picking an option reloads the page or moves focus by surprise. |
| Error identification, 3.3.1 | A | Form errors only show as a red border. |
| Labels or instructions, 3.3.2 | A | Fields rely on placeholder text or unexplained formats. |
| Name, role, value, 4.1.2 | A | Custom widgets built from div elements confuse screen readers. |
| Status messages, 4.1.3 | AA | Messages like item added or no results are silent for screen reader users. |
Guide map: color contrast and alt text
Contrast and alt text are the two problems found on almost every audited site, so each has its own set of guides and free tools.
| Guide | Use it when |
|---|---|
| Contrast checker | You have two colors and need a pass or fail with the exact ratio. |
| Contrast ratio rules | You wonder which ratio body text, big headings and icons each need. |
| Non-text contrast, 1.4.11 | Input borders, icons or chart lines are too faint. |
| Use of color, 1.4.1 | Links, errors or chart series differ by color only. |
| What alt text is | You are new to alt text and want the basics. |
| Writing alt text | You know where the field is but not what to put in it. |
| Alt text examples | You want worked descriptions for photos, logos, charts and icons. |
| Adding alt text | You need the exact steps in your editor or site builder. |
| Alt text generator | You want help drafting a description from a few details. |
| Alt text checker | You want to audit every image on a page at once. |
| Alt text for SEO | You care how image descriptions affect search traffic. |
| Alt text on social posts | You post photos to a social app and want them described. |
| PDF alt text errors | A PDF checker reports figures without alternate text. |
Guide map: screen readers
Screen readers are how many blind users experience your site. These guides show how to start, use and stop each one, and how to test with it.
| Guide | Use it when |
|---|---|
| What a screen reader is | You have never used one and want to know how they work. |
| Free screen readers | You want a no-cost reader for testing or daily use. |
| Windows screen readers | You test on a Windows laptop or desktop. |
| Free open source Windows reader | You want the most popular free reader for testing on Windows. |
| Commercial Windows reader | Your users or clients rely on the long-standing paid option. |
| Mac and iPhone | You test on macOS, iPhone or iPad. |
| Android screen reader | You test on an Android phone or tablet. |
| Screen reader for Chrome | You use Chrome or a Chromebook and wonder what is built in. |
| Screen reader testing | You want a repeatable way to test pages with speech output. |
| ARIA labels | You need to name an icon button or landmark the right way. |
Questions people ask
What is digital accessibility in simple words?
It means people with disabilities can use your website, app or document as fully as anyone else. That covers seeing the content, operating the controls and understanding what happens. WCAG is the standard most organisations use to measure it.
What is the difference between web accessibility and digital accessibility?
Web accessibility covers websites and web apps. Digital accessibility is the wider term and also includes native mobile apps, PDFs, emails, kiosks and video. The same WCAG principles apply to all of them.
Which disabilities does web accessibility cover?
It covers vision, hearing, motor, cognitive, learning, speech, seizure and vestibular disabilities. Many fixes also help people with temporary injuries or difficult surroundings, such as bright sun or a noisy room.
Is web accessibility a legal requirement?
In many places, yes. US courts applying the ADA, the European Accessibility Act, India's disability rights law and UK public sector rules all lead back to WCAG. A lawyer can advise on your specific case; see our overview of accessibility laws.
Can an automated tool make my site accessible?
No. Scanners find roughly a third of problems, and overlay scripts cannot rewrite your content or fix broken components. You still need keyboard checks, screen reader testing and a person who understands WCAG.
What should a web accessibility report contain?
A useful report names, for every issue, where it occurs, which WCAG criterion it breaks, how severe it is, how to reproduce it and how to fix it. It should also say which pages and journeys were tested and with which tools and assistive technology.