Accessibility

Well, with this lesson I learned how to spell accessibility and how to make my icons accessible! Whoo Hoo!
This code is to place an icon based social media nav and allow screen readers to say “Facebook” when it comes to the Facebook icon:
<nav class=”social-media-navigation” role=”navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘social-media’, ‘link_before’ => ‘<span class=”screen-reader-text”>’, ‘link_after’ => ‘</span>’, ‘menu_class’ => ‘social-media-menu’ ) ); ?>
</nav>
And this is the CSS that allows it to work:
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
I was actually reasonably close to this but I don’t have a way of checking it so I was really unsure.
BTW there are other ways of writing the HTML to achieve this:
https://rianrietveld.com/2015/04/04/the-screen-reader-text-class-why-and-how/
<a href="url-here">Read more<span class="screen-reader-text"> about cute kittens</span></a>


And if I was using WP but in a different way:
<a href="<?php the_permalink(); ?>">Read more<span class="screen-reader-text"> about <?php the_title();?></span></a>

I also could have used a plugin.

I'm just glad I now know how to do this. :)
Tags: ,