salcode/bootstrap-genesis

Add screen reader classes

Closed this issue · 1 comments

Bootstrap uses .sr-only for screen reader only, however, WordPress and by extension Genesis use .screen-reader-text.

@bryanwillis has created PR #139, which uses the Sass extend operator to add these classes.

While I like the idea of using the Bootstrap classes via the extend operator.

There are some differences/additions in the recommended Genesis CSS as found on http://genesis-accessible.org/2015/07/genesis-2-2-accessibility-changes-and-features/

/* ## Screen reader text
--------------------------------------------- */

.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus  {
    clip: auto !important;
    height: auto;
    width: auto;
    display: block;
    font-size: 1em;
    font-weight: bold;
    padding: 15px 23px 14px;
    color: #333;
    background: #fff;
    z-index: 100000; /* Above WP toolbar. */
    text-decoration: none;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

.more-link {
    position: relative;
}

I think we should run with these rules as I'd also like to implement the other accessibility offered by Genesis (see #151)