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:
  2. 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">
        • 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.)
Advertisements
Previous Post
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s