New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change screen-reader-text styles #1

Closed
GaryJones opened this Issue Jul 25, 2014 · 4 comments

Comments

Projects
None yet
2 participants
@GaryJones

GaryJones commented Jul 25, 2014

Bootstrap:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

WordPress wp-admin (same base style, except for clip value format):

// Copied from wp-admin styles
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
    position: absolute;
    margin: -1px;
    padding: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.screen-reader-text:focus {
    outline: 0;
}

HTML5 Boilerplate (different classes, different clip value format, different property order, but essentially the same):

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

Twenty Fourteen (simpler ruleset, but focus seems to be very specific to skiplink appearance):

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: normal;
    padding: 15px 23px 14px;
    position: absolute;
    left: 5px;
    top: 5px;
    text-decoration: none;
    text-transform: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}

The point here is that all of them use the clip approach, rather than off-screen, which is what Leiden currently does. Moving an element to some distance off to the left can create memory issues on some devices due to the massive rendering box it has to handle. Using top means some browsers might scroll when the element gets focus, which might be confusing.

Can Leiden switch to using a clip approach?

@rianrietveld

This comment has been minimized.

Show comment
Hide comment
@rianrietveld

rianrietveld Aug 2, 2014

Owner

Found a post about this by Thierry Koblentz
https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
It seems that only using clip, like Twenty Fourteen does, is not fully all browser proof.
"Unfortunately, it appears that Webkit, Opera and to some extent IE do not play ball with this method."

Bootstrap and Boilerplate both use 0 in stead of 1 pixel, have to check that on different browsers, but it seems to make better sense.

Because a lot of Dutch governement is still on IE7 adding
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
or
clip: rect(0 0 0 0); /* IE6, IE7 */
will be useful to add.

Owner

rianrietveld commented Aug 2, 2014

Found a post about this by Thierry Koblentz
https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
It seems that only using clip, like Twenty Fourteen does, is not fully all browser proof.
"Unfortunately, it appears that Webkit, Opera and to some extent IE do not play ball with this method."

Bootstrap and Boilerplate both use 0 in stead of 1 pixel, have to check that on different browsers, but it seems to make better sense.

Because a lot of Dutch governement is still on IE7 adding
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
or
clip: rect(0 0 0 0); /* IE6, IE7 */
will be useful to add.

@GaryJones

This comment has been minimized.

Show comment
Hide comment
@GaryJones

GaryJones Aug 2, 2014

Since this will be something theme owners or developers will need to add, it might be worth adding the results of your research to the readme and/or a blog post. Include most cross browser compatible code, but identify which bits are only oldIE so they can be easily dropped.

GaryJones commented Aug 2, 2014

Since this will be something theme owners or developers will need to add, it might be worth adding the results of your research to the readme and/or a blog post. Include most cross browser compatible code, but identify which bits are only oldIE so they can be easily dropped.

@GaryJones

This comment has been minimized.

Show comment
Hide comment
@GaryJones

GaryJones Aug 21, 2014

Updated OP with wp-admin styles.

GaryJones commented Aug 21, 2014

Updated OP with wp-admin styles.

@rianrietveld

This comment has been minimized.

Show comment
Hide comment
@rianrietveld
Owner

rianrietveld commented Nov 17, 2014

Lets see how ticket 29699 goes.
https://core.trac.wordpress.org/ticket/29699

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment