| • Jaredzimmerman-WMF | |
| Jan 27 2015, 7:57 PM |
| F11095246: Screen Shot 2017-11-30 at 2.38.07 PM.png | |
| Nov 30 2017, 10:39 PM |
| F11095253: Screen Shot 2017-11-30 at 2.38.48 PM.png | |
| Nov 30 2017, 10:39 PM |
Certain buttons in article title area do not register as buttons by screen reader and their name and function is not spoken.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Make edit link and watchstar accessible to ios voiceover | mediawiki/extensions/MobileFrontend | master | +20 -5 |
The issue was demoed to me with the build in iOS VoiceOver functionality
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
M +1 415 609 4043 \\ @Jaredzimmerman http://loo.ms/g0
This might be better in beta (as part of UX standardisation icons are in flux). Can you clarify if you saw this in stable or beta or alpha?
It was originally in Stable, but i just tested Beta and Alpha and they have the same problem.
It also extends to the Hamburger menu, and I noticed i cannot even use the login page in access mode.
@Jdlrobson, why shouldn't hamburger have a title? I agree, maybe label is not needed.
@bmansurov There is something very wrong here at a much deeper level I suspect. Even the desktop version of Voiceover on the mobile website is totally unable to read and control the mobile website, and we are not entirely sure why that is. It's like it is being thrown off by some invisible surface... Perhaps due to the sliding menu ? Will require further investigation.
It seems that this is caused by the text-indent hack to hide the text from view.
This trick also doesn't work well with rtl, so that's another reason to avoid it.
I do admit, that this is DIFFICULT to satisfy everyone, but there have been some insightful blogposts on this topic that should be a good guide:
http://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
BTW, when googling about this text-indent trick, I came across the fact that his can impact performance on mobile devices, because it enlarges the render surface that needs to be calculated. http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Change 235134 had a related patch set uploaded (by Robmoen):
Make edit link and watchstar accessible to ios voiceover
The above change is only partially complete. This patch does not resolve the issues with the text-indent hack. Need to research this more.
Questions:
@rmoen: You're not alone in seeing browser tests passing locally that fail in the integration environment…
Looks like this test is failing for other patches too - https://integration.wikimedia.org/ci/job/mwext-mw-selenium/682/console - so something has changed somewhere (ohhh the mystery of browser tests)
I'd suggest adding a separate patch to @skip it if you are unable to debug it. I can look at it later (I suspect race conditions again).
Change 235134 merged by jenkins-bot:
Make edit link and watchstar accessible to ios voiceover
Unless I'm mistaken this looks addressed. When I turn on VoiceOver for OSX and visit in Chrome all buttons are registered in the screen reader...
Just to note, while things have improved with accessibility, specifically for the items mentioned, it's still far from being actually fully accessible.. Just to make sure that people don't think that MinervaNeue is accessible now...
Thanks for that note @TheDJ yes, I am sure there are many improvements still to be made.
