#26107: CSS Usability Error with .screen-reader-text
---------------------------+-------------------------------------
Reporter: jhned | Owner:
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Accessibility | Version: trunk
Severity: normal | Keywords: has-patch needs-testing
---------------------------+-------------------------------------
This ticket is similar to [http://core.trac.wordpress.org/ticket/23684
#23684], but there's a CSS error occurring when using search on page
(cmd/ctrl + F in browser): '''when searching in browser for a page title,
the browser picks up the title text twice.'''
[[Image(http://orangegrovecreative.co/screenshots/now-there-are-two-of-
me.png, 782px)]]
This is because of this CSS in
[https://github.com/WordPress/WordPress/blob/master/wp-admin/css/wp-
admin.css wp-admin.css]:
{{{
/* Hide visually but not from screen readers */
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
position: absolute;
left: -1000em;
top: -1000em;
height: 1px;
width: 1px;
overflow: hidden;
}
}}}
So if you have a long list of pages and a lot of them have a word in
common, like "Product," every other time that you hit enter or hit the
next arrow in the browser's search box, it'll bring you back to the top of
the page, because it's picking up on the (supposably) hidden screen reader
text.
Naturally, we can't change that to `display:none` because that would
defeat the whole point. But I think we can change like this:
{{{
/* Still hide visually but not from screen readers */
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
display: block;
line-height: 0;
font-size: 0;
overflow: hidden;
}
}}}
And as you can see, that fixes the problem:
[[Image(http://orangegrovecreative.co/screenshots/now-there-is-just-one-
of-me.png, 782px)]]
I've done a good bit of research, but haven't found anything against using
`font-size: 0` and `line-height: 0` to hide text except from screen
readers, so it needs some testing, but I think this will allow us to fix
the problem and keep things accessible.
--
Ticket URL: <http://core.trac.wordpress.org/ticket/26107>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software