Universal Design and Accessibility

sales considerations

Our Process

  1. Start with a Client Specific Plan - define the standard against which to judge the accessibility of the organization's web content (e.g. WCAG 2.0 Level A and AA, plus Section 508)

  2. Perform a Baseline Test and Create an Improvement Timeline

  3. Implement and Test

  4. Stay Ahead of the Curve

Considerations in Estimating Process

  • Specifiy the standard against which to judge the accessibility of the organization's web content (e.g. WCAG 2.0 Level A and AA, plus Section 508)
  • Define clear deliverables to reach that goal
  • Include time in the budget

considerations for Comps

 

Content Items for Client Training

  • ADA-Compliance-Website-Checklist - NWS Blog
  • Training materials for clients on why compliance matters to their organization
  • Training on CKEditor's "Check Accessibility" tool
  • Checklist for content creation
    • Include a site map
    • Images should use alt text unless the image is purely decorative. Decorative images should have an empty alt attribute in the code.
    • Make sure all pages have at least one Heading 1 tag and heading structure is semantic and ordered.
    • PDFs should be tagged
    • Button text should be descriptive
    • Link text should be meaningful (i.e. not "click here")
    • Presentational attributes (such as 'border', 'align', or 'bgcolor') are discouraged. Instead, CSS should be used for styling
    • Contrast of text overlay on images needs to be considered
    • Provide headers for data tables with the <th> element
    • Add a label for all form controls
  • Long-term compliance means on-going content and code considerations and training of new content authors - help organization develop a maturity model
  • Client organization should have a public statement of accessibility compliance, commitment and a way for people to provide feedback
  • Web Accessibility Principles - Quick Reference
  • Checklist to share with clients (PDF)

Resources

Testing tools

NWS working Checklist

From WebAIM: "No automated evaluation tool can tell you if your site is accessible, or even compliant. Human testing is always necessary because accessibility is about the human experience."

Open AllClose All
  Set the language of the page

Add to theme snippets on the globe in Titan Admin.

HTML Tag Namespace Declarations:

lang="en"

https://developers.titancms.com/Developers/Components/Reflex-Snippets.htm

  Color Contrast - foreground/background color contrast should be reviewed especially for global page area (page top, footer).

Many contrast checking tools exists, including:

Firefox add-on for dev sites:

   Link hover/focus - hover states should be indicated with a shape change in addition to a color change (if color is used).

Check social media icons, utility nav, back to top button, etc.

  Check for keyboard access and logical tab order, including top nav drop-downs, mobile menu, share icons, faq accordions, etc. Change in focus should be noticeable, with more than just a color change.

Ensure that all content can be accessed with the keyboard alone.

Resources:

  Input fields and iframes should always have a description.

The most important things you can do to increase the accessibility of frames is to give each frame a descriptive title attribute value.

Resources:

  Skip navigation buttons - when appropriate, update page layouts to include skip nav button for tab users, page top and left nav

Resources:

  Update sliders for improved accessibility (especially pause button and tabbing)

Provide controls for content that starts automatically.

Resources:

  Leverage and be careful no to override user preferences in the browser.

Font size, color, background colors, page zooming, text-to-speech, etc.

  Provide content alternatives

Audio and video should have captions and transcripts

  Timing

Component should allow sufficient time to read and use content. Provide controls for content that starts automatically.

  Creating Accessible components
  WebAIM's table with many of the most common online interactions, the standard keystrokes for the interaction, and additional information on things to consider during testing.

The table below was copied in April, 2018 from https://webaim.org/techniques/keyboard/#testing.

The ARIA authoring practices document provides additional information for these and other common interactions.

Click to enlarge.

Click to enlarge.

top