10h30/trestle
1
0
Fork 0
mirror of https://github.com/10h30/trestle.git synced 2026-07-11 18:56:07 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add screen-reader-text class to our stylesheet for accessibility

Browse Source 
WordPress has been moving in the direction of better accessibility for themes, and as part of this they are encouraging the use of a standard class "screen-reader-text" on the front end of all themes. This change adds the official CSS recommended by core.

For more information see https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/ and https://codex.wordpress.org/CSS#WordPress_Generated_Classes
This commit is contained in:
Braad
2015-07-13 11:11:43 -07:00
parent 974933f5c2
commit b1d4ec9775
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+29
View File
@@ -869,6 +869,35 @@ img.alignright,
text-align: center; text-align: center;
} }
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/* Genesis /* Genesis
--------------------------------------------- */ --------------------------------------------- */