Skip to content

Instantly share code, notes, and snippets.

@samikeijonen

samikeijonen/accessibility.html

Last active January 1, 2016 05:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save samikeijonen/bee3e380c614542776de to your computer and use it in GitHub Desktop.
Save samikeijonen/bee3e380c614542776de to your computer and use it in GitHub Desktop.
Download ZIP
Raw
accessibility.html
Example codes for article Learning accessibility in WordPress themes, part I.
Raw
aria-labels.php
<nav role="navigation" aria-label="<?php esc_html_e( 'Header Navigation', 'textdomain' ); ?>">
<nav role="navigation" aria-label="<?php esc_html_e( 'Footer Navigation', 'textdomain' ); ?>">
Raw
aria-roles.html
<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>
Raw
bad-font-icon-control.php
<button id="nav-toggle"><span class='dashicons dashicons-menu'></span></button>
Raw
bad-link-text.html
Join <a href="https://poststatus.com/">https://poststatus.com</a> and get the best news about WordPress.
Raw
button.php
<button id="nav-toggle"><?php _e( 'Menu', 'textdomain' ); ?></button>
Raw
focus-styles.css
/* Good example. */
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
Raw
font-icon-and-screen-reader-text.php
<button id="nav-toggle"><span class='dashicons dashicons-menu'></span><span class="screen-reader-text"><?php _e( 'Menu', 'textdomain' ); ?></span></button>
Raw
font-icon-css.php
<button id="nav-toggle"><span class="screen-reader-text"><?php _e( 'Menu', 'textdomain' ); ?></span></button>
Raw
good-link-text.html
Join <a href="https://poststatus.com/">Post Status club</a> and get the best news about WordPress.
Raw
heading-structure-blog.html
<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>
Raw
heading-structure-post.html
-- <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>
Raw
lose-focus.css
/* Bad example. */
a:focus {
outline: 0;
}
Raw
read-more-excerpt.php
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( '&hellip; <p><a href="%s" class="more-link">%s</a></p>', esc_url( get_permalink() ), $text );
return $more;
}
add_filter( 'excerpt_more', 'prefix_excerpt_more' );
Raw
read-more-the-content.php
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Read more %s', 'textdomain' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );
Raw
screen-reader-text.css
/* 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. */
}
Raw
search-button-hidden.php
<?php
/**
* Add a `screen-reader-text` class to the search form's submit button.
*
* @since Twenty Fifteen 1.0
*
* @param string $html Search form HTML.
* @return string Modified search form HTML.
*/
function twentyfifteen_search_form_modify( $html ) {
return str_replace( 'class="search-submit"', 'class="search-submit screen-reader-text"', $html );
}
add_filter( 'get_search_form', 'twentyfifteen_search_form_modify' );
Raw
searchform.php
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment