Native Widgets

[smeragoel]

📜 Instructions Compliance

• [ ] If a native widget has a visible label or instructions, they must be programmatically determinable - WCAG 1.3.1, WCAG 2.5.3

  • Path .navbar-item:nth-child(2) > .theme-switch-button[aria-label="light/dark"][data-bs-original-title="light/dark"]

  • Snippet

    <button class="btn btn-sm navbar-btn theme-switch-button" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip" data-bs-original-title="light/dark">

  • Element button

  • Accessible Name light/dark

  • Accessible description (no value)

[gabalafou]

I can't seem to recall what this one was about

[smeragoel]

This is the theme (light/dark) switcher on the navbar. This was the test:

Note: Both WCAG 2.0 and 2.1 require a widget's visible label and instructions (if present) to be programmatically determinable. 
WCAG 2.1 also requires a widget's visible label and instructions (if present) to be included in its accessible name and description.

In the target page, examine each highlighted element to determine whether it has a visible label or instructions.
If a widget does have a visible label or instructions,  verify that they are also displayed in the Instances list:
- The accessible name must be (or include) an exact match of any visible text label.
- The accessible description must include any additional visible instructions. 
If any non-text instructions are provided (for example, icons or color changes), the  accessible description must include a text equivalent.

I think the switcher failed this test because there aren't any instructions in the Accessible Description.

[smeragoel]

@gabalafou to look into this and the research the WCAG requirement

[gabalafou]

Looking into this, I think the only thing we really need to do with the light/dark button is to convey the state of the button in a more accessible way. The button has three states: light, dark, and auto. Right now we only convey the state of the button with one of three SVG icons. I think the first step would be to give those icons some alt text.

And then later when we've fixed higher priority issues, we could give the whole light/dark widget a rethink. What do we think of this plan?