As a Product Manager, I want to ensure Growth features are accessible to all users, because building inclusive features is important to our team, community, and to WMF.
Acceptance Criteria:
- Review the Accessibility Check and fix any issues.
- If any of the issues would require a significant effort to resolve, either note in this task why we shouldn't fix the issue, or create a separate task if you believe we should tackle the issue at a later date.
Accessibility Check:
- 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
| Issue | Element Location | Recommendations |
|---|---|---|
| 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 |
| Issue | Element Location | Recommendations |
|---|---|---|
| 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> |
(2) Firefox Accessibility - didn't list any additional issues
(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).