How great would it be to have a resource you can use to ensure your website is meeting most web accessibility standards? Well here it is, below are a few major tips to make sure your website is built for all.
1. Header Navigation
In order to have proper page navigation from top to bottom heading tags must be used correctly. All headings must be used in proper order h1 → h2 → h3 → h4 → h5 → h6. You must not skip the order of headers and each header will need a designated class for a consistent look on all headers.
2. DO NOT remove outline browser styling
Do not set the outline property to the value of none, doing so removes the browser's built-in ability to focus active state indicators on elements.
3. Custom Form Control Navigation
It’s highly encouraged to use native HTML elements for things such as buttons. However, for some odd reason if a div element is used instead. You’ll need to add tabIndex=0 for proper form navigation.
Custom elements should always have the intended role assigned to them for browser support.
4. Don’t use pixels for font-size
Font sizes should never be of type pixel(px). Users have the ability to increase a browser's font size (setting change), in turn, having your website's font size configured. However, if you use pixels these custom settings cannot be overridden because px does not support accessibility.
5. Link accessibility
When using tags, you should include a more descriptive description as it’s best paired with screen readers. Secondly, you can also leverage aria-label on tags to extend link descriptions. Lastly, if you want to give a short-handed display, you can simply use CSS content property all while having the HTML manage the more descriptive message. This allows us to avoid redundant verbiage like ‘click here’ and ‘read more’ for better screenreader use.
6. Form elements
Always identify required fields beyond color alone; the use of asterisk works well with labels.
Requirements for form elements should be displayed upfront prior to submission “Use DD/MM/YY”
Every input should have a label it’s associated with and placeholders should not be used as a label. Labels with a “for” are linked with inputs of identical “id” values.
On submission of a form provide clear feedback for errors on each input. A nice to have also is when on unfocused elements a warning message is displayed.
There might be cases where the label is not needed (exp. a search input), however, the label must be included but hidden with CSS styling.
To associate an additional message on a form control, adding an id=”dob1” to the span element along with aria-describedby=”dob1” is necessary to associate pragmatically with the field.
7. Images
All images should have an alternative text describing the image in 1–2 sentences
8. Input types
It’s encouraged to leverage the proper type’s in inputs to provide keyboards elements on all devices but specifically mobile devices.
9. Use Accessible Rich Internet Applications (ARIA)
Aria-label’s are used to read out the text with a screenreader.
10. Radio button click
You should be able to select a radio button by clicking the text as well
11. Orientation
Horizontal orientation should work, and no horizontal scrollbar should be shown on mobile.
12. Autocomplete
Using autocomplete to autofill forms intelligently is a huge benefit to reduce page navigation and promote accessibility assistance.
13. Tooltips should be displayed
Tooltips should not disappear when focused due to a timer.
14. Event clicks
Accessibility events should be used correctly. onkeyup() events or onmouseup() are more accessibility friendly than onkeydown() and onmousedown() events.
There you have it. Make sure to keep a note of all 14 steps as I’m pretty sure they’ll be useful for your team sometime down the road. All in all, building for all users through these accessibility tips is possible as seen with Infewence and many other sites that’ve met accessibility AAA requirements.
