Skip to content

Accessibility from 2026 automated testing #121

@adam3smith

Description

@adam3smith

These are based on automated testing, mostly using Axe and Selenium.
Some of them overlap with existing, still open accessibility issues


stage.qdr.org — Multiple Drupal pages

Tests: test_a11y_registration_form, test_a11y_blog_page

1. Inline links not distinguishable without color

  • Rule: link-in-text-block (axe-core 4.9+)
  • Impact: Serious
  • WCAG: 1.4.1 Use of Color (Level A)
  • Elements:
    • Registration page: <a href="mailto:qdr@syr.edu">contact QDR</a> and
      <a href="/membership">member of QDR</a> in the intro paragraph.
    • Blog page: inline links in blog post body text.
  • Problem: These links are distinguished from surrounding text only by color.
    Users who cannot perceive color differences (color-blind users, or users who
    override colors with a custom stylesheet) cannot identify them as links.
  • Fix: Add an underline or other non-color visual indicator to inline links in
    the Drupal theme CSS, or increase the contrast ratio between link and body text
    beyond the 3:1 minimum required when no other distinguisher is present.
  • Owner: Drupal theme / site template

stage.qdr.org — Main site homepage (authenticated and unauthenticated)

Tests: test_a11y_main_homepage, test_a11y_logged_in_main

1. Search input has no label

  • Rule: label (axe-core)
  • Impact: Critical
  • WCAG: 1.3.1 Info and Relationships (Level A)
  • Element: <input type="text" name="q" placeholder="Search data...">
  • Problem: The search field relies on placeholder text to communicate its
    purpose. Placeholders disappear on input, have low contrast by default, and
    are not reliably announced by all screen readers as a field label.
  • Fix: Add a visible <label for="…"> or, if the design requires a hidden
    label, add aria-label="Search data" to the input element.
  • Owner: Drupal theme / site template
  • Note: The same violation is present in the authenticated state of the page
    (test_a11y_logged_in_main) — the logged-in DOM renders additional nav elements
    but the search input markup is unchanged.

idp.stage.qdr.org — Keycloak SSO login page

Test: test_a11y_keycloak_login

1. aria-invalid has an empty value on login fields

  • Rule: aria-valid-attr-value (axe-core)
  • Impact: Critical
  • WCAG: 4.1.2 Name, Role, Value (Level A)
  • Elements: <input id="username" … aria-invalid=""> and
    <input id="password" … aria-invalid="">
  • Problem: aria-invalid is a boolean ARIA attribute; its only valid values
    are "true" and "false". An empty string is not valid and is treated as
    an error state by some assistive technologies.
  • Fix: Remove aria-invalid from the inputs entirely when the form has not
    been submitted, or set aria-invalid="false". Set aria-invalid="true" only
    after a failed login attempt.
  • Owner: Keycloak IDP login theme

2. "Register" link has insufficient color contrast

  • Rule: color-contrast (axe-core)
  • Impact: Serious
  • WCAG: 1.4.3 Contrast (Minimum) (Level AA)
  • Element: <a href="…/user/register">Register</a> inside "New user? Register"
  • Problem: The link color does not meet the 4.5:1 contrast ratio required for
    normal-weight text at the link's font size.
  • Fix: Increase the contrast of the link color against its background in the
    Keycloak login theme CSS.
  • Owner: Keycloak IDP login theme

data.stage.qdr.org — Dataset view page

Test: test_a11y_dataset_view

1. PrimeFaces TabView tab contains a nested interactive element

  • Rule: nested-interactive (axe-core 4.9+)
  • Impact: Serious
  • WCAG: 4.1.2 Name, Role, Value (Level A)
  • Elements: <li role="tab" aria-expanded="true"> tab headers in the dataset
    page's main PrimeFaces TabView, each containing a nested <a> element.
  • Problem: Same structural issue as the metadata/terms edit panels (see below) —
    the PrimeFaces TabView is present on the dataset view page itself, not only when
    edit forms are open.
  • Fix: Same as the metadata/terms edit form fix (remove or replace the <a>
    inside PrimeFaces tab headers).
  • Owner: Dataverse frontend / PrimeFaces TabView widget

data.stage.qdr.org — New Data Project creation form

Test: test_a11y_new_dataset_form

1. Icon-only action buttons have no discernible text

  • Rule: link-name (axe-core)
  • Impact: Serious
  • WCAG: 2.4.4 Link Purpose (Level A)
  • Elements: Two <a class="ui-commandlink ui-widget btn btn-default"> elements
    in the file-upload section of the new dataset form (JSF IDs
    datasetForm:j_idt…:j_idt627).
  • Problem: These are icon-only action buttons (PrimeFaces file-upload component)
    rendered as <a href="#"> with no text content, no aria-label, and no
    aria-labelledby. Screen readers announce them as "link" with no purpose.
  • Fix: Add aria-label="Upload file" (or equivalent) to each icon button in
    the Dataverse/PrimeFaces file-upload widget template.
  • Owner: Dataverse frontend / PrimeFaces file-upload theme

data.stage.qdr.org — Metadata edit form (AJAX panel)

Test: test_a11y_metadata_edit_form

1. PrimeFaces sentinel inputs focusable inside aria-hidden containers

  • Rule: aria-hidden-focus (axe-core)
  • Impact: Serious
  • WCAG: 4.1.2 Name, Role, Value (Level A)
  • Elements: <input id="datasetForm:tabView:…:unique2_focus" …> — PrimeFaces
    internal focus-management inputs (two instances in the metadata form).
  • Problem: PrimeFaces injects hidden "focus sentinel" inputs to manage keyboard
    focus within composite widgets. These inputs are placed inside containers marked
    aria-hidden="true", but the inputs themselves are focusable (no tabindex="-1"
    or disabled). A screen reader navigating by Tab can land on an element that the
    ARIA tree says doesn't exist.
  • Fix: PrimeFaces should add tabindex="-1" to sentinel inputs, or the
    Dataverse/PrimeFaces theme should override the sentinel CSS to ensure they are
    also aria-hidden at the input level.
  • Owner: Dataverse frontend / PrimeFaces component theme

2. Icon-only action buttons have no discernible text (metadata blocks)

  • Rule: link-name (axe-core)
  • Impact: Serious
  • WCAG: 2.4.4 Link Purpose (Level A)
  • Elements: <a class="ui-commandlink ui-widget btn btn-default"> — icon-only
    action buttons in the Author/Creator and Keyword metadata blocks (JSF IDs
    datasetForm:tabView:j_idt…).
  • Problem: Same structural issue as the new dataset form file-upload buttons —
    PrimeFaces renders action icons as <a href="#"> with no text, aria-label, or
    aria-labelledby.
  • Fix: Add aria-label to each icon button in the Dataverse metadata block
    field templates.
  • Owner: Dataverse frontend / PrimeFaces theme

3. PrimeFaces TabView tab contains a nested interactive element

  • Rule: nested-interactive (axe-core)
  • Impact: Serious
  • WCAG: 4.1.2 Name, Role, Value (Level A)
  • Element: <li class="ui-tabs-header … ui-state-active" role="tab" aria-expanded="true">
    with a nested <a> element inside.
  • Problem: The ARIA tab role is interactive; nesting another interactive element
    (<a>) inside it creates an ambiguous focus target for assistive technologies and
    violates the ARIA spec, which forbids interactive descendants inside role="tab".
  • Fix: Remove the <a> wrapper inside tab headers in the PrimeFaces TabView
    template, or replace the <a> with a <span> that inherits tab role behaviour.
  • Owner: Dataverse frontend / PrimeFaces TabView widget
  • Note: Also present in the terms edit form (test_a11y_terms_edit_form) since
    both panels share the same TabView wrapper.

data.stage.qdr.org — Terms/license edit form (AJAX panel)

Test: test_a11y_terms_edit_form

1. PrimeFaces TabView tab contains a nested interactive element

  • Same as metadata edit form issue Qdr sso integration #3 above. Both edit panels render inside the
    same PrimeFaces TabView on the dataset page.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions