aria-label

With an aria label you can add additional information about an element.

1: Without aria-label:

    <a href="your-url">
        edit
    </a>
	
edit

2: With aria-label "edit my awesome post":

	<a href="your-url"
		aria-label="edit my awesome post">
		edit
	</a>
	
edit

3. But beware: an aria-label overrides the link text:

    <a href="your-url"
        aria-label="edit my awesome post">
		delete
	</a>
	
delete

4. Or don't use ARIA but the .screen-reader-text class

    <a href="your-url">
         edit<span class="screen-reader-text"> my awesome post</span>
    </a>
	
edit: my awesome post

no link text versus aria-label versus .screen-reader-text class

No aria

aria-hidden and acreen-reader-text class

aria-hidden and aria-label

No aria

		<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>
	

aria-hidden and acreen-reader-text class

	<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 Twitter
			</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
			</a>
		</li>
	</ul>
	

aria-hidden and aria-label

	<ul class="social-share">
		<li>
			<a href="#link-to-twitter" aria-label="Follow us on Twitter">
			<i class="fab fa-twitter"></i>
			</a>
		</li>
		<li>
			<a href="#link-to-instagram" aria-label="Follow us on Twitter">
				<i class="fab fa-instagram" ></i>
			</a>
		</li>

	</ul>
	
Pro tip : Accessible emoijs
		<span role="img" aria-label="Snowman">☃</span>
	

Back to start page