Snippets Collections
/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}
<!-- Instead of… -->
<span aria-label="Vegetarian">
	🌱
</span>

<!-- You could do… -->
<span aria-hidden="true">🌱</span>
<span class="visually-hidden">Vegetarian</span>

<!-- In some cases -->
  <!-- It might be more appropriate to expose these like images… -->
<span role="img" aria-label="Vegetarian">
	🌱
</span>
<span role="img" aria-label="Kaomoji table flip">
	(╯°□°)╯︵ ┻━┻
</span>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 
img:not([alt]) {
  outline: 2px solid red;
}
//add aria label to link that opens in new tab
function aria_formatter($content) {
$replace = array('target="_blank"' => 'target="_blank" aria-label="Opens in a new tab."');
$new_content = strtr($content, $replace);
return $new_content;
}
add_filter('the_content', 'aria_formatter', 999);
star

Tue Apr 01 2025 08:38:28 GMT+0000 (Coordinated Universal Time)

#accessibility #css
star

Tue Apr 01 2025 08:29:34 GMT+0000 (Coordinated Universal Time)

#accessibility #aria
star

Wed Nov 20 2024 22:15:14 GMT+0000 (Coordinated Universal Time) https://www.deque.com/blog/creating-accessible-svgs/

#accessibility
star

Tue Jul 06 2021 14:49:45 GMT+0000 (Coordinated Universal Time)

#css #accessibility #html
star

Mon Mar 15 2021 13:53:55 GMT+0000 (Coordinated Universal Time)

#css #accessibility
star

Wed Jan 27 2021 14:28:21 GMT+0000 (Coordinated Universal Time)

#wordpress #ada #accessibility

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension