designing and developing for accessibility

Designing and Developing for Accessibility

1100 West Street, Laurel MD 20707 T 301-939-1000 F 301-953-2368 Aquilent com

GENERAL USER-CENTERED DESIGN PROCESS

Color Contrast

Color Contrast: Footer Text And Background Color

• One example of a site that was designed and developed, but had not passed WCAG 2.0 accessibility guidelines, was BeTobaccoFree.gov.

• In this example, the footer text and background color did not meet the recommended color contrast ratio of 4.5:1.

• For more information, see WCAG 2.0 guideline 1.4.3.

• This one color contrast issue involved a brand color and was a site wide

Color Contrast: Correct Contrast Ratio

• We resolved the issues by unifying the footer text color and choosing a deeper shade for the Features links to achieve the correct contrast ratio.

• However, had we needed to change the brand color, this would have involved a designer, developer, tester, project manager, as well as the client's approval.

Color Contrast: Designing with Accessibility in Mind

• Here's an example of a site that we collaborated on from the beginning, keeping accessibility in mind right off the bat. It's MentalHealth.gov.

• We ensured that certain brand color combinations achieved the 4.5:1color contrast ratio from the start.

Color Contrast

Colors & Symbol Association

Color & Symbol Association: User Interface Design

• Shown here is a user interface design from Usability.gov. This site used color association to identify its content.

• But, there is a WCAG 2.0 requirement in which color-alone, shape-alone, or location-alone cannot be used to convey information.

• For more information, see WCAG 2.0 guideline 1.3.3.

Color & Symbol Association: Symbols, Color & Headings

• So early on, we added in symbols to supplement the color association.

• This relationship aids colorblind users in identifying content.

• We also added categorical headings to help users of assistive technology.

Developing with Accessibility in Mind

• Considered functionality and accessibility of content using gestures, keyboard, mouse, and assistive technologies.

• Identified implications of creating a responsive site.

• Created a custom 508-compliant Drupal base theme.

• Standardized our template approach.

Colors & Symbols Association

Audio Contrast

Audio Contrast BeTobaccoFree.gov/DontStart

• For the BeTobaccofree.gov/Don'tStart page, our client wanted to have the user experience a group of high school students discussing reasons why they would not start smoking.

• Given that sound would be involved to relay information, we connected with Cris Broyles, our 508 Lead, to find out about accessibility issues related to audio-driven information and learned that there are best practices related to audio contrast (20 dB between background and foreground sounds).

• So, the sound files needed to be constructed in layers.

• An example of insufficient audio contrast can be heard here: http://www.w3.org/WAI/PA/2011/WD-WCAG20-TECHS-20110310/working-examples/G56/Bad-contrast.mp3

Audio Contrast:Engaging, Interactive, and Responsive Design

So what we ended up with was something that was really engaging, interactive, and responsive, but also accessible:• To accommodate deaf individuals, the quote

is present which can be read.• To accommodate blind individuals the audio

is present which can be listened to.• To accommodate hard-of-hearing individuals,

a 20dB audio-contrast is present to make the foreground voice more distinct.

For more information regarding audio contrast, see WCAG 2.0 guideline 1.4.7.

Keeping that in mind, from a design perspective, we started with an image of a group of high school students in casual discussion. We created a visual cue to the user that more information was available to interact with. Once the orange icon is selected, a speech bubble is revealed with a quote from a student shown, followed by the quote spoken by the student.

Audio Contrast

Auto-Rotating Carousel Alternatives

Auto-Rotating Carousel Alternatives: Featured Tiles

• One alternative to are feature tiles or cards, as seen on BeTobaccoFree.gov.

• Keeping the number of feature tiles to three or less minimizes the cognitive load.

Auto-Rotating Carousel Alternatives: Billboard

• “Let the user drive” was the thought behind this billboard alternative. We designed a user driven billboard that creates a more positive experience, as the user decides what featured topic they would like more information on.

• The page does not automatically refresh every time the billboard changes.

Auto-Rotating Carousel Alternatives

Control & Access To Content

Control & Access To Content: Best Practices

• One commonly overlooked best practice is to make sure your controls are present and keyboard accessible. That includes labeled arrows and buttons to allow access to scrolling content, play and pause buttons, etc. Also, make sure there is captioning and that it is correct.

Control & Access To Content: When something cannot be made accessible provide a

comparable access to information. • Shown here is a map that individuals can

click on to get information and locations of mental-health treatment centers through a search box. This was an important component to the MentalHealth site, so, the challenge we had to overcome was how to make this accessible.

• To provide comparable access to the same information, the same query not only populates the map with visual information but that same information also populates in sortable table format that is accessible to users of assistive technology.

Control & Access To Content

Revised User-Centered Design Process

TOOLS FOR TESTING ACCESSIBILITY

• Color blindness tool:Seewald Solutions Color Blindness Tool

• Color contrast tool:http://www.paciellogroup.com/resources/contrastAnalyser

• Color contrast & palette selection tool:http://snook.ca/technical/colour_contrast/colour.html

• Audio contrast tool:http://audacity.sourceforge.net/download/

• ChromeVoxhttp://www.chromevox.com/

Analysis

OTHER DEVELOPMENT TOOLS:

• Firefox Accessibility Evaluation Toolbar

• Web Accessibility eValuation Tool (WAVE)| http://wave.webaim.org/

• These tools allows developers to test and address 508 questions early in the process.

OTHER EXAMPLES OF ACCESSIBILITY:

• Example of site with ARIA:www.youtube.com/watch?v=3c8iXoomc2Y

• Example of site without ARIA:www.youtube.com/watch?v=CypVC6FgMC8

• Practical ARIA Examples:http://heydonworks.com/practical_aria_examples/

Thank You!

Cris Broylescristopher.broyles@aquilent.com

Rob Ellisrobert.ellis@aquilent.comTwitter: Rasta00

Christine Armstrongchristine.armstrong@aquilent.com