Page MenuHomePhabricator

Accessibility evaluation
Closed, ResolvedPublic

Description

Have an accessibility evaluation (and create potential followup issues, if any).

Test site: https://developer-portal.wmcloud.org/

Wave test: 21 errors as of April 20

To do:

  • Check color contrast using a tool like webaim.org's
  • Change zoom level and see how things look
  • Try navigating using only the keyboard
  • Tested with screenreader (Orca)
  • Use empty alt text for decorative images alt="" (reference)

Event Timeline

Few insights:

image.png (344×1 px, 60 KB)

  • a dl was set, without a dt, changed to normal list item
  • “Page info in search results” should be a level 2 heading, after the level 1 heading above. If you think, font size isn't right, use bold instead.
apaskulin changed the task status from Stalled to Open.Apr 21 2022, 12:44 AM

Note: email got flagged as spam about this task due to link just added

The test site has been up at https://developer-portal.wmcloud.org/ .
@Volker_E: Would be lovely if you found time to take a quick look if there is anything else that we should be aware of.

Direct link to WAVE test results: https://wave.webaim.org/report#/https://developer-portal.wmcloud.org/

Aklapper raised the priority of this task from Low to High.May 12 2022, 9:49 AM
apaskulin subscribed.

I added some notes to the task from a presentation I saw recently about how to evaluate for accessibility

Warnings from Wave:

Empty form labels for :
input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="drawer" autocomplete="off">
Multiple form labels
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="
search" autocomplete="off">
Empty form label
<label class="md-overlay" for="__drawer"></label>

There is something I don't quite understand going on with the SVG in the search box, but this is lower priority than the larger search issues described below.

Easy fix: Suspicious alternative text! for the WMF logo

Screen reader test with Orca:

  • Menu for language switching attempts to read the characters verbatim using English pronunciation (not something we can fix).
  • Page structure generally works well, testing both horizontal and left nav and in-page navigation
  • Issuing a search query:
    • I start typing a query, I have no way of knowing that there is a list of search results displaying, so if I hit 'enter' to issue my query, I get to the first page in the results (that I didn't see) which in many cases is not in my language because of https://phabricator.wikimedia.org/T306458
  • There is some weirdness with the dark mode toggle button and the language selection menu. I couldn't manage to select and toggle the button using the normal commands, and the reader interprets all the menu options in the language selector as elements it should read even if I didn't activate that menu.
TBurmeister changed the task status from Open to In Progress.Jun 10 2022, 1:48 PM

The multiple form label and empty form label errors don't appear to be something we can easily fix, as that would mess with how the site is generated by the Material theme, and likely be overridden whenever we rebuild the site (unless we could do it via custom scripts or by extending the theme, i.e. overriding blocks or something. In the HTML example below, which uses the '"Use content and data" navigation tab, I added comments to call out the problematic areas:

<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2">
<div class="md-nav__link md-nav__link--index ">
<a href="use-content/">
Use content and data
</a>
<label for="__nav_2">
<span class="md-nav__icon md-icon"></span> ## This reads as an empty form label
</label>
</div>
<nav class="md-nav" aria-label="Use content and data" data-md-level="1"> ## This aria-label duplicates the text below in the label tag
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Use content and data
</label>

A relevant thread on this topic: https://bytemeta.vip/repo/squidfunk/mkdocs-material/issues/3503. I followed the advice there to override the partial in which the logo image resides https://github.com/squidfunk/mkdocs-material/blob/b2ecd717bdebc71b514d3eb0ace10efc497fcf98/src/partials/logo.html#L23-L29 and am submitted a patch to change the alt text from "logo" to "Wikimedia logo". SUCH IMPACT

Change 804622 had a related patch set uploaded (by Triciaburmeister; author: Triciaburmeister):

[wikimedia/developer-portal@main] design: Override the logo partial to make its alt text more meaningful

https://gerrit.wikimedia.org/r/804622

Change 804622 merged by jenkins-bot:

[wikimedia/developer-portal@main] design: Override the logo partial to make its alt text more meaningful

https://gerrit.wikimedia.org/r/804622

Tested the site on TalkBack on Android 11, OnePlus 6t mobile phone, Chrome browser 102.0.5005.98. The following are the major issues to try to fix to improve accessiblity, I'm filing bugs/subtasks for them because fixing them is outside the scope of my abilities:

  • T310534: The structure of the language selector button is not interpreted as a single element that could be skipped, so screen reader users must tab through or listen to every language in the list before moving to the next element on the page.
  • 19 errors and 4 alerts in WAVE tool, related to empty form labels and multiple form labels. I think to fix these we'd need to extend or override the theme. I *think* but am not sure that fixing this could also improve the screenreader UX for the dark/light mode toggle and the language selector.
  • T310517: Issuing a search query and navigating search results is not feasible if using a screen reader. Related but not limited to: https://phabricator.wikimedia.org/T306458