Page MenuHomePhabricator

[QA task] Levelling up - accessibility check
Closed, ResolvedPublic

Description

Based on T330420: Leveling Up - Release Readiness Checklist the following check needs to be done:

  • Accessibility goals are met
What to do
  • list what was checked & tools used

(1) Chrome extension - axe Dev Tools (a whole page scan)
(2) Firefox Accessibility
(3) Mac VoiceOver
(4) manual navigation check

  • list the accessibility issues found, so UX designer can evaluate the readiness of the features for a release

(1) The following items were ranked as Serious by axe Dev Tools

IssueElement LocationRecommendations
Ensure every ARIA button, link and menu item has an accessible name (reference).mw-ge-collapsibleDrawer-close-icon > .oo-ui-buttonElement-button[rel="nofollow"][role="button"]<a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-close"></span><span class="oo-ui-labelElement-label"></span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a>To solve this problem, you need to fix at least (1) of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute

Screen Shot 2023-03-10 at 9.28.40 AM.png (1×1 px, 356 KB)

IssueElement LocationRecommendations
interactive controls must not be nested - Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies.mw-ge-collapsibleDrawer-header <div class="mw-ge-collapsibleDrawer-header" role="button">To solve this problem, you need to fix the following: Element has focusable descendants Related Node <a class="oo-ui-buttonElement-button" role="button" tabindex="0" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-close"></span><span class="oo-ui-labelElement-label"></span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a>

Screen Shot 2023-03-10 at 9.31.11 AM.png (1×1 px, 377 KB)

(2) Firefox Accessibility - didn't list any additional issues

Screen Shot 2023-03-10 at 10.12.50 AM.png (1×1 px, 259 KB)
Screen Shot 2023-03-10 at 10.13.01 AM.png (1×1 px, 270 KB)

(3) MacOS VoiceOver utility corroborates the above - the leveling post edit dialog doesn't have a distinct name
(4) manual navigation (tabbing) - the leveling post-edit dialog has issues with reaching the dialog's push button("Don't show again" checkbox, "No thanks" and "Try new task" controls are fine).

Event Timeline

@JFernandez-WMF - if there are any additional clarification or testing is needed, let me know. Also, the issues listed for the leveling up post-edit dialog are not unique to the new dialog. The post-edit dialog has the same accessibility issues.

KStoller-WMF closed this task as Resolved.EditedMar 17 2023, 6:42 PM

Thank you, @Etonkovidova ! I've logged a follow up task for engineers based on the work you completed for this task: T332428: Leveling up - accessibility improvements

I'll mark this task as resolved, and @JFernandez-WMF I think you can check off the Accessibility check for: T330420: Leveling Up - Release Readiness Checklist , as we have not discovered any release blocking accessibility issues, and we have logged a task to follow up on the issues that were discovered.