unitoo/website
1
0
Fork 1
Code Issues 1 Pull requests Packages 1 Activity

feat(a11y): WCAG 2.1 AA / EN 301 549 accessibility remediation #65

Merged
claudiomaradonna merged 3 commits from feat/wcag-aa-accessibility into master 2026-05-30 15:33:37 +02:00
Conversation 0 Commits 3 Files changed 15 +190 -53
claudiomaradonna commented 2026-05-30 15:33:18 +02:00
Collaborator
Copy link

The site had no skip-link, suppressed focus outlines on interactive elements, used fla
g emoji as the sole language-switcher affordance, and linked external content without
screen-reader notice or rel=noopener — enough combined failures to block WCAG 2.1 AA
conformance.

This remediation addresses the full set. A dedicated $brand-color-accessible token (
#8f5200, ~6.2:1 on white) replaces the previous brand amber for all link and interacti
ve text, satisfying the 4.5:1 minimum. A skip-link component (WCAG 2.4.1) is wired int
o both layouts and rendered off-screen until focused. Scroll animations and card hover
transitions are wrapped in prefers-reduced-motion (WCAG 2.3.3). Every layout, heade
r, sidebar, footer, and contact include gains correct aria-hidden on decorative icon
s, aria-label on icon-only controls, role=region / aria-live=polite on the live-
search region, and rel=noopener plus visually-hidden new-tab notices on all target= _blank links. The html element now correctly derives its lang attribute from sit e.lang with a site.locale fallback. Language-switcher links carry matching lang a
nd hreflang attributes.

A new bilingual accessibility statement (/dichiarazione-accessibilita/ / /accessibi lity-statement/) documents partial-conformance status, known residual limitations, th
e feedback contact, and the self-assessment date. All user-visible strings are in en. yml / it.yml so the page inherits the standard i18n pipeline.

The site had no skip-link, suppressed focus outlines on interactive elements, used fla g emoji as the sole language-switcher affordance, and linked external content without screen-reader notice or `rel=noopener` — enough combined failures to block WCAG 2.1 AA conformance. This remediation addresses the full set. A dedicated `$brand-color-accessible` token ( #8f5200, ~6.2:1 on white) replaces the previous brand amber for all link and interacti ve text, satisfying the 4.5:1 minimum. A skip-link component (WCAG 2.4.1) is wired int o both layouts and rendered off-screen until focused. Scroll animations and card hover transitions are wrapped in `prefers-reduced-motion` (WCAG 2.3.3). Every layout, heade r, sidebar, footer, and contact include gains correct `aria-hidden` on decorative icon s, `aria-label` on icon-only controls, `role=region` / `aria-live=polite` on the live- search region, and `rel=noopener` plus visually-hidden new-tab notices on all `target= _blank` links. The `html` element now correctly derives its `lang` attribute from `sit e.lang` with a `site.locale` fallback. Language-switcher links carry matching `lang` a nd `hreflang` attributes. A new bilingual accessibility statement (`/dichiarazione-accessibilita/` / `/accessibi lity-statement/`) documents partial-conformance status, known residual limitations, th e feedback contact, and the self-assessment date. All user-visible strings are in `en. yml` / `it.yml` so the page inherits the standard i18n pipeline.
Establish $brand-color-accessible (#8f5200, ~6.2:1 on white) as a WCAG AA
contrast-safe token for link and interactive text. Wire it into _base.scss
for the global link color and into _layout.scss for the skip-link component.

Add the .skip-link rule (WCAG 2.4.1 bypass blocks) that renders off-screen
until focused, then appears fixed at the top of the viewport.

Wrap scroll-behavior and card hover box-shadow transitions in
prefers-reduced-motion: no-preference to satisfy WCAG 2.3.3 / EN 301 549.

Remove outline: 0 on social-button anchors — this suppression prevented
visible keyboard focus indicators (WCAG 2.4.7).
Add bilingual (it/en) translation keys needed by the accessibility
remediation before templates consume them, so the i18n layer is always
ahead of its callers:

  buttons.skip_to_content       — skip-link label
  buttons.switch_to_en/it       — visible lang-switcher text
  buttons.new_tab               — screen-reader notice for target=_blank links
  buttons.accessibility         — footer link label
  inputs.search_results         — aria-label for the live search region
  meta.titles.accessibility     — page <title>
  meta.descriptions.accessibility — <meta name=description>
  accessibility.*               — full accessibility statement body copy
Layouts (default.html, simple.html):
  - Fix lang attribute to use site.lang with site.locale fallback, ensuring
    the html element correctly declares the page language for screen readers.
  - Insert skip-link anchor before sidebar/header (WCAG 2.4.1).
  - Add id="main-content" to <main> as the skip-link target (WCAG 2.4.1).

Header / sidebar (header.html, sidebar.html):
  - Wrap flag emoji in aria-hidden span; add visible text label and correct
    hreflang + lang attributes to the language-switcher links (WCAG 1.3.1,
    3.1.2, 2.4.4).
  - Add aria-hidden to decorative search icon.
  - Add role=region, aria-live=polite, aria-label to the live search results
    container (WCAG 4.1.3).

Footer (footer.html):
  - Add noopener to every target=_blank link (security + WCAG best practice).
  - Add aria-hidden to decorative icons already covered by aria-label.
  - Add visually-hidden new-tab notices on the source-code link.
  - Add accessibility statement link alongside privacy-policy link.

Contact includes (contact-cta.html, contacts.html):
  - Add noopener and visually-hidden new-tab notices to all external CTAs.
  - Add aria-hidden to decorative icons.

Pages (about-us.html, news.html):
  - Replace title-only icon links with aria-label equivalents and aria-hidden
    icons; add noopener to all target=_blank social links.
  - Add noopener + new-tab notice to Telegram CTA.

New page (src/_pages/accessibility.html):
  - Jekyll page with layout=default rendering the accessibility.* i18n section.
  - Bilingual (it: /dichiarazione-accessibilita/, en: /accessibility-statement/).
  - Documents WCAG 2.1 AA partial-conformance status, known limitations,
    feedback contact, and self-assessment preparation date (2025-05-30).
claudiomaradonna deleted branch feat/wcag-aa-accessibility 2026-05-30 15:33:41 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
unitoo/website!65
No description provided.