Page MenuHomePhabricator
Create Task
Maniphest T226401

Optimize accessibility based on findings from external report
Closed, ResolvedPublic
Actions

Assigned To
None
Authored By
• scblr
Jun 24 2019, 2:12 PM
Tags
Referenced Files
F29800168: 9779816_orig.jpg
Jul 18 2019, 9:18 AM
F29630164: image.png
Jun 24 2019, 2:12 PM
F29630172: image.png
Jun 24 2019, 2:12 PM
F29630162: image.png
Jun 24 2019, 2:12 PM
F29630176: image.png
Jun 24 2019, 2:12 PM
F29630146: image.png
Jun 24 2019, 2:12 PM
F29630182: image.png
Jun 24 2019, 2:12 PM
Subscribers
Aklapper
• bearND
• Charlotte
cooltey
JoeWalsh
• scblr
TheDJ
Volker_E

Description

Issues from John Lilly’s accessibility report:

Explore feed

  • 01) There is a button at the top that is just labeled as “1”. I’m not quite sure of the purpose of this button. Is the tab button properly labelled?

image.png (152×1 px, 40 KB)

  • 02) Label of the navigation item button (hamburger icon) is not labelled
  • 03) Label the voice input button icon properly. I suggest “Voice input search”

image.png (192×1 px, 33 KB)

  • 04) In the customize your Explore feed card, the “Got it” and ”Customize” buttons are not announced as buttons.

image.png (534×622 px, 197 KB)

  • 05) The bottom tab bar can never be reached by using the swipe gestures since the page scrolls infinitely. You can disable the infinite scrolling and add a “load/show more” button to allow users to load more items. You can also detect if the user is using accessibility features, but this may interfere with keyboard only users.
  • 06) Actionable elements must be announced as buttons. Currently, elements that users can click such as the controls that open articles are not announced as buttons.
  • 07) The pagination is not focusable at the bottom of the intro.
  • 08) When the user moves to the next page in the tutorial, the focus remains on the next button. Focus should be moved to the new content shown on the page.

Article page

  • 09) The Edit link is not labeled.

image.png (154×1 px, 64 KB)

  • 10) Some images in articles are not labeled.

image.png (216×1 px, 143 KB)

  • 11) After clicking the Quick Facts button, focus is placed at the top of the page.

Hybrid Device with Keyboard

  • 12) When using the keyboard to navigate, the focus cannot be moved back to the top bar with the hamburger menu and notifications button.

Color Contrast

  • 13) When using the Black theme, the color contrast between links and the background is 3.2:1. It should be at least 4.5:1. The was the only color contrast issue observed with the theme settings. Can we use colorAccent (color_group_3) for the links in dark and black mode?

image.png (678×864 px, 185 KB)

Touch targets

  • 14) The 3 dots menu button has a height of 40dp. Please increase to 48dp.
  • 15) The superscript link on articles is 13dp x 14dp. Please increase to 48dp.
  • 16) The edit link within articles is 25dp x 26dp. Please increase to 48dp.
  • 17) On the Explore page, the navigation menu has a width of 36dp. Please increase to 48dp.

Related Objects
Search...

Event Timeline

• scblr created this task.Jun 24 2019, 2:12 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 24 2019, 2:12 PM
• scblr removed a project: Design.Jun 24 2019, 2:12 PM
• Charlotte triaged this task as High priority.Jun 24 2019, 4:19 PM
• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar); removed Wikipedia-Android-App-Backlog.
• Charlotte renamed this task from Fix issues from external accessibility report to [Spike] Investigate issues from external accessibility report.Jun 24 2019, 4:24 PM
• Charlotte lowered the priority of this task from High to Medium.
• Charlotte updated the task description. (Show Details)
• Charlotte moved this task from Backlog to Ready for dev on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Jun 24 2019, 4:57 PM
• Charlotte lowered the priority of this task from Medium to Low.Jul 8 2019, 10:29 PM
cooltey claimed this task.Jul 17 2019, 7:04 PM
cooltey moved this task from Ready for dev to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.
cooltey added a comment.Jul 17 2019, 10:54 PM

Hi @schoenbaechler

Most of the changes can be done, and I have some comments/questions on the following items:

  1. Some images in articles are not labeled.

It might be done in the wikimedia-page-library side by adding alt tag (haven't tested it yet.)

  1. The 3 dots menu button has a height of 40dp. Please increase to 48dp.

Does it mean to enlarge the clickable area? and the actual "3 dots" remains the same size?

  1. The superscript link on articles is 13dp x 14dp. Please increase to 48dp.

Not sure if it can be done now. It is a HTML <sup> tag.

• scblr added a comment.EditedJul 18 2019, 9:18 AM

Thanks @cooltey, looking forward to these improvements. I’m definitely advocating to treat this as more than just “Low“ priority as accessibility is a core requirement for our products:

9779816_orig.jpg (463×924 px, 45 KB)

Image source: https://slidebird.com/user-experience-die-beduerfnispyramide-des-nutzers/

In regards to your points:

  1. Some images in articles are not labeled.

It might be done in the wikimedia-page-library side by adding alt tag (haven't tested it yet.)

I see, appreciate your efforts/investigations!

  1. The 3 dots menu button has a height of 40dp. Please increase to 48dp.

Does it mean to enlarge the clickable area? and the actual "3 dots" remains the same size?

Yes, you got it!

  1. The superscript link on articles is 13dp x 14dp. Please increase to 48dp.

Not sure if it can be done now. It is a HTML <sup> tag.

Do you know who could make it happen if it’s not in our hands?

Thanks!

cooltey added a subscriber: • bearND.Jul 18 2019, 10:06 PM

Hi @schoenbaechler

Do you know who could make it happen if it’s not in our hands?

Maybe @bearND have some idea about enlarging the citation (<sup>) link clickable area.

However, I think it might be fine since the references can also be found in the "References" section on the bottom of the article.

cooltey moved this task from Doing to Blocked/Waiting on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Jul 18 2019, 10:10 PM
• bearND added a subscriber: Volker_E.EditedJul 19 2019, 12:22 AM

Do we want to increase the click target of all reference links for everybody or should it be a client specific setting?

If the former then I think the link click target issue is best handled upstream by MinervaNeue. If that's not possible we could add a CSS rule to the pagelib. @Volker_E might want to chime in as well.

While there are CSS hacks available to increase the clickable area around a link I think it's problematic when there are multiple of such links nearby, like [4][5][6]. (In this case the last link usually wins.)

If we don't want this to be done for everybody and we only need a boolean flag or a small set of values then a CSS rule like

pagelib_ref_links_large .content .mw-ref, sub, sup {
  font-size: 1.5em;
}

could be triggered by the class pagelib_ref_links_large added to the root <html> element. This is similar to what we do for other CSS settings in the pagelib.

Another approach could be to add a style element to the DOM with the appropriate rule and sizing.

Volker_E added a comment.Jul 22 2019, 2:56 PM

@bearND has already shared on major issue with multiple references side-by-side. We've additionally run into issues with line-height
CSS having negative consequences on line formatting (expanding distance) in the past. I'm not aware of an easy way to extend clickable area of links (mixing in display: inline-block with rendering consequences), that is free of side effects.
For sake of simplicity, I'd ignore the click target in this specific case with superlined text as they are only shortcuts to information that is anyways accessible at end of article.

TheDJ subscribed.EditedJul 22 2019, 4:07 PM

Some images in articles are not labeled.

A collaboratively edited encyclopedia where most people are not trained in accessibility will always introduce some level of inaccessibility. if you want to fix this, focus on editing tools or possibly 'linting', not on 'filling the attribute with something'.

• scblr added a comment.Jul 24 2019, 8:48 AM

@cooltey, thought I’ll recap in regards to:

  1. The superscript link on articles is 13dp x 14dp. Please increase to 48dp.

Not sure if it can be done now. It is a HTML <sup> tag.

Do you know who could make it happen if it’s not in our hands?

According to @Volker_E, let’s ignore it for now:

For sake of simplicity, I'd ignore the click target in this specific case with superlined text as they are only shortcuts to information that is anyways accessible at end of article.

Also, thanks to @bearND & @TheDJ for your advice and insights! 👊

cooltey added a comment.Jul 24 2019, 5:10 PM

@schoenbaechler Sounds great. The Investigations are finished and now it's ready to work on it.

Maybe we can keep this ticket and update the ticket title, or you can create another ticket to actually implement it. It is up to you :).

• scblr renamed this task from [Spike] Investigate issues from external accessibility report to Optimize accessibility based on findings from external report.Jul 25 2019, 11:29 AM
• scblr added a subscriber: • Charlotte.Jul 25 2019, 12:07 PM

Thanks @cooltey, changed the task’s title. To re-emphasize:

I’m (...) advocating to treat this as more than just “Low“ priority as accessibility is a core requirement for our products.

Under these circumstances, let’s get ready to rumble?! {CC @Charlotte)

• Charlotte added a comment.Jul 25 2019, 1:50 PM

Yes, I will put in ready for dev.

• Charlotte raised the priority of this task from Low to Medium.Jul 25 2019, 1:50 PM
• Charlotte moved this task from Blocked/Waiting to Ready for dev on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.
cooltey moved this task from Ready for dev to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Jul 25 2019, 10:18 PM
cooltey updated the task description. (Show Details)Jul 31 2019, 12:28 AM
cooltey moved this task from Doing to Blocked/Waiting on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Aug 6 2019, 8:43 PM

Move to Blocked/Waiting since we're going to finish the mobile-html tasks first.

Volker_E moved this task from Unsorted to Android on the Accessibility board.Aug 16 2019, 12:16 PM
cooltey moved this task from Blocked/Waiting to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Aug 19 2019, 7:57 PM
cooltey added a comment.EditedAug 19 2019, 10:00 PM

Note:

Feedback about the article page, such as "link color", "image label", "icon size"...etc, require update from wikimedia-page-library.

(10) Some images in articles are not labeled.
(11) After clicking the Quick Facts button, focus is placed at the top of the page.
(13) When using the Black theme, the color contrast between links and the background is 3.2:1. It should be at least 4.5:1. The was the only color contrast issue observed with the theme settings. Can we use colorAccent (color_group_3) for the links in dark and black mode?
(15) The superscript link on articles is 13dp x 14dp. Please increase to 48dp.
(16) The edit link within articles is 25dp x 26dp. Please increase to 48dp.

For now, we are blocked by the progress of implementing the mobile-html

cooltey moved this task from Doing to Blocked/Waiting on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar) board.Aug 20 2019, 3:55 PM
cooltey edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.30x-O-Ontbijtkoek); removed Wikipedia-Android-App-Backlog (Android-app-release-v2.7.29x-N-Nanaimo-Bar).Oct 9 2019, 9:25 PM

Move this ticket to the O-board since it depends on the changes in mobile-html

cooltey moved this task from Backlog to Blocked/Waiting on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.30x-O-Ontbijtkoek) board.Oct 9 2019, 9:26 PM
Dbrant closed subtask T229707: Accessibility: Update TextView to Button if it shows as a button as Resolved.Nov 1 2019, 2:23 PM
cooltey moved this task from Blocked/Waiting to Doing on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.30x-O-Ontbijtkoek) board.Jan 6 2020, 5:45 PM
cooltey added a comment.EditedJan 6 2020, 11:44 PM

Requires Page Content Service to complete the changes:

09) The Edit link is not labeled.

It says "Index link" now, and it should be changed to "Edit section" with the current section title.

(10) Some images in articles are not labeled.

We can ignore this.

(11) After clicking the Quick Facts button, focus is placed at the top of the page.

No longer reproducible.

(13) When using the Black theme, the color contrast between links and the background is 3.2:1. It should be at least 4.5:1. The was the only color contrast issue observed with the theme settings. Can we use colorAccent (color_group_3) for the links in dark and black mode?
(15) The superscript link on articles is 13dp x 14dp. Please increase to 48dp.
(16) The edit link within articles is 25dp x 26dp. Please increase to 48dp.

These should be done in the PCS.

cooltey mentioned this in T242175: mobile-html: optimize accessibility.Jan 7 2020, 10:56 PM
cooltey moved this task from Doing to Blocked/Waiting on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.30x-O-Ontbijtkoek) board.Jan 7 2020, 11:21 PM
LGoto removed cooltey as the assignee of this task.Jan 16 2020, 4:53 PM
LGoto added a subscriber: cooltey.
• Charlotte edited projects, added Android Design, Wikipedia-Android-App-Backlog; removed Wikipedia-Android-App-Backlog (Android-app-release-v2.7.30x-O-Ontbijtkoek).Mar 24 2020, 4:09 PM
• Charlotte moved this task from Needs Triage to UX Debt Backlog on the Wikipedia-Android-App-Backlog board.Mar 24 2020, 4:21 PM
• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.31x-P-Pryanik); removed Wikipedia-Android-App-Backlog.Apr 7 2020, 4:34 PM
Restricted Application edited projects, added Wikipedia-Android-App-Backlog; removed Wikipedia-Android-App-Backlog (Android-app-release-v2.7.31x-P-Pryanik). · View Herald TranscriptApr 7 2020, 4:34 PM
• Charlotte added a subscriber: JoeWalsh.Apr 7 2020, 4:35 PM

@cooltey - Can you please go back through the recommendations now that mobile-html is ready, and see what (if anything) still needs to be done? Add any additional mobile-html side fixes needed to the ticket @JoeWalsh will link below.

• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.31x-P-Pryanik); removed Wikipedia-Android-App-Backlog.Apr 7 2020, 4:35 PM
JoeWalsh added a comment.Apr 7 2020, 4:37 PM

Here is the ticket with the article a11y improvements requested for iOS T249355

• Charlotte moved this task from Backlog to Ready for dev on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.31x-P-Pryanik) board.Apr 7 2020, 4:42 PM
cooltey added a comment.Apr 8 2020, 10:25 PM

Hi @Charlotte,

Here is the ticket I have already created that addresses the remaining changes need to be done: https://phabricator.wikimedia.org/T242175, and it looks like the ticket is still sitting on the Backlog.

• bearND mentioned this in T251353: Add a11y label for edit links.Apr 28 2020, 11:17 PM
• bearND mentioned this in T251354: Increase touch target for superscript links.
• bearND mentioned this in T251355: Increase touch target for edit links.Apr 28 2020, 11:21 PM
• Charlotte added a comment.May 11 2020, 4:26 PM

Thanks - the rest of the stuff is in the PI backlog so I'm closing this ticket.

• Charlotte closed this task as Resolved.May 11 2020, 4:26 PM
• scblr mentioned this in T280409: Feature Request: Add better support for screen readers.Jun 9 2021, 4:19 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits