WCAG AA accessibility for an autism foundation in Aragón.

Context

Fundación a·Autismo was created from the union of three leading Aragonese autism organisations —ATADES, Autismo Huesca and Autismo Teruel— to represent the families and people with ASD of Zaragoza, Huesca and Teruel with a single voice. For an organisation like this, the accessibility of its website is not a box to tick: it is consistency with its mission, because part of its audience is neurodivergent or has low vision.

The problem

The brief was to redesign the institutional website with WCAG 2.1 AA accessibility as the backbone of the project —not as a final layer—, on top of an already-defined brand system, with one firm condition: the foundation's team had to be able to edit and publish on their own, without depending on development for every change.

The decision

Three decisions shaped the architecture:

• Native conformance, not an overlay. Off-the-shelf accessibility widgets (UserWay, One Click Accessibility and the like) were ruled out: they layer third-party JavaScript that does not fix the underlying markup and that the accessibility community itself advises against. Instead, conformance was built into the theme's own HTML and CSS —a single <h1>, a bespoke skip-link, visible focus, measured contrast— with the user controls in a first-party plugin, with no external dependencies.
• A block theme (FSE) for editorial autonomy. The client edits with the WordPress Site Editor; the theme is "locked" to its default values so that this freedom cannot break contrast or heading hierarchy.
• Accessibility and components extracted into companion plugins, so they survive a possible theme change. The typeface is Atkinson Hyperlegible —designed for low vision— self-hosted, with no Google Fonts.

A trade-off taken on consciously and documented: two brand colours sit right at the contrast threshold for large text; they are kept by brand decision and left under monitoring.

The implementation

The accessibility toolbar offers five controls: text scaling in four steps, a contrast/colour-blind mode, link highlighting, a dyslexia-friendly typeface and reduced motion (which also respects prefers-reduced-motion). The state is stored in the browser and applied before the first paint to avoid flicker, with ARIA states on every control.

The same standard was applied to everything else: a first-party cookie banner, granular and GDPR/AEPD-compliant, with "Accept" and "Reject" given the same visual weight (no dark patterns) and YouTube videos served cookie-free; and an accessible contact form —labels, status and error messages that receive focus— protected with a nonce and a honeypot, with no third-party services.

The result

An internal audit of the live website verifies WCAG 2.1 AA conformance across the templates evaluated, with Lighthouse accessibility scores of 96–97 and 100 in best practices and SEO. Performance follows suit: LCP of 639 ms and CLS of 0 in the lab, with every contrast ratio measured element by element. The verification is a technical review by the development team, not a certification by an independent third party; screen-reader testing is planned as a closing step.

FAQ

Why not use an off-the-shelf accessibility widget? Overlays layer third-party JavaScript but do not fix the real markup; effective accessibility —and WCAG conformance— lives in the HTML, the contrast and focus management, not in an added layer. That is why it was built bespoke.

What does "WCAG 2.1 AA" mean? It is the reference conformance level of the Web Content Accessibility Guidelines: it covers sufficient contrast, resizable text, keyboard navigation, visible focus and text alternatives, among others.

Can a WordPress site that the client edits be made accessible? Yes, if the theme is designed to "lock" its default values so that editing cannot break contrast or hierarchy — which is exactly this project's approach.