An actionable list of basic steps you can take to make your web site more accessible.
- Use proper semantic HTML markup:
-
“Before considering other options, start with markup that semantically describes the content it is wrapping.” – https://css-tricks.com/aria-spackle-not-rebar/
- Buttons vs. Links:
(NOTE: Ideally buttons should be styled visually as buttons while links should be styled visually as links but that’s not always practical for matching visual designs together with functionality requirements.)- No href = Use a button element. If necessary, style like a link and include matching aria-role. (Do not use div or other random tags!)
- Has href = Use an anchor tag. If necessary, style like a button and include matching aria-role. (Do not use div or other random tags!)
- More info: https://s3-us-west-2.amazonaws.com/sofi-static/shared-styles/release/docs/components.html#sub-aaaa-AccessibleButtons
-
- Include text for all meaningful visual elements.
- All images should have “alt” tags:
-
- Alt text should be meaningful and useful.
-
- DO:
<img src="acme-logo.png" alt="Acme">
- DO NOT:
<img src="acme-logo.png" alt="Company Logo">
- DO:
-
- If the image is redundant or primarily decorative, leave alt value empty:
<img src="pretty.png" alt="">
- Alt text should be meaningful and useful.
-
- Use image replacement techniques to include text inside tags for icons, etc. or else use an aria-label attribute to label the element.
- All images should have “alt” tags:
- Ensure text and background colors are AA compliant. (includes meaningful visual elements such as icons)
Test tool: http://accessible-colors.com/- text: minimum contrast: 4.5:1
- “large” 18 point or 14 point bold text: 3.1
- Make forms accessible.
- Use label tags properly.
- Use either fieldset and legend tags for groups of inputs, such as radio inputs or use ARIA and role attributes.
- Use aria landmark roles for main areas of page content.
If you use semantic markup, the need for some of these is lessened.
See: https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties
See also: http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html- Useful:
- role=”banner” (Use on main page header of site. Only one per page.)
- role=”contentinfo” (Use on main page footer. Only one per page.)
- role=”search” (Use on search forms.)
- Not needed with semantic markup:
- role=”form” (Not needed if you use a “form” tag.)
- role=”complementary” (Not needed if you use “aside” tag)
- role=”main” (Not needed if you use “main” tag. Only one per page.)
- role=”navigation” (Not needed if you use “nav” tag.)
- Useful: