aria-hidden and the .screen-reader-text CSS class

Now you see me, now you don't.

aria-hidden hides an element from a screen reader but not from vision
screen-reader-text hides an element from vision but not from a screen reader

	/* Text meant only for screen readers. */
	.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;
	}
	

Social media sharing links

	<ul class="social-share">
		<li>
			<a href="#link-to-twitter">
				<i class="fab fa-twitter"></i>
			</a>
		</li>
		<li>
			<a href="#link-to-instagram">
				<i class="fab fa-instagram"></i>
			</a>
		</li>
	</ul>
	

Fix

• Follow us on Twitter
• Follow us on Instagram

	<ul class="social-share">
		<li>
			<a href="#link-to-twitter">
				<i class="fab fa-twitter" aria-hidden="true"></i>
				<span class="screen-reader-text">Follow us on Instagram</span>
			</a>
		</li>
		<li>
			<a href="#link-to-instagram">
				<i class="fab fa-instagram" aria-hidden="true"></i>
				<span class="screen-reader-text">Follow us on Instagram</span>
			</a>
		</li>
	</ul>
	

Example: post excerpts in an archive page

Without aria-hidden

    <h2><a href="https://wordpress.org">Meet WordPress</a></h2>
    <p>

        <a class="post-thumbnail" href="https://wordpress.org">

            <img width="100" height="100"
                 src="../images/logo-wp.png"
                 alt="Meet WordPress" />
        </a>

        WordPress is open source software you can use to create a beautiful
        website, blog, or app. Beautiful designs, powerful features, and the freedom to build
        anything you want. WordPress is both free and priceless at the same time.<br />

        <a href="https://wordpress.org">Read More...</a>

    </p>
    

With aria-hidden

    <h2><a href="https://wordpress.org">Meet WordPress</a></h2>

    <p>

		<a class="post-thumbnail" href="https://wordpress.org"
            aria-hidden="true">

            <img width="100" height="100"
                 src="../images/logo-wp.png"
                 alt="Meet WordPress" />
        </a>

        WordPress is open source software you can use to create a beautiful
        website, blog, or app. Beautiful designs, powerful features, and the freedom to build
        anything you want. WordPress is both free and priceless at the same time.>br />

        <a href="https://wordpress.org" aria-hidden="true">
			Read More...
		</a>

    </p>
    

With aria-hidden and tabindex=-1

    <h2><a href="https://wordpress.org">Meet WordPress</a></h2>

	<p>

        <a class="post-thumbnail" href="https://wordpress.org"
            aria-hidden="true"
            tabindex="-1">

            <img width="100" height="100"
                 src="../images/logo-wp.png"
                 alt="Meet WordPress with aria-hidden and tabindex=-1" />
        </a>

        WordPress is open source software you can use to create a beautiful
        website, blog, or app.</p>
        <p>Beautiful designs, powerful features, and the freedom to build
        anything you want.


        <a href="https://wordpress.org" aria-hidden="true" tabindex="-1">
	        Read More...
	    </a>

    </p>

Back to start page