Web Accessibility 101

An actionable list of basic steps you can take to make your web site more accessible.

1. 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
2. Include text for all meaningful visual elements.
   • All images should have “alt” tags:
     1. • Alt text should be meaningful and useful.
          1. • DO:
               <img src="acme-logo.png" alt="Acme">
             • DO NOT:
               <img src="acme-logo.png" alt="Company Logo">
        • If the image is redundant or primarily decorative, leave alt value empty:
          <img src="pretty.png" alt="">
   • Use image replacement techniques to include text inside tags for icons, etc. or else use an aria-label attribute to label the element.
3. 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
4. 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.
5. 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.)

Advertisement

Posted by kristinlbradley on March 25, 2018

https://kristinlbradley.wordpress.com/2018/03/25/web-accessibility-101/