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

Inaccessible Test Navigator Item Status Information Availability #374

Open
jkva opened this issue Dec 7, 2021 · 2 comments · May be fixed by #372
Open

Inaccessible Test Navigator Item Status Information Availability #374

jkva opened this issue Dec 7, 2021 · 2 comments · May be fixed by #372
Labels
accessibility question Further information is requested

Comments

@jkva
Copy link
Contributor

jkva commented Dec 7, 2021

The status of a task within a test plan ("In Progress", "Has Conflicts", "Completed", "Not Started") is conveyed visually both via a custom icon, and a span with a title.

<li class="test-name-wrapper in-progress">
    <a href="#" class="test-name" aria-current="true">Close a modal dialog using a button</a>
    <span class="progress-indicator" title="In Progress"></span>
</li>

A screenshot of the Test Navigator, showing a "In Progress" task being hovered over, its title "In Progress" being displayed

This makes the information not properly available to screen readers, and the meaning of the custom icons is not obvious through a legend elsewhere on the page.

Are there in the current design considerations for making this status information reliably available?

@jkva jkva added question Further information is requested accessibility labels Dec 7, 2021
@jscholes
Copy link
Contributor

jscholes commented Dec 7, 2021

@jkva This is potentially blocking for screen reader users, but only a usability/UX issue for those who can see (but perhaps not understand) the icons. So we should fix it for the former group as a matter of priority, with the latter being a design task.

I'd ideally like the status inside the link, to cut down on the number of Arrow key presses required to move past a testing task, and also to make the icon clickable. Something like:

<li class="test-name-wrapper in-progress">
    <a href="#" class="test-name" aria-current="true" aria-label="Close a modal dialog using a button (In Progress)">
      Close a modal dialog using a button
      <span aria-hidden="true" class="progress-indicator"></span>
    </a>
</li>

I'm using aria-label to avoid the case where there are multiple spans inside an element, and VoiceOver hence presents the parent element as two separate ones. But aria-labelledby could also work, e.g.:

<li class="test-name-wrapper in-progress">
    <a href="#" class="test-name" aria-current="true" aria-labelledby="test1-title test1-progress">
      <span id="test1-title">Close a modal dialog using a button</span>
      <span aria-hidden="true" class="progress-indicator"></span>
      <span class="sr-only" id="test1-progress">(In Progress)</span>
    </a>
</li>

What do you think?

@jscholes
Copy link
Contributor

jscholes commented Dec 7, 2021

Also, the text should probably be shown on hover/focus on the link, like a tooltip. Is that too much of a visual change? Could be a nice midpoint between the current state and something more drastic, like a legend or just showing the text to everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants