fix(portal): RGAA accessibility fixes from the Open Data EDF audit - #113
Merged
Conversation
The dialogs opened from a dataset or a visualisation page (download, field description, embed code, notifications) had no accessible name: neither aria-label nor aria-labelledby, and their visible title was not linked. Their close button had no label at all. A screen reader announced "dialog" then "button", nothing more. The dialog now takes its name from the title it already receives, and the close button gets one. RGAA 7.1.
…rumbs In the full screen layout the logo shares a fixed height bar with the breadcrumbs. A wide logo — 300px on the portal this was measured on — leaves too little room between the sm and md breakpoints: the end of the trail, including the current page, goes off the window with no way to scroll to it. It also shows up at 200% zoom, which lands in that same range of effective widths. The logo is hidden in that range only. Below sm the breadcrumbs are already hidden, so it gets the bar back. RGAA 10.11 and 10.12.
The personal space pages that only embed a frame had no heading at all: the embedded document starts its own titles at h2, which is right since it is always framed, but nothing carried the h1 of the page. An audit tool looking at the host document sees a page with no heading. They now carry a visually hidden h1, like the full screen views do. The two pages that already had a visible h1 are untouched. RGAA 9.1.
…sibility tree The error page illustrations and the social icons are decoration: the inline svg ones are now aria-hidden, and the configured error image gets an empty alt, which it lacked entirely — an img with no alt attribute at all in the rendered document. RGAA 1.1 and 1.2.
… images VImg mirrors its alt onto the root element next to a role guarded on the same value: with alt="" — the way a decorative image is declared — the root gets an empty aria-label and no role, which W3C rejects. One error per decorative image, twenty of them on a catalogue page. The patch guards aria-label like role already is. Reported upstream as vuetifyjs/vuetify#23111, fix proposed in vuetifyjs/vuetify#23112.
…skip links The personal-space drawer used a bare v-list, so it rendered as div[role=list] > a[role=link] with tabindex=-2 (RGAA 9.3/12.8) and the gabarit carried no skip links (12.7). Reuse the nav-drawer treatment: tag=ul + role removed, each link in an <li> with tabindex=0 and a text-wrap title, and add the skip-links block (content + sidebar navigation). The long 'Gestion de l'organisation' label now uses the default slot instead of the title prop so it wraps instead of truncating under WCAG text spacing (10.12).
… submit The send button was readonly while the form was invalid, so it got tabindex=-1 and was unreachable and unactivable by keyboard, with no disabled state announced (RGAA 7.1). Per the DSFR, a form submit button must not be disabled: keep it active and validate on submit via the native VForm API, which reveals every invalid field so the user can discover what is missing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Accessibility fixes for the portal, from the RGAA re-audit of the Open Data EDF portal. Verified on the pre-production sample (W3C validation + keyboard/screen-reader checks).
aria-hiddenon the error and social SVGs,alt=""on the error images, and a Vuetify patch so a decorativeVImg(alt="") no longer emits the emptyaria-labelW3C rejects (RGAA 1.2 / 8.2, upstream [Bug Report][4.1.9] VImg with an empty alt renders aria-label="" on a div with no role vuetifyjs/vuetify#23111 / #23112)<ul>/<li>list with each link a tab stop (no moretabindex="-2"), skip links added to its layout, and a visually-hidden<h1>on the pages that only embed an iframe (RGAA 9.1 / 9.3 / 12.7)readonlywhile invalid: it stays reachable and validates on submit, revealing the invalid fields (RGAA 7.1, DSFR guidance — a submit button must not be disabled)@data-fair/lib-vuetify2.4.2 +lib-utils1.12.2: drops the emptyaria-labelon the catalogue search combobox and the<div>-inside-<span>of the shared owner-avatar, clearing the last W3C errors of the sampleWhy: close the code-side findings of the Open Data EDF RGAA audit, so the remaining non-conformities are configuration-only (tracked separately).
Heads-up:
layout-personal-navigation.vueis fully restructured to list semantics — worth an eyeball on the personal drawer; verified live on the EDF pre-production and local dev.VImgpatch and thelib-vuetifybump are global — they affect everyVImg/ owner-avatar in the portal, not only the audited pages.