Frontend Accessibility (a11y) Engineering: From Compliance to User Experience

The Bottom Line: Accessibility Is Not a “Feature Add-on” — It Is a Core Feature

Many teams treat accessibility as a “pre-launch compliance check” — run a tool, fix the errors, done. But true accessibility is not about “zero errors” — it is about “all users can smoothly use your product.”

---

1. Semantic HTML

Why It Matters

Screen readers (NVDA, VoiceOver, TalkBack) determine page structure through HTML tag semantics. Correct semantic tags enable accurate screen reader output.

Common Semantic Tags

<!-- Wrong -->
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- Correct -->
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Other important tags: <article>, <aside>, <section>, <header>, <button> (do not simulate buttons with <div>).

---

2. ARIA Labels

When to Use

Only when native HTML elements cannot express the semantics:

<!-- Custom checkbox: native checkbox is insufficient -->
<div role="checkbox" aria-checked="false" tabindex="0"
     @click="toggle" @keydown.enter="toggle">
  I agree to the terms
</div>

Principles

• Do not overuse ARIA — prefer native HTML elements
• Do not repeat ARIA semantics on native elements (<button> does not need role="button")
• Check before using: is there a native HTML element that can replace this?

---

3. Keyboard Navigation

Focus Management

function openModal(modal) {
  modal.style.display = 'block';
  modal.querySelector('.close-button').focus();
}

function closeModal(triggerButton) {
  modal.style.display = 'none';
  triggerButton.focus();
}

Tab Order

Use tabindex to control focus order, but avoid positive values (they break natural order):

• tabindex="-1": element can be focused via JS, but not via Tab key
• tabindex="0": element follows document order

---

4. Color Contrast

Check Tools

• WebAIM Contrast Checker
• Chrome DevTools Accessibility panel
• axe DevTools browser extension

This Site

All text meets WCAG 2.1 AA standards (normal text ≥ 4.5:1, large text ≥ 3:1).

---

5. Screen Reader Support

<!-- Provide image alt text -->
<img src="logo.webp" alt="AI Enable Harness Logo" />

<!-- Use aria-label for additional description -->
<button aria-label="Close modal">×</button>

<!-- Use aria-live region for dynamic content -->
<div aria-live="polite">
  Loading complete, 10 results found
</div>

---

Summary

Dimension	Key Principle	Common Mistake
Semantic HTML	Use correct tags for structure	All divs
ARIA	Use only when native elements insufficient	Overusing ARIA
Keyboard nav	All features keyboard-operable	Mouse-only support
Color contrast	Text ≥ 4.5:1	Looks good but unreadable
Screen reader	Provide alt text and descriptions	Images without alt attributes

Accessibility is not measured by “zero tool errors” — it is measured by “can visually impaired users complete core tasks smoothly.” A product with good accessibility is better for all users — better semantic HTML also means better SEO and GEO.

Need frontend accessibility optimization or development? Contact us — tell us about your product type and user base, feasibility within 24 hours.