Web accessibility best practices

Colour contrast (WCAG 1.4.3)

Minimum ratio: 4.5:1 for normal text, 3:1 for large text and interface components. Formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one.

Example: light grey #CCCCCC on white #FFFFFF gives about 1.6:1, failing AA. Violet #8B5CF6 on white reaches only 4.2:1; #6D28D9 reaches 7.1:1.

Effective text alternatives

Write concise, contextual descriptions. Decorative image: alt="". Chart: describe key data and provide a table or supporting text. Linked image: the alternative describes the destination.

ARIA in moderation

Enrich semantics without overdoing it: aria-label for a button without text, role="alert" for notifications, aria-expanded for accordions. See the ARIA guide.

WCAG 2.2: operability and help

Note in particular 2.5.7 (dragging with alternative), 3.2.6 (consistent help), 3.3.7 (redundant entry) and 2.5.8 (24 px target). Details on the WCAG 2.2 page.

Accessibility, SEO and Core Web Vitals

An accessible page is often easier for search engines and generative assistants to index and understand: ordered headings, text alternatives, explicit links, declared language, valid HTML.

• Core Web Vitals: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 (Google’s “good” thresholds).
• Reserve image dimensions to avoid layout shifts.
• Limit JavaScript: less code also means fewer risks for assistive technologies.
• Apply the Opquast checklist for overall quality (accessibility, performance, eco-design, security).

Certifications and legal frameworks

• IAAP: professional accessibility certifications (CPACC, WAS).
• Opquast: web quality certification, including accessibility.
• Section 508: US accessibility requirements for federal agencies.
• EAA (Directive 2019/882): applicable since 28 June 2025 to certain products and services.

Frequently asked questions