Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y][Violation][ARIA specification] ARIA attributes "aria-pressed" and "aria-label" not applied consistent with WCAG guidelines #7489

Open
nkn2022 opened this issue Oct 22, 2024 · 1 comment

Comments

@nkn2022
Copy link

nkn2022 commented Oct 22, 2024

Description

I am running an accessibility test suite with Notebook UI using the IBM Equal Access Accessibility Checker tool on Chrome browser. The results look good overall, only a few things are missing to reach a first formal level of compliance. So kindly help look into these.

Issues reported were violating WCAG 2.2 requirements.
Ref: https://www.ibm.com/able/requirements/checker-rule-sets

Full report (includes information on element locations where issue were found):
Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx

List of violations categorized based on the checkpoints.

Category: ARIA specification

Ref: https://www.ibm.com/able/requirements/checker-rule-sets

Violation of Rule: aria_attribute_valid

List of issues with elements that violate this rule with a screenshots

Issue 1
The ARIA attributes "aria-pressed" are not valid for the element with ARIA role "none"
Element location:
<jp-button minimal="" appearance="stealth" current-value="" tabindex="-1" title="Enable Debugger" aria-pressed="false" aria-label="Enable Debugger" aria-disabled="false" class="jp-DebuggerBugButton jp-ToolbarButtonComponent">
Screenshot:
Image

Issue 2
The ARIA attributes "aria-label" are not valid for the element

with implicit ARIA role "generic"
Element location:
<div data-windowed-list-index="0" tabindex="0" aria-label="Code Cell Content" class="lm-Widget jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-selected jp-mod-noOutputs jp-mod-active">
Screenshot:
Image
Element location:
<div data-windowed-list-index="0" tabindex="0" aria-label="Code Cell Content with Output" class="lm-Widget jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-selected jp-mod-active">
Screenshot:
Image

Reproduce

Here is the screenshot of the UI scanned for the attached report:
Image

Expected behavior

Missing roles/labels are in place.
Reference on how to fix this issue can be found in these links:

Add accessible names for inputs lacking visible labels
If repurposing a standard component, use ARIA to set the correct name and role
On custom components, use ARIA to expose name, role, and value

@RRosio
Copy link
Collaborator

RRosio commented Oct 29, 2024

Linking jupyterlab/jupyterlab#16891

@RRosio RRosio removed the status:Needs Triage Applied to issues that need triage label Oct 29, 2024
@nkn2022 nkn2022 changed the title [a11y][Violation][ARIA specification] Issues reported on Notebook UI using IBM Equal Access Accessibility Checker tool [a11y][Violation][ARIA specification] ARIA attributes "aria-pressed" and "aria-label" not applied consistent with WCAG guidelines Oct 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants