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
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:
Any text that’s in a different language should have an appropriate language description:
All images, video, and audio should have alternative text.
<img>elements should contain a descriptive
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.
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.