[a11y][Violation][4.1.2 Name, Role, Value] Some Notebook UI elements missing roles and labels
- Dominant language
- Jupyter Notebook
- Stars
- 13.3k
- Forks
- 5.8k
- Avg merge
- 6d 11h
- Merged PRs (30d)
- 7
Description
## 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](https://github.com/user-attachments/files/17400350/Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx)
# Category: `4.1.2 Name, Role, Value`
Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#4_1_2
****Violation of Rule:** `element_tabbable_role_valid`**
> List of issues with elements that violate this rule with a screenshots
> > **Issue 1**
> > The tabbable element's role 'generic' is not a widget role
> > **Element location:**
> > `
> > 
> > **Issue 2**
> > The tabbable element's role 'none' is not a widget role
> > **Element location:**
> > ``
> > **Screenshot:**
> > 
> > **Issue 3** (Updated April 8, 2025 by @nkn2022)
> > The tabbable element does not have a valid widget role
> > ``
****Violation of Rule: `input_label_exists`**
> List of issues with elements that violate this rule with a screenshots
> > **Issue 1**
> > Form control with "textbox" role has no associated label
> > **Element location:**
> > `
> > **Screenshot 1:**
> > 
> > **Screenshot 2:**
> >
> > **Screenshot 3:**
> >
## Reproduce
- Install Chrome extension for IBM accessibility checker tool. Ref: https://www.ibm.com/able/toolkit/verify/automated
- Open Notebook UI on Chrome browser. Add some cells with code.
- Run the tool and we can see the above `Violation`s reported.
Here is the screenshot of the UI scanned for the attached report:

## 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](https://www.ibm.com/able/toolkit/develop/user-input/#accessible-names)
[ If repurposing a standard component, use ARIA to set the correct name and role](https://www.ibm.com/able/toolkit/develop/user-input/#standard-component)
[On custom components, use ARIA to expose name, role, and value](https://www.ibm.com/able/toolkit/develop/user-input/#custom-components)
Contributor guide
Research direction
Reproduce the report in Notebook UI on Chrome with the IBM Equal Access Accessibility Checker, using the listed tabbable elements and CodeMirror textbox as starting points. Inspect those elements and verify that the missing widget roles and accessible labels are present, then rerun the checker until the reported violations are resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- jupyter-notebook
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100