IQSS / IQSS/dataverse-frontend
Feature Request/Idea: Accessibility improvements compared to the "old" front-end.
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 31
- Forks
- 26
- Avg merge
- 4d 13h
- Merged PRs (30d)
- 4
Description
Overview of the Feature Request
We are using Dataverse at a Dutch national institute. As such, we are required to (do our best) to ensure digital accessibility of our dataverse instance. An internal audit following the WCAG guidelines has shown that several parts of the "old" dataverse interface aren't fully compliant yet (https://www.toegankelijkheidsverklaring.nl/register/27503). I'd like to relay these findings to you, hoping that they will be improved upon in the new front-end you are working on.
The full list can be found at https://www.rivm.nl/sites/default/files/2025-07/Toegankelijkheidsonderzoek-apollo.rivm_.nl-intranet-WCAG-2.1-AA-17-juni-2025_0.pdf, and a translation is available below (AI translated and human curated).
What kind of user is the feature intended for?
Any user of the frontend, but mostly users with some need for additional accessibility features.
What inspired the request?
An accessibility audit of our dataverse instance. The running version was v6.3 at the time of the audit, and has been updated to v6.6 since.
What existing behavior do you want changed?
See the table below.
Any brand-new behavior do you want to add to Dataverse?
No
Any open or closed issues related to this feature request?
A quick search did not show any issues related to accessibility here, although I doubt there aren't any. Perhaps an issue label could help?
Table with accessibility issues
| WCAG SC-code | Severity | URL | Finding | Recommendation | ||
|---|---|---|---|---|---|---|
| 1.1.1 | Low | https://www.mydataverse.com/dataset.xhtml?persistentId=doi%3A10.5072%2FFK2%2FXC9TJM&version=DRAFT | On the "Metadata" tab, input fields appear when "Add + Edit Metadata" is activated. Asterisks marking required fields are informative but have no alternative text describing their function. | Code the asterisks accessibly (e.g., an with alt text "Required field") or convey the information programmatically using aria ‘required="true"'. | ||
| 1.1.1 | Low | https://www.mydataverse.com/dataset.xhtml?persistentId=doi%3A10.5072%2FFK2%2FXC9TJM&version=DRAFT | Under "License/Data Use Agreement" and the "Terms" tab, the Creative Commons badge has the same accessible name as the adjacent link and does not describe the badge 's content. | Give the image a meaningful alternative text, e.g., "Creative Commons badge: Attribution (BY)", using the alt attribute. | ||
| 1.1.1 | Low | https://www.mydataverse.com/ | Logo's of dataverses are shown as images in featured dataverse carroussel, above the search results, and sometimes in a search result (of that dataverse). These images have tekst alternatives ("[name of the dataverse] logo"). However, these images aren't true images but decorative icons, and should not have text alternatives. | Leave the alternative text empty so assistive technologies can ignore decorative images. | ||
| 1.1.1 | Low | https://www.mydataverse.com/ | In the "Share" dialog, linked social media icons have no descriptive alternative text. | Add a descriptive text alternative (e.g., via aria label) that states the link 's purpose, such as "Share Dataverse on Facebook". | ||
| 1.3.1 | Low | https://www.mydataverse.com/ | Several texts visually act as headings but are not coded as such (e.g., "[dataverse name]", filter labels, search result titles). | Mark such text with proper heading elements and maintain correct heading hierarchy. | ||
| 1.3.1 | Low | https://www.mydataverse.com/ | In the filter menu, the "More ..." link is nested inside a table, creating unnecessary structural announcements for screen readers. | Place the link outside of a table so assistive technology does not announce redundant table structure. | ||
| 1.3.1 | Medium | https://www.mydataverse.com/ | In the "Contact" dialog, required fields are indicated with an asterisk but this is not explained in text. | Add visible text explaining that fields marked with * are required. | ||
| 1.3.1 | Medium | https://www.mydataverse.com//dataverse/RIVM/search | Checkbox groups (e.g., "Subject") are not programmatically associated with their group labels. A similar problem occurs on the dataset page, for example in the Author field. | Wrap related checkboxes in a | and use | for the group label. |
| 1.3.1 | Advisory | https://www.mydataverse.com/ | Apart from an | heading, pages lack additional headings to communicate structure. | Add meaningful headings for content sections and ensure they're coded with the correct heading level. | |
| 1.3.5 | Low | https://www.mydataverse.com/loginpage.xhtml | Login and account information fields lack appropriate autocomplete attributes. The same goes for the "Given name"and "Family name" and "Email" fields in the dataverseuser page. | Add correct autocomplete attributes so browsers and assistive tech can assist. See W3C guidance on input purposes: https://www.w3.org/Translations/WCAG21-nl/#input-purposes. | ||
| 1.4.1 | Medium | https://www.mydataverse.com/editdatafiles.xhtml?datasetId=21&mode=UPLOAD | Inline link "see the guides" is distinguished only by colour (blue vs. grey) and is not underlined. | Inline links must be blue and underlined. | ||
| 1.4.10 | Medium | https://www.mydataverse.com/dataverseuser.xhtml | At 320 CSS px width, elements overlap making content unreadable. | Ensure content can reflow to 320 CSS px (400 % zoom at 1280 px) without loss of information. | ||
| 1.4.10 | Medium | https://www.mydataverse.com/ | At 400 % zoom (1280 px viewport) the main navigation collapses into a hamburger menu, but the last item is off screen and cannot be scrolled into view. | Ensure all content and functionality are available at 400 % zoom. | ||
| 1.4.10 | Low | https://www.mydataverse.com/ | At 320 CSS px width the text "Metrics" partially disappears inside a light grey box. | Ensure all elements scale correctly down to 320 CSS px. | ||
| 1.4.11 | Medium | https://www.mydataverse.com//dataverse/RIVM/search | Input field borders have 1.6 : 1 contrast and checkbox borders 2 : 1: both below 3 : 1 requirement. (we have changed some colours, so this might be partially our own fault) | Increase border contrast to at least 3 : 1. | ||
| 1.4.11 | Low | https://www.mydataverse.com/ | Carousel arrow icons have 2.8 : 1 contrast against white background (below 3 : 1). (we have changed some colours, so this might be partially our own fault) | Increase contrast to at least 3 : 1. | ||
| 1.4.13 | Low | https://www.mydataverse.com/dataverseuser.xhtml | Tooltip content ("Remove Notification") for the 'x' icons cannot be dismissed without moving pointer/focus; This content does not comply with "dismissable" and "hoverable". | Allow tooltip to be dismissed with Escape and remain visible while pointer/focus is over it. | ||
| 1.4.13 | Low | https://www.mydataverse.com//dataverse/RIVM/search | Question mark tooltips and other hover content do not meet 'dismissible ' and 'hoverable ' requirements. | Same as above: make hover/focus content dismissible and hover stable. | ||
| 1.4.3 | Low | https://www.mydataverse.com/dataset.xhtml?persistentId=doi%3A10.5072%2FFK2%2FXC9TJM&version=DRAFT | Light grey placeholder tekst in tekst boxes when editing metadata has 2.8 : 1 contrast against white. | Increase text contrast to at least 4.5 : 1 and keep placeholder instructions visible. | ||
| 1.4.3 | Low | https://www.mydataverse.com/ | On small screens the "Filter results" button has white text on light grey background (1.3 : 1). | Raise contrast to at least 4.5 : 1. | ||
| 2.1.1 | High | https://www.mydataverse.com/editdatafiles.xhtml?datasetId=21&mode=UPLOAD | Collapsible content block cannot be reached or toggled with keyboard. | Make the panel header a focusable button/link and follow ARIA accordion pattern. | ||
| 2.1.1 | High | https://www.mydataverse.com/dataverseuser.xhtml | In "My data" tab the "Find" button is not keyboard focusable or operable. | Ensure the button can receive focus and be activated with the keyboard. | ||
| 2.1.1 | Medium | https://www.mydataverse.com/dataset.xhtml?persistentId=doi%3A10.5072%2FFK2%2FXC9TJM&version=DRAFT | Question mark icons (tooltips) are not reachable via keyboard. | Make icons focusable; show tooltip on focus. | ||
| 2.1.1 | High | https://www.mydataverse.com//dataverse/RIVM/search | Checkboxes in advanced search are focusable but cannot be toggled via keyboard. | Use native HTML | elements or ensure custom checkboxes respond to Space/Enter. | |
| 2.4.1 | Medium | https://www.mydataverse.com/ | The "Skip-link" receives focus but is not visible. | Reveal skip link styling when it receives focus. | ||
| 2.4.2 | Medium | https://www.mydataverse.com/ | Page title "[dataverse name]" is not descriptive enough. In our case, our root dataverse is called RIVM, which results in a page title "RIVM". However, the user probably expects this title to correspond to the main website of our institute, rather than the root dataverse of the institute. | Make the page title corresponding to the dataverses configurable in dataverse. Either on a dataverse basis, or by allowing the admin to set a prefix for the dataverse instance globally. | Also use descriptive titles like "Advanced Search | [Dataverse name]" and adopt consistent format. Preferably separate parts of the title with "|" and not with "-" because the latter might not be understood as a separation by the screenreader software, but rather as a minus sign. | |
| 2.4.3 | Low | https://www.mydataverse.com/ | Submenus of the header menu stay expanded and focus moves on after going through all sub-items. Because focus does not return to the expanded menu item, logical order for the focus is broken. | Either return focus to the trigger before moving on, or close submenu automatically. | ||
| 2.4.3 | High | https://www.mydataverse.com/ | Activating "Share" opens modal but focus remains on underlying page. | Move focus into the modal and trap it until the modal is closed. | ||
| 2.4.3 | Medium | https://www.mydataverse.com//dataset.xhtml?persistentId=perma:10.5072/ff4bbf90-3a40-444f-8480-d57463e1303e | Focus must traverse the entire page to return to tabs after reading tab content. | Use appropriate tab panel focus management so focus moves tab panel next tab. | ||
| 2.4.3 | Medium | https://www.mydataverse.com/ | When zoomed, focus lands on off screen filter items before the visible "Filter results" button. | Place the button earlier in DOM and prevent focus from reaching off screen content. | ||
| 2.4.4 | Low | https://www.mydataverse.com/ | Hidden links titled "Show collections" behind filter checkboxes are redundant and unclear. | Remove the hidden redundant links. | ||
| 2.4.4 | Medium | https://www.mydataverse.com/ | Filter links are not clearly identified as filters to assistive tech. | Add context, e.g., heading "Filter search results". | ||
| 2.4.4 | Low | https://www.mydataverse.com/ | Pagination links contain only the number, it is unclear for screenreaders that these are search result page numbers | Include hidden text like "Page 2" or a title attribute. | ||
| 2.4.4 | Low | https://www.mydataverse.com/ | Featured dataverse carousel links "[dataverse name] logo [dataverse name]" are unclear. | Make link text "[dataverse name] Dataverse" and remove redundant. | ||
| 2.4.4 | Medium | https://www.mydataverse.com/dataset.xhtml?persistentId=doi:10.5072/FK2/XC9TJM&version=DRAFT | "+" and "-" links for adding/removing fields are non descriptive. | Add descriptive titles like "Add extra input field Alternative Title". | ||
| 2.4.4 | Low | https://www.mydataverse.com/ | Social media share icons lack descriptive alt text. | Use aria labels like "Share Dataverse on Facebook". | ||
| 2.4.6 | Low | https://www.mydataverse.com//dataverse/RIVM/search | Heading [dataverse name] is reused on many pages and is not descriptive. | Give each page a unique, meaningful heading; avoid unnecessary links in h1. | ||
| 2.4.7 | Medium | https://www.mydataverse.com/ | Skip link lacks any visible focus indicator. | Display both link text and focus outline on focus. | ||
| 2.4.7 | Low | https://www.mydataverse.com/ | Focus indicator missing on skip link, (expandable) menu items, and open tabs. | Ensure a visible focus ring (3 : 1 contrast) on all interactive elements. | ||
| 2.5.3 | Medium | https://www.mydataverse.com/dataset.xhtml?persistentId=doi:10.5072/FK2/XC9TJM&version=DRAFT | Accessible names "Additional Entry" do not match visible labels like "Title" for metadata fields. | Remove or rewrite aria labels so they match visible labels. | ||
| 2.5.3 | Medium | https://www.mydataverse.com/ | Search filters show text like "Datasets (10)" but have accessible names "Show Data Projects". | Include the visible text in aria label, e.g., "Filter by Datasets (10)". | ||
| 3.2.2 | Medium | https://www.mydataverse.com/ | Selecting a filter facet immediately submits and reloads the page, moving focus to the top. | Either inform users beforehand or apply filters after clicking an explicit "Apply" button. | ||
| 3.3.2 | Medium | https://www.mydataverse.com/dataset.xhtml?persistentId=doi%3A10.5072%2FFK2%2FXC9TJM&version=DRAFT | Placeholder text contains format instructions (e.g., "YYYY-MM-DD") which disappear on entry. | Place instructions outside the field and link them programmatically. | ||
| 4.1.2 | Medium | https://www.mydataverse.com/ | Main menu uses | tags without aria-expanded/role information; screen readers can 't detect dropdown menus. | Add proper ARIA roles and states (aria-haspopup, aria-expanded) and ensure items are focusable. | |
| 4.1.2 | High | https://www.mydataverse.com//dataverse/RIVM/search | Collapsible panels lack semantic role and state, preventing non-pointer operation. | Make the panel heading a button with appropriate aria-controls and aria-expanded. | ||
| 4.1.2 | Medium | https://www.mydataverse.com/ | Top filter checkboxes are wrapped inside links, so their checkbox role is hidden from assistive tech. | Remove the unnecessary | wrapper so the native checkbox role is exposed. | |
| 4.1.3 | Medium | https://www.mydataverse.com/loginpage.xhtml | Error message after failed login is a status message. It cannot be determined programmatically that this is the case. | Use "aria-live" and "role" attributes to indicate error messages. Zie voor meer informatie over deze techniek de Engelstalige pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19. |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue provides a WCAG audit table covering the new Dataverse frontend, but names no source files, tests, or specific entry points. Start by grouping the listed findings by frontend area and locating the corresponding components; done means the applicable accessibility findings are addressed and verified against the WCAG recommendations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100