Doing Your Part Coding Accessible WordPress Websites
…not an Accessibility Expert.
Just a guy who makes websites
If I can do it, you can do it !
Here we go!
What accessibility is & why it's important
Real tips & tricks
WordPress-specific accessibility
All with lots of links for future reference.
Slides at http://MRWweb.com/wc15/a11y-code/
We all benefit from accessible spaces and interfaces.
People with limited mobility & people with a bad touchpad
People with low vision & people with glare on their screens
People who use browser zoom for all reasons.
EVERYONE! There is no "them."
A good website IS an accessible website.
Benefits of Accessibility
Accessibility for Developers
Common issues and techniques:
Text alternatives (images, icons, etc.)
Keyboard navigation (:focus, skip links)
Clear labeling (form labels, buttons, unique links)
Source order, heading structure, & ARIA landmarks (i.e. role="_____")
Code Examples
So much to say and so little time!
Focus on quick wins
Multiple applications of one basic technique
Screen Reader Text
Required for all new WordPress.org themes!
Bad Code
.screen-reader-text {
display: none;
}
.screen-reader-text {
visibility: hidden;
}
Good Code
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
Result
Bad Code
<a href="dashicons dashicons-twitter" href="http://twitter.com/MRWweb"></a>
Good Code
<a class="dashicons-before dashicons-twitter" href="http://twitter.com/MRWweb">
<span class="screen-reader-text">@MRWweb on Twitter</span>
</span>
Bad Code
<a href="#">Read more…</a>
Good Code
<a href="#">Read more<span class="screen-reader-text"> of "{Put Article Title Here}"</span>…</a>
"Read More" Links in WordPress
Straight outta the Theme Handbook!
<?php
the_content(
sprintf(
__( 'Continue reading%s', 'textdomain' ),
'<span class="screen-reader-text"> ' . get_the_title() . '</span>'
)
); ?>
Screen Reader Text for Forms
Search Form Result
Bad Code
<form role="search" method="get" id="searchform" class="searchform">
<input type="text" value="" name="s" id="s" />
<button type="submit" id="searchsubmit">Search</button>
</form>
Good Code
<form role="search" method="get" id="searchform" class="searchform">
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<button type="submit" id="searchsubmit">Search</button>
</form>
Skip Link HTML
<body>
<a href="#primary" class="screen-reader-text assistive-text">Skip to Main Content</a>
<!-- Stuff like menus and banners -->
<main id="primary" tabindex="-1">...</main>
</body>Assistive Text :focus CSS
.assistive-text:focus {
clip: auto;
width: auto;
height: auto;
z-index: 100000;
/* make it pretty too! */
}
The Wrong Way
<?php printf( '<img src="%1$s">',
esc_url( wp_get_attachment_image_src( $id ) )
); ?>
<img src="#">
The Right Way
<?php echo wp_get_attachment_image( $id ); ?>
<img src="#" alt="{User-set alt attribute!}">
WordPress + Accessibility = #WPa11y
#WPa11y Guidelines & Code
General Accessibility Resources
Accessibility Blogs
There are many, these are just some of my favorites.
Testing for Accessibility
In Other Words…
WordPress + Accessibility = Happy Internet (Yes, all those icons have text alternatives!)
← Previous Slide
Next Slide →
