Frontend & Theming - Accessibility Basics (WCAG / Section 508)

By saroj 5 March, 2026 Difficulty: Intermediate

Accessibility ensures that websites and digital systems can be used by people with disabilities, including those who rely on assistive technologies such as screen readers, keyboard navigation, and alternative input devices. In Drupal 10 and 11, accessibility is not an optional enhancement — it is a core requirement, especially for government and enterprise platforms. Drupal core itself is built with accessibility standards in mind and follows WCAG (Web Content Accessibility Guidelines) and Section 508 compliance principles. For frontend developers, accessibility means building semantic markup, ensuring keyboard operability, providing proper ARIA attributes when needed, and designing interfaces that are perceivable, operable, understandable, and robust.

1. Core Accessibility Standards

Drupal accessibility work generally follows:

  • WCAG 2.1 / 2.2 (Web Content Accessibility Guidelines)
  • Section 508 (U.S. federal accessibility requirement)

WCAG is built on four main principles.

POUR Model

  1. Perceivable – Users must be able to perceive information
  2. Operable – Users must be able to interact with the interface
  3. Understandable – Content and interactions must be clear
  4. Robust – Content must work across assistive technologies

2. Semantic HTML (Most Important Rule)

Accessibility starts with correct HTML structure.

Correct:

<nav>
<ul>
<li><a href="/about">About</a></li>
</ul>
</nav>

Avoid using generic containers when semantic elements exist.

Bad example:

<div class="nav">
<div>About</div>
</div>

Semantic HTML improves:

  • Screen reader interpretation
  • Keyboard navigation
  • Search engine understanding

3. Accessible Images

All images must include descriptive alt text.

Example:

<img src="team.jpg" alt="Team members collaborating in an office meeting" />

Decorative images should use empty alt attributes.

<img src="decorative-divider.png" alt="" />

In Drupal:

Image fields enforce alt text by default.

4. Proper Heading Hierarchy

Headings must follow logical order.

Correct:

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Incorrect:

<h1>Main Title</h1>
<h4>Subsection</h4>

Headings help screen readers navigate content quickly.

5. Keyboard Accessibility

All interactive elements must be usable with a keyboard.

Users should be able to:

  • Tab through links
  • Activate buttons with Enter/Space
  • Navigate menus without a mouse

Avoid clickable elements like this:

<div onclick="doSomething()">Click me</div>

Use:

<button>Click me</button>

6. Focus Management

When users navigate using keyboard, focus must be visible.

Example CSS:

:focus {
  outline: 2px solid #005fcc;
}

Never remove focus styles without replacing them.

Bad practice:

outline: none;

7. ARIA (Accessible Rich Internet Applications)

ARIA helps describe complex UI interactions.

Example:

<button aria-expanded="false" aria-controls="menu">
Menu
</button>

Rules for ARIA:

  • Use semantic HTML first
  • Use ARIA only when necessary
  • Incorrect ARIA can make accessibility worse

8. Accessible Forms

Forms must include:

  • Labels
  • Error messages
  • Field descriptions

Correct:

<label for="email">Email</label>
<input id="email" type="email" />

Drupal Webforms handle many accessibility features automatically.

9. Color Contrast

Text must meet contrast ratios.

WCAG minimum:

  • Normal text: 4.5:1
  • Large text: 3:1

Tools to test contrast:

  • WebAIM Contrast Checker
  • Lighthouse

Avoid light gray text on white backgrounds.

10. Skip Links

Skip links allow keyboard users to bypass navigation.

Example:

<a class="skip-link" href="#main-content">Skip to main content</a>

Drupal core includes skip link functionality in many themes.

11. Testing Accessibility

Accessibility should be tested regularly.

Common tools:

  • ANDI (used by government testing)
  • Lighthouse accessibility audit
  • axe DevTools
  • Wave Accessibility Tool

Manual testing is also essential:

  • Keyboard navigation
  • Screen reader testing

12. Accessibility in Drupal Theming

Frontend developers must ensure:

  • Twig templates use semantic HTML
  • Images have alt attributes
  • Forms have labels
  • Components maintain heading hierarchy
  • JavaScript interactions remain accessible

Accessibility must be built into components — not added later.

Common Accessibility Mistakes

  • Missing alt text
  • Skipping heading levels
  • Removing focus outlines
  • Using clickable divs instead of buttons
  • Low contrast text

Interview Questions (Frontend Drupal)

1. What does WCAG stand for?

Expected Answer:
Web Content Accessibility Guidelines.

2. What are the four WCAG principles?

Expected Answer:
Perceivable, Operable, Understandable, Robust (POUR).

3. Why is semantic HTML important for accessibility?

Expected Answer:
Because screen readers rely on semantic structure to interpret page content.

4. When should ARIA attributes be used?

Expected Answer:
Only when semantic HTML cannot provide the necessary accessibility information.

5. Why are skip links important?

Expected Answer:
They allow keyboard and screen reader users to bypass repetitive navigation.

6. What tools can be used to test accessibility?

Expected Answer:
ANDI, Lighthouse, axe DevTools, Wave, and manual keyboard testing.