Last active
January 1, 2016 05:19
-
-
Save samikeijonen/bee3e380c614542776de to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Example codes for article Learning accessibility in WordPress themes, part I. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav role="navigation" aria-label="<?php esc_html_e( 'Header Navigation', 'textdomain' ); ?>"> | |
<nav role="navigation" aria-label="<?php esc_html_e( 'Footer Navigation', 'textdomain' ); ?>"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<header role="banner"> </header> | |
<nav role="navigation" aria-label="<?php esc_html_e( 'Primary Navigation', 'textdomain' ); ?>"></nav> | |
<main role="main"> </main> | |
<aside role="complementary"> </aside> | |
<footer role="contentinfo"> </footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button id="nav-toggle"><span class='dashicons dashicons-menu'></span></button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Join <a href="https://poststatus.com/">https://poststatus.com</a> and get the best news about WordPress. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Good example. */ | |
a:focus { | |
outline: thin dotted; | |
} | |
a:active, | |
a:hover { | |
outline: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button id="nav-toggle"><span class='dashicons dashicons-menu'></span><span class="screen-reader-text"><?php _e( 'Menu', 'textdomain' ); ?></span></button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button id="nav-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'textdomain' ); ?></span></button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Join <a href="https://poststatus.com/">Post Status club</a> and get the best news about WordPress. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Blog</h1> | |
-- <h2 class="screen-reader-text">Primary Menu</h2> | |
-- <h2>Article title 1</h2> | |
-- <h2>Article title 2</h2> | |
-- <h2>Article title 3</h2> | |
-- <h2 class="screen-reader-text">Posts navigation</h2> | |
-- <h2 class="screen-reader-text">Sidebar</h2> | |
-- <h3>Widget title 1</h3> | |
-- <h3>Widget title 2</h3> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- <h2 class="screen-reader-text">Primary Menu</h2> | |
<h1>Article title 1</h1> | |
-- <h2>Heading 1 in article</h2> | |
-- <h2>Heading 2 in article</h2> | |
-- <h2>Heading 3 in article</h2> | |
-- <h3>Sub heading 1 for heading 3 in article</h3> | |
-- <h2 class="screen-reader-text">Post navigation</h2> | |
-- <h2 class="screen-reader-text">Sidebar</h2> | |
-- <h3>Widget title 1</h3> | |
-- <h3>Widget title 2</h3> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Bad example. */ | |
a:focus { | |
outline: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function prefix_excerpt_more() { | |
/* Translators: %s: Name of current post */ | |
$text = sprintf( __( 'Read more %s', 'textdomain' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' ); | |
$more = sprintf( '… <p><a href="%s" class="more-link">%s</a></p>', esc_url( get_permalink() ), $text ); | |
return $more; | |
} | |
add_filter( 'excerpt_more', 'prefix_excerpt_more' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* translators: %s: Name of current post */ | |
the_content( sprintf( | |
__( 'Read more %s', 'textdomain' ), | |
the_title( '<span class="screen-reader-text">', '</span>', false ) | |
) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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. */ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Bad example because there is no label | |
<input type="search" class="addsearch search-field" name="s" value="<?php echo trim( get_search_query() ); ?>"> | |
// Better with the label. | |
<label> | |
<span class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'textdomain' ); ?></span> | |
<input type="search" class="addsearch search-field" name="s" value="<?php echo trim( get_search_query() ); ?>"> | |
</label> | |
// Bad example when using only font icon as button label | |
<button type="submit" class="search-button"><span class="genericon genericon-search"></span></button> | |
// Better with screen reader text | |
<button type="submit" class="search-button"><span class="genericon genericon-search"></span><span class="screen-reader-text"><?php _e( 'Search', 'textdomain' ); ?></button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'textdomain' ); ?></a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment