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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions