Practical Accessibility Guides

Introduction

Implementing WCAG 2.1 AA compliance requires a systematic approach across multiple aspects of web development. This checklist covers the essential success criteria with practical implementation guidance for developers.

Semantic HTML Structure

Proper semantic structure is the foundation of accessibility:

• Use appropriate HTML5 semantic elements (header, nav, main, section, article, footer)
• Implement proper heading hierarchy (h1-h6) without skipping levels
• Use native HTML elements whenever possible before custom widgets
• Ensure landmarks have appropriate labels when multiple instances exist

Keyboard Accessibility

All interactive elements must be accessible via keyboard:

• Ensure all interactive elements can be reached and operated using Tab, Enter, Space, and arrow keys
• Maintain a logical tab order that follows visual presentation
• Implement focus management for components like modals, menus, and tabs
• Provide visible focus indicators for all interactive elements
• Avoid keyboard traps except in specific circumstances like modal dialogs (which must have keyboard escape mechanisms)

Forms and Input

Forms must be accessible to all users:

• Associate labels with form controls using for and id attributes
• Group related controls with fieldset and legend
• Provide clear error messages that identify the error and suggest corrections
• Allow form validation errors to be reviewed and corrected
• Implement accessible autocomplete and suggestion patterns

Images and Media

Non-text content requires text alternatives:

• Provide alternative text for all meaningful images
• Use empty alt attributes (alt="") for decorative images
• Include captions and transcripts for audio and video content
• Ensure media controls are keyboard accessible and properly labeled
• Do not rely solely on color to convey information

ARIA Implementation

When native HTML is insufficient, use ARIA carefully:

• Follow the first rule of ARIA: "Don't use ARIA if a native HTML element exists"
• Ensure ARIA attributes are correctly paired (e.g., aria-expanded with toggled content)
• Implement appropriate ARIA landmarks and labels
• Test ARIA implementations with actual screen readers

Color and Contrast

Visual presentation must be perceivable by all users:

• Maintain 4.5:1 contrast ratio for normal text and 3:1 for large text
• Ensure 3:1 contrast for UI components and graphical objects
• Do not rely solely on color to convey meaning (use additional indicators)
• Test color combinations for common forms of color blindness

Mobile and Responsive Accessibility

Ensure accessibility across devices:

• Implement proper touch target sizes (at least 44×44 pixels)
• Support both portrait and landscape orientations
• Ensure content remains accessible when zoomed to 200%
• Test with actual mobile screen readers (VoiceOver, TalkBack)

Testing Checklist

Verify implementation with these testing steps:

• Run automated tests using axe, WAVE, or Lighthouse
• Test keyboard navigation through entire interface
• Check with screen readers (NVDA, JAWS, VoiceOver)
• Validate HTML to ensure proper structure
• Test at different zoom levels (up to 200%)
• Verify performance on mobile devices

Specific Irish Requirements

For Irish websites, particularly public sector sites:

• Include accessibility statement that meets EU requirements
• Document known accessibility issues and remediation timelines
• Provide feedback mechanisms for reporting accessibility problems