ryanve / aid.css

A11y utility classes module

aid.css = CSS accessibility classes with intent

classes

.aid-say

• visually hidden but screenreader voiceover accessible
• useful for providing spoken narration to voice listeners

<i class="aid-say">You rock!</i>

.aid-tab

• visually hidden except shown as normal when focused
• useful for controls that you want visible when tabbed to

<a href="#main" class="aid-tab">skip</a>

aria

Favor aria-label where supported because it works without needing extra tags or CSS.

<button aria-label="edit"><i class="icon icon-edit" aria-hidden="true"></i></button>

setup

npm install aid.css

@import "node_modules/aid.css/aid";

contribute

Please report bugs or share techniques