Turning Interactive Web Features into Inclusive Experiences: Practical A11Y Strategies

Why Accessibility Matters

Web accessibility (A11Y) ensures that people with disabilities can use web services. Global statistics show that over 1 billion people (≈15% of the world population) have some form of disability, and in China more than 20% of the population faces accessibility challenges. Making interactive experiences accessible is both a social responsibility and a business opportunity.

“The Internet should be equal for everyone.” – Tim Berners‑Lee

The Four Core Principles of A11Y

Perceivable : Information and UI components must be presentable to users’ senses.

Operable : Interface elements must be usable via keyboard, voice, or other input methods.

Understandable : Content and UI operations must be clear and predictable.

Robust : Content must remain accessible as technologies evolve.

Semantic HTML Is the Foundation

Using meaningful tags (

header

,

nav

,

main

,

section

,

article

,

aside

,

footer

, heading levels

h1–h6

) gives screen readers reliable structure. Avoid generic

div

and

span

for content that has a specific meaning.

<code>&lt;ul&gt;
  &lt;li&gt;
    &lt;figure&gt;
      &lt;img src="https://example.com/img.png" alt="Main venue" /&gt;
      &lt;figcaption&gt;
        &lt;h2&gt;Explore the venue and earn up to 1000 coins&lt;/h2&gt;
        &lt;p&gt;Earn up to 1000 coins&lt;/p&gt;
      &lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;button&gt;Enter&lt;/button&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code>

Alternative Text for Images

Every

img

must have an

alt

attribute that conveys the image’s purpose. Decorative images can use an empty

alt=""

so they are ignored by assistive technology.

<code>&lt;img src="https://example.com/decorative.png" alt="" /&gt;</code>

Avoid Empty Links and Buttons

Links and buttons need visible text or an accessible label. If the visual label is an icon, add a screen‑reader‑only text.

<code>&lt;a href="/store"&gt;Shop&nbsp;&lt;span class="sr-only"&gt;Nike flagship store&lt;/span&gt;&lt;/a&gt;
&lt;button&gt;Share&nbsp;&lt;span class="sr-only"&gt;Share this article&lt;/span&gt;&lt;/button&gt;</code>

Landmark Roles

HTML5 landmark elements map to ARIA roles (

banner

,

navigation

,

main

,

complementary

,

contentinfo

) and let users jump to major page sections quickly.

<code>&lt;header role="banner"&gt;…&lt;/header&gt;
&lt;nav role="navigation"&gt;…&lt;/nav&gt;
&lt;main role="main"&gt;…&lt;/main&gt;
&lt;aside role="complementary"&gt;…&lt;/aside&gt;
&lt;footer role="contentinfo"&gt;…&lt;/footer&gt;</code>

When to Use ARIA

ARIA should supplement native HTML only when the required semantics are missing. Overusing ARIA can confuse assistive technology. For example, a custom button built with

div

needs

role="button"

,

tabindex="0"

, and keyboard event handling.

<code>&lt;div role="button" tabindex="0"&gt;Confirm&lt;/div&gt;</code>

NO ARIA is better than bad ARIA!

Focus Management and Visible Indicators

Focusable elements (

a

,

button

,

input

,

select

, etc.) receive keyboard focus automatically. Non‑focusable elements can be made focusable with

tabindex="0"

. Always provide a visible focus style (outline, border, or box‑shadow) so keyboard users know where they are.

<code>*:focus {
  outline: 2px solid #005fcc;
}</code>

Color Contrast and Not Relying Solely on Color

Text must have a contrast ratio of at least 4.5:1 (AA) against its background; large text can be 3:1. Use tools like WebAIM Contrast Checker or Chrome’s DevTools to verify. Do not convey meaning only with color—add icons or text for error states, success messages, etc.

Testing Tools

Automated tools (axe, Wave, Lighthouse, pa11y, eslint‑plugin‑jsx‑a11y) catch many issues early. Use Chrome extensions or the built‑in Lighthouse audit to get actionable recommendations.

Complex Interactive Components

Modals, tabs, alerts, and custom widgets need ARIA attributes to describe relationships. Example for a modal:

<code>Array.from(document.querySelector('#module-container').children).forEach(el => {
  if (el !== popup) {
    el.setAttribute('aria-hidden', 'true');
  }
});</code>

Tabs should use

role="tablist"

, each tab gets

id

,

aria-selected

, and

aria-controls

linking to the panel with matching

id

and

aria-labelledby

.

Game Canvas Accessibility

When a canvas is used, expose interactive objects via hidden DOM elements with ARIA roles (e.g.,

role="button"

,

tabindex="-1"

, and a descriptive

hint

). The EVA plugin

@ali/eva-plugin-a11y

automates this for games built with EVA JS.

<code>gameObject.addComponent(
  new A11y({
    interactive: true,
    hint: 'My cat, tap to pet',
    role: 'button',
    tabindex: '-1'
  })
);</code>

Continuous Improvement

Accessibility is an ongoing process. Regular audits, staying up‑to‑date with WCAG and ARIA specifications, and integrating accessibility checks into the development workflow ensure that products remain inclusive over time.

Your effort will bring happiness to others!