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.

Sign up for GitHub

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

Jump to bottom

[a11y][Violation][2.4.1 Bypass Blocks] Element with "banner" role missing aria-labelledby attribute #16869

Open
nkn2022 opened this issue Oct 15, 2024 · 10 comments
Open

[a11y][Violation][2.4.1 Bypass Blocks] Element with "banner" role missing aria-labelledby attribute #16869

nkn2022 opened this issue Oct 15, 2024 · 10 comments
Labels
bug tag:Accessibility

Comments

@nkn2022
Copy link

nkn2022 commented Oct 15, 2024 •
edited
Loading

Description

I am running an accessibility test suite with Jupyter 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

Listing of violations categorized based on the checkpoints.
Full report (includes information on element locations where issue were found):
Accessibility_Report-Untitled.ipynb - JupyterLab.xlsx

Category: 2.4.1 Bypass Blocks

Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#2_4_1

Violation of Rule: aria_banner_label_unique

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

Issue 1
Multiple elements with "banner" role do not have unique ARIA labels
Element location:
<div style="position: absolute; ... d-hover: #e0e0e0;" id="jp-top-panel" role="banner" class="lm-Widget lm-Panel">
Screenshot:
image
PS: You will not see this issue reported in the attached file. This is only reported in our product where the JupyterLab UI is within another container with a <header / > element. So we will need a label definition on this component to fix this problem.

Reproduce

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

image

Expected behavior

Here is the suggestion from the tool:

What to do
For each <header> element that is a descendant of the <body> element, and each element with role="banner", either set the value of the aria-labelledby attribute of each banner to the id value of any visible text that appropriately and uniquely describes that banner's purpose
Or, use the aria-label attribute to add an invisible, unique, non-empty label to each element with the "banner" role
For example:

<h1 id="weather">Weather portlet</h1>
<header aria-labelledby="weather">
...
</header>

<div role="banner" aria-label="Stock ticker portlet">
...
</div>

Context

  • Operating System and version: MacOS Sonoma Version 14.5
  • Browser and version: Chrome Version 129+
  • JupyterLab version: Version 4.2.5
@nkn2022 nkn2022 added the bug label Oct 15, 2024
@jupyterlab-probot jupyterlab-probot bot added the status:Needs Triage Applied to new issues that need triage label Oct 15, 2024
@nkn2022 nkn2022 changed the title [a11][Violation] Accessibility issues reported on JupyterLab UI using IBM Equal Access Accessibility Checker tool [a11y][Violation] Accessibility issues reported on JupyterLab UI using IBM Equal Access Accessibility Checker tool Oct 15, 2024
@JasonWeill
Copy link
Contributor

@nkn2022 Thank you for raising these issues to our attention! So that we can work on these issues in parallel, could you open distinct issues for each of these accessibility flaws? Be sure to check for existing issues to avoid duplication of issues. Also, if you could provide any screen shots or reports in each issue, that would help contributors out. I appreciate your help.

@JasonWeill JasonWeill mentioned this issue Oct 22, 2024
Open
@nkn2022
Copy link
Author

nkn2022 commented Oct 22, 2024

@JasonWeill Thanks for checking. Happy to help. I will open separate ones with screenshots soon.

@nkn2022
Copy link
Author

nkn2022 commented Oct 23, 2024

I have created one issue for each category of the issues with details and screenshots. Kindly let me know if this breakdown looks good.

I am changing the description and title of this issue to track only issues found in category 2.4.1 Bypass Blocks.

Created the following to track the remaining issues:
1.4.3 Contrast (Minimum) - #16888
2.5.8 Minimum Target Size - #16889
4.1.2 Name, Role, Value - #16890
ARIA specification - #16891

@nkn2022 nkn2022 changed the title [a11y][Violation] Accessibility issues reported on JupyterLab UI using IBM Equal Access Accessibility Checker tool [a11y][Violation][2.4.1 Bypass Blocks] Accessibility issues reported on JupyterLab UI using IBM Equal Access Accessibility Checker tool Oct 23, 2024
@JasonWeill
Copy link
Contributor

Thank you very much! I'm going to close this issue in favor of the four other ones that you've opened. We do weekly issue triage at 09:00 US Pacific (in your time zone) on Tuesdays, if you'd like to join us next week. I appreciate your contributions!

@JasonWeill JasonWeill reopened this Oct 23, 2024
@JasonWeill
Copy link
Contributor

Sorry about that — I closed this in error, but noticed that it was retitled to cover one issue. Reopened so that we can revisit it at triage next week.

@nkn2022
Copy link
Author

nkn2022 commented Oct 24, 2024

@JasonWeill Thanks! Yes, I kept this is as one of the issue.

@JasonWeill
Copy link
Contributor

Thank you @nkn2022! I now see three sub-issues:

  1. Multiple elements with "banner" role do not have unique ARIA labels — This is clear and actionable
  2. Content is not within a landmark element — This is not clear, because the "Skip to main section" container is not necessarily a landmark element.
  3. Multiple elements with "toolbar" roles do not have unique labels — How should we label our toolbars?

It might be easier to complete this work if we further break this issue down into the three sub-issues listed above. Sub-issue 1 is something that's ready to work on. @nkn2022 if you could please file separate issues for sub-issue 2 and 3 above?

@JasonWeill
Copy link
Contributor

Sub-issue 1 (adding ARIA labels to "banner" elements) was originally addressed in #9622, but more work appears to be needed.

@JasonWeill JasonWeill removed status:Needs Info status:Needs Triage Applied to new issues that need triage labels Oct 29, 2024
@RRosio RRosio mentioned this issue Oct 29, 2024
Open
@nkn2022
Copy link
Author

nkn2022 commented Oct 30, 2024 •
edited
Loading

@JasonWeill The issue #2 appears only if the JupyterUI is scanned independently.
See:
image

Does not seem to be reported as a Violation in our embedded UI. So I will not need to track this issue. So will not open a separate one for that.

@nkn2022
Copy link
Author

nkn2022 commented Oct 30, 2024 •
edited
Loading

Opened separate issue for the toolbar problem: #16905

Updated the description to track only the "banner" problem.

@nkn2022 nkn2022 changed the title [a11y][Violation][2.4.1 Bypass Blocks] Accessibility issues reported on JupyterLab UI using IBM Equal Access Accessibility Checker tool [a11y][Violation][2.4.1 Bypass Blocks] Element with "banner" role missing aria-labelledby attribute Oct 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug tag:Accessibility
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JasonWeill @nkn2022