[wp-trac] [WordPress Trac] #26107: CSS Usability Error with .screen-reader-text

[WordPress Trac]

#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                   |  Resolution:
 Keywords:  has-patch needs-testing  |
-------------------------------------+------------------------------
Description changed by SergeyBiryukov:

Old description:

> 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.

New description:

 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.

--

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26107#comment:1>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software