A curated collection of web accessibility tips, tricks, and best practices
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
tableinstead series of
Screen readers for the blind and visually impaired read out
altattribute text and therefore make your images accessible.
altattribute should describe meaningful images and be left empty if the image serves decorative purposes. Never leave the
altsince screen readers will read the source of the image which makes for terrible user experience.
Do not auto-play any audio or video material on page load. Users with screen readers will hear both 3rd party audio and their screen reader which makes for a poor user experience.
Be mindful of a pattern where buttons are hidden and only get displayed when parent element is hovered: this can make the buttons inaccessible from keyboard. instead us using
visibility: hidden, consider using alternative methods, e.g. using
position: absoluteand pushing it off the screen.
Whenever possible make your websites accessible to the eye by avoiding poor contrast between text and background.
If an element is interactive never remove the highlight by setting
outline: none;on a focused state of that element. If the default browser outline doesn't align with the design be sure to replace it with a custom accessible one instead of hiding it completely. Removing an element's highlight on focus makes filling out forms difficult for some users.
Once implemented properly,
labelelements make the form accessible. Each
labelelement should have a
forattribute that has the value of the corresponding filed's
If your form needs to meet specific input criteria and errors on mistaken input be sure to provide feedback to the user. Alongside the common red border include a text-based informative explanation of the encountered error.
Screen reader users navigate pages by using the heading structure. Do not use headings by picking the one that fits the appropriate size in design. Instead, use heading elements
h6with the hierarchy in mind and style them later.
Use semantic HTML elements that clearly define their content as much as possible. By using semantic elements you provide the user with a more meaningful way to navigate and interact with your website. Semantic elements, such as
are by default accessible compared to non-semantic elements like
or. Avoid using non-accessible