How to Build Truly Accessible Web Experiences for All Users

Information Accessibility

Many assume disabled people do not use the internet, but in reality they use websites as frequently as non‑disabled users for shopping, social activities, and often rely on it even more.

Common Consensus

According to the Ministry of Industry and Information Technology and the China Disabled Persons’ Federation, information accessibility means using digital means to compensate for physical or environmental differences so that anyone—regardless of ability, age, or health—can obtain, interact with, and use information safely and conveniently.

Disability Groups

Visual Impairment

People who need glasses, magnifiers, or other aids are considered visually impaired. Chinese standards classify visual impairment into four grades: blind level 1, blind level 2, low‑vision level 1, and low‑vision level 2. Color‑vision deficiencies (color blindness, color weakness) are also considered.

Hearing Impairment

Hearing loss results from congenital or acquired damage to the auditory system, making it difficult to hear or distinguish sounds. Nearly 50 % of people aged 12‑35 worldwide face hearing‑damage risk due to prolonged noise exposure, and over 25 % of those over 60 experience disabling hearing loss.

Motor Impairment

Motor impairments involve loss or limitation of limb movement due to structural or functional damage, which can be congenital or age‑related. Temporary or situational motor limitations (e.g., a broken wrist) also affect many users.

Cognitive Impairment

Cognitive disorders affect memory, comprehension, language, learning, calculation, and judgment, often accompanied by emotional or behavioral changes. Severe cases require assistance in almost every daily activity.

Elderly Users

People aged 65 and above constitute 18.7 % of China’s population (≈264 million). Technological advances such as tele‑medicine, remote tutoring, and contact‑less delivery highlight the digital challenges faced by older adults.

Focus and Focus Order

Screen‑reader users rely on focus cues to navigate content. Proper focus marking and logical focus order (top‑to‑bottom, left‑to‑right) improve the experience, especially in mobile apps where sequential navigation matters.

Inclusive Design Innovations

Designing with accessibility in mind yields features that benefit everyone, such as screen‑contrast adjustment, dark mode, predictive text, AI assistants (e.g., Siri), do‑not‑disturb mode, auto‑saved passwords, handwriting‑to‑text conversion, smart image recognition, real‑time subtitles, wheelchair‑friendly ramps, accessible elevators, and automatic doors.

Application

Target Group

Content

Screen Contrast

Visual impairment

Adjustable contrast helps both visually impaired users and sighted users in bright environments.

Dark Mode

Visual impairment

Dark background with light text improves readability in low‑light conditions.

Search Auto‑Fill

Cognitive impairment

Assists users with memory difficulties to complete searches.

Text Prediction

Cognitive impairment

Suggests words based on conversation context, allowing quick selection.

AI Assistants (Siri, etc.)

All users

Enables hands‑free operation, useful for users with limited hand use.

Do‑Not‑Disturb

Cognitive impairment

Helps users maintain focus.

Password Auto‑Save

Cognitive impairment

Speeds up login for users with memory issues.

Handwriting‑to‑Text

Hearing & cognitive impairment

Converts handwritten notes into typed text.

Smart Image Recognition

Visual impairment

Identifies objects for blind users and assists sighted users in e‑commerce.

Real‑time Subtitles

Hearing impairment

Provides captions for video/audio content.

Accessible Ramps

Motor impairment

Facilitates wheelchair access; also used by elderly and cyclists.

Accessible Elevators

Motor impairment

Accommodates wheelchairs, stretchers, and heavy luggage.

Automatic Doors

Motor impairment

Convenient for users with limited hand function and the general public.

Elevator Buttons

Motor impairment

Lowered button height serves wheelchair users and many passengers.

Assistive Technologies

Assistive technologies help disabled users interact with devices. Common tools include screen readers, screen magnifiers, voice control, ergonomic keyboards, and browser zoom functions.

Group / Technology

Screen Reader

Screen Magnifier

Speech‑to‑Text

Text‑to‑Speech

Subtitles

Contrast / Display Settings

Visual Impairment

✔

✔

✔

Low Vision

✔

✔

✔

✔

✔

Color‑Vision Deficiency

✔

Hearing Impairment

✔

✔

✔

Motor Impairment

✔

✔

✔

Cognitive Impairment

✔

✔

✔

✔

✔

Elderly

✔

✔

✔

✔

✔

✔ = required; 〇 = optional; – = not required

Screen Readers

Screen readers are useful not only for blind users but also for anyone who prefers auditory consumption of content.

Group

Use Cases

Blind

Rely on screen readers for navigation.

Low Vision

Often use screen readers; may combine with magnification.

Motor Impairment

Use screen readers when mouse or touch is difficult.

Elderly

Prefer auditory information.

All Users

When they do not want to read long articles.

iOS – VoiceOver

Enable VoiceOver via Settings → Accessibility → VoiceOver or triple‑press the side button.

Android – TalkBack

Activate TalkBack by holding both volume keys for three seconds.

Accessibility Development for Web

Web developers can improve accessibility by adjusting HTML structure, adding appropriate attributes, and using CSS/JavaScript to enhance the Accessibility Tree.

Accessibility Tree

Browsers transform the DOM into an Accessibility Tree that assistive technologies read.

Semantic Elements

Using semantic HTML tags (

<header>

,

<nav>

,

<main>

,

<section>

,

<aside>

,

<footer>

,

<button>

,

<a>

) automatically adds appropriate

role

attributes, improving how screen readers announce elements.

Correct element selection influences whether the whole block is selected and how it is described.

Examples of role mappings:

header → banner

,

footer → contentinfo

,

nav → navigation

,

section → region

,

main → main

,

aside → complementary

,

button → button

,

a → link

.

WAI‑ARIA

https://www.w3.org/TR/wai-aria/

ARIA attributes (e.g.,

role

,

aria-label

,

aria-labelledby

,

aria-hidden

,

aria-checked

,

aria-selected

,

aria-disabled

,

aria-haspopup

,

aria-expanded

,

aria-valuemin

,

aria-valuemax

,

aria-valuenow

,

aria-valuetext

) provide additional context for assistive technologies.

Tabindex

Elements that are not naturally focusable (e.g.,

<div>

) can receive focus via

tabindex="0"

. Positive values change the tab order, while

-1

makes an element focusable only programmatically.

<code>&lt;div tabindex="0"&gt;Focusable div&lt;/div&gt;</code>

Role Attribute

Screen readers announce the element type based on its

role

(e.g.,

button

,

link

,

checkbox

,

progressbar

).

Practical Recommendations

Maintain logical DOM order; avoid CSS that reverses visual order without adjusting

tabindex

.

Provide

alt

text for images; screen readers read the

alt

description.

Use

title

for video elements to describe content.

Prefer the native

disabled

attribute over styling classes; for non‑disableable elements, use

aria-disabled="true"

.

When using

<a>

as a button, add

role="button"

and an appropriate

aria-label

if the link contains only an icon.

Testing Tools

axe – Web Accessibility Testing

A Chrome extension that evaluates interactive pages and provides guidance.

Lighthouse

Built‑in Chrome DevTools audit that generates an accessibility report after a page refresh.