Website Accessibility Checklist for Irish Companies

WCAG (Web Content Accessibility Guidelines)

WCAG 2.1 and 2.2 define international best practices for accessibility. Most companies aim for Level AA compliance, which covers most real-world accessibility needs.

ARIA (Accessible Rich Internet Applications)

ARIA attributes such as aria-label, aria-hidden, and aria-describedby make interactive or dynamic elements (like dropdowns or modals) understandable to assistive tools.

Semantic HTML and Landmarks

Using proper HTML tags like <header>, <nav>, <main>, and <footer> helps both screen readers and Google understand your content hierarchy.

1. Page Structure and Headings

• Use headings in order: h1 for main title, h2 for major sections, and so on. Avoid skipping levels.
• Add clear page landmarks using <header>, <nav>, <main>, and <footer>.
• Include a “Skip to main content” link for keyboard users.
• Use meaningful link text, not just “Click here”.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

2. Text and Readability

• Ensure a minimum contrast ratio of 4.5:1 for normal text.
• Use relative units (em or rem) for text sizes so users can resize them easily.
• Choose legible fonts and use enough spacing (line-height between 1.4 and 1.6).
• Keep paragraphs short and scannable for easy reading.

3. Images and Media

• Provide descriptive alt text for all meaningful images.
• Use alt="" (empty) for decorative images to skip them in screen readers.
• Add captions or transcripts for videos and audio clips.
• Do not auto-play media; give users full control to play or pause.

4. Keyboard Navigation and Focus

• Every interactive element must be usable with keyboard only (Tab, Enter, Space).
• Ensure visible focus styles so users can see where they are on the page.
• Maintain a logical tab order that follows your visual layout.
• Use ARIA attributes like aria-expanded and aria-hidden for dropdowns and modals.

<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" aria-hidden="true">Menu links here</div>

5. Forms and Inputs

• Each input must have a clear label connected via for and id.
• Don’t rely only on placeholders; they disappear once users type.
• Provide clear, friendly error messages and validation hints.
• Use <fieldset> and <legend> for groups of radio buttons or checkboxes.

<label for="email">Email address</label>
<input id="email" type="email" aria-describedby="emailHelp">
<span id="emailHelp">We’ll never share your email with anyone.</span>

6. Navigation and Menus

• Ensure menus are fully keyboard-accessible.
• Use role="navigation" and aria-label for clarity.
• Provide breadcrumbs for multi-page websites.
• Include a clearly labelled search box for large content sites.

7. Dynamic and Interactive Content

• Use aria-live for dynamically updated content.
• Allow users to pause animations or slideshows.
• Provide keyboard support for carousels (next, previous, pause buttons).
• Avoid flashing animations that may trigger discomfort.

8. Colour and Contrast

• Ensure proper contrast ratios — 4.5:1 for body text, 3:1 for large text.
• Don’t rely solely on colour to show meaning (e.g., use text or icons for errors).
• Test how your design looks for colour-blind users using online simulators.

9. Mobile Accessibility

• Use responsive layouts that adapt smoothly to smaller screens.
• Keep touch targets large enough (at least 44x44 pixels).
• Don’t disable zoom or pinch gestures.
• Ensure your mobile menu has proper labels and is keyboard-accessible.

10. Testing and Validation

• Use tools like Lighthouse, WAVE, and Axe for quick automated audits.
• Test your site using screen readers such as NVDA or VoiceOver.
• Navigate your site using only a keyboard to check tab order and focus.
• Get real feedback from users with accessibility needs if possible.