id summary reporter owner description type status priority milestone component version severity resolution keywords cc focuses 26107 CSS Usability Error with .screen-reader-text jhned helen "This ticket is similar to #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." defect (bug) closed normal 3.8 Accessibility 3.8 normal fixed has-patch needs-testing