A compilation of web accessibility best practices. It's always a good idea to review all these before publishing a website.
This is a compilation of best practices and standards to follow in every website and web project.
Use the appropriate HTML tags for each case. That includes header
, footer
, nav
, main
, article
, figure
, button
, label
among countless others. div
isn’t always suited for everything.
Use adequate contrast between text and background.The contrast ratio shouldn’t be lower than 4.5:1. For an easier way to find out if the contrast you’re using is accessible or not, you can use any of the many tools available online.
Use proper typographical weight — don’t use extremely thin or thick text styles on small sizes or on low pixel resolution screens.
Paragraph width should generally revolve between 25 to 45 rems. Left-aligned text (or right-aligned text for right-to-left languages) is generally easier to set up. Justified text can be more difficult to set, and requires proper hyphenation and careful styling.
Screen readers can scan through pages by skipping through links, so having the text in a link be things like “read more” or “click here” isn’t very helpful. Instead, use descriptive and identifiable text inside the link.
If non-descriptive links are necessary, the alternative solution is to use aria-label
to provide a descriptive attribute to be read by screen readers. The aria-label
should also inform users if the link is going to open a new tab.
Links should be styled properly, ideally using an underline. Alternatively, a 3:1 contrast ratio from the surrounding text can work (and even then, add an underline when it’s hovered and focused).
If the link is a file, say so in the link text. This can avoid confusion and hefty 3G bills for mobile users accidentally downloading large files.
Generally, we like to remove the focus styling in CSS, because it doesn’t fit with the carefully designed layout we lovingly crafted. But people who cannot use a mouse actually use it, and websites without a visible :focus
are inaccessible. Firefox solved the issue using :focus-visible
, which only shows the focus style if the focus has been reached from a keyboard.
Add the language attribute to your HTML: <html lang="en>
.
Any text that’s in a different language should have an appropriate language description: <span lang=“es”>Hola!</span>
.
All images, video, and audio should have alternative text.
<img>
elements should contain a descriptive alt=""
.Accessibility and animation in the web tends to be a versus rather than a playful date, and it can be tricky to find balance between both — especially when navigating the amazing possibilities that the new web provides. But it’s important to keep both in mind when designing and developing.
prefers-reduced-motion
media query.Don’t disable auto-fill! It saves users time and makes the interaction easier and smoother.
When a visible label is redundant, it’s ok to skip the label. In that case, use aria-labelledby
to add a different element as the label, like a button.
Avoid the use of old-standard Captchas. Whenever possible, keep things easy to navigate for the user. Go for the latest version of ReCaptcha or just avoid it altogether.