[a11y][Violation] Accessibility issues reported on Notebook UI using IBM Equal Access Accessibility Checker tool

[nkn2022]

trafficstars

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.

2.4.1 Bypass Blocks

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

**Violation of Rule: aria_toolbar_label_unique Issue: Multiple elements with "toolbar" roles do not have unique labels

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 Issue: The tabbable element's role 'generic' is not a widget role The tabbable element's role 'none' is not a widget role

**Violation of Rule: input_label_exists Issue: Form control with "textbox" role has no associated label

ARIA specification

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

**Violation of Rule: aria_attribute_valid Issue: The ARIA attributes "aria-pressed" are not valid for the element with ARIA role "none"

1.4.3 Contrast (Minimum)

Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#1_4_3)

**Violation of Rule: text_contrast_sufficient Issue: Text contrast of 4.17 with its background is less than the WCAG AA minimum requirements for text of size 13px and weight of 400 Text contrast of 4.26 with its background is less than the WCAG AA minimum requirements for text of size 13px and weight of 400

1.3.1 Info and Relationships

Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#1_3_1)

**Violation of Rule: table_headers_related Issue: Complex table does not have headers for each cell properly defined with 'header' or 'scope'

2.4.7 Focus Visible

Ref: https://www.ibm.com/able/requirements/requirements/#2_4_7)

**Needs review of Rule: element_tabbable_visible Issue: Confirm the element should be tabbable and if so, it becomes visible when it has keyboard focus PS: I see a lot of improvements have been made in this area with the latest version. Thanks for that 👍 But I see that this menu section is skipped when using keyboard Tab. Element location: <li class="lm-MenuBar-item" aria-disabled="false" aria-haspopup="true" role="menuitem" tabindex="0">

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 Violations reported.

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

Expected behavior

No violations are reported on the scanning to reach a first formal level of compliance.