Common accessibility guidelines for UI development
An accessible website gives the access to information and interaction for many people with disabilities. Hence all the UI developers should take care of it while developing there webpages.
Below are some points that one can take care for developing a accessibility compliant pages:
1. Ensure sufficient contrast between text and its background.
The contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.
contrast checker tool: https://webaim.org/resources/contrastchecker/
2. Alternative Text for Images
Images should include equivalent alternative text (alt text) in the markup/code.
3. Use labels or instructions with form fields and inputs
Use <label> element for each form control. Along with valid for value attribute having id of the input element.
For ex: <label id="label2" for="ln1">Last Name</label> <input type="text" name="lastname" id="ln1" value="enter last name">
_Points to Remember: _
Do not provide multiple LABELs for one form control.
ID values must be unique and non empty (Forms use the “id” attribute on the form control so the LABEL element can refer to the control it attaches to with the “for” attribute.)
If using <Fieldsets> tag in forms you must have a non-empty legend tag
4. Ensure Keyboard accessible/navigation All the interactive elements of our page e.g. text boxes, buttons etc should be accessible by keyboard. That means you should be able to bring focus on them by using Tab and Shift+Tab keys.
We need to also ensure that the interactive elements have logical tab-order. Tab order should follow the natural reading sequence. Tips: Use TabIndex property of react for elements or look for carbon storybook for specific tab props name of element.
5. Inform the user that clicking on certain links or areas of a window will open pop-up windows or change the active window
Avoid specifying a new window as the target of a link with the target=”_blank” or target= “_new” attributes of links unless users know that a new window will open.
Add aria-label tag stating it will take user to new window if using _blank or _new.
6. Follow Semantic Structure of html while developing pages:
Ex:
- Do not use text formatting, such as font size or bold to give the visual appearance of headings — use actual heading (h1 — h6) for all content headings
- Use font size, bold, or italics if you want to highlight or emphasize an element within your content that is not a heading, don’t use header to get the visual
- Use list in appropriate manner
<ul>, <ol>, and <dl>
7. Using appropriate widget roles and associating and describing it :
Use aria-label attribute to ensure that element has a name. Use different aria attributes like role, aria-labelledby, aria-expanded, aria-checked etc to help browser compute accessibility properties.
Get Reetesh Singh’s stories in your inbox
Join Medium for free to get updates from this writer.
Each role has different guideline for associating and describing it please verify it from this document (https://www.w3.org/TR/wai-aria-practices-1.1/) while using any of these basic roles (https://www.w3.org/WAI/PF/aria/roles):
- alert
- alertdialog
- button
- checkbox
- dialog
- gridcell
- link
- log
- marquee
- menuitem
- menuitemcheckbox
- menuitemradio
- option
- progressbar
- radio
- scrollbar
- slider
- spinbutton
- status
- tab
- tabpanel
- textbox
- timer
- tooltip
- treeitem
Note: The accessibility guidelines is not limited to above please visit https://www.w3.org/TR/WCAG21/ for detail guidelines.
