Last modified: 2014-06-09 18:32:15 UTC
In vector we output assistive headers into h5's to separate the parts of the UI for users using screen readers to understand. However we use display: none; on these headers. Modern screen readers use standard css-capable web browsers. This means that use of display: none; hides content from the very users who are supposed to be seeing them. WAVE's text overview provides a good view of how this affects the output since they intentionally hide content that is display: none;ed to reflect the reality of screen readers: http://wave.webaim.org/report?view=textonly&url=http://en.wikipedia.org/wiki/Ian_Fleming As you can see our personal links, namespaces, and actions all just end up as a big mass of unlabeled lists that appear conceptually as part of the page text after categories.
That url is not really useful... "The file you uploaded is too big Files uploaded to WAVE cannot be larger than 450 kilobytes." Maybe we should use visibility: hidden instead?
(In reply to comment #1) > That url is not really useful... "The file you uploaded is too big > Files uploaded to WAVE cannot be larger than 450 kilobytes." Looks like it's inconsistently working and not working. Here's a smaller disambiguation page that'll also have less superfluous content in the way. http://wave.webaim.org/report?view=textonly&url=http://en.wikipedia.org/wiki/Ian_Fleming_%28disambiguation%29 > Maybe we should use visibility: hidden instead? visibility: hidden; is supposed to have the same effect on screen readers as display: none; does. There are a few notable techniques for hiding things visually while leaving them in the page for screen readers. { position: absolute; left: -9000px; } /* Or some variant using -9999px, top: of the same value, and/or !important */ And: { overflow: hidden; height: 0; } WordPress seems to like this technique: { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
The h5 were changed to h3, but still use display: none; However, the above wave link now shows the proper result.
This has been mostly fixed with https://gerrit.wikimedia.org/r/#/c/112236/ and will be fixed entirely with https://gerrit.wikimedia.org/r/#/c/138368/.
This is NOT fixed. Those patchsets solve completely different problems. The #p-search, #p-personal, #p-views, and #p-namespaces headers are still hidden using display: none;
Oh huh, sorry. I've always thought they used ones of the accessible techniques, but that's apparently only used for #mw-navigation h2.
This bug is not about making headers visible, it's about using a screen-reader friendly method of hiding headers, because things like display: none; also hide them from screen readers that are supposed to be reading them out.
For an update on the techniques: { overflow: hidden; height: 0; } This technique breaks in VoiceOver and should be avoided. { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } This one is the most reliable of them all, it works universally without side-effects.
