Mission: Accessible

#npa11y

Share & Connect Online with Everybody!

MAP and MAP TechWorks• Consulting and training for nonprofit, social

enterprise and philanthropic organizations• MAP TechWorks is our nonprofit technology

learning and networking community• Free and low cost workshops,

email support group, and video interviews at www.maptechworks.org.

What is web accessibility?

Interface independence:

Content is not dependent on the tools used to access it.

What is accessibility?

None of these should be required on a website:● Keyboards● Mice● Monitors● Desktop computers

Who does it benefit?

● People with vision disabilities● Deaf and Hard of Hearing users● Color-blind users● Users with cognitive impairments● Users with mobility impairments

Who does it benefit?

Accessibility helps everyone.● Users of smart phones and tablets● Users in brightly lit rooms● Impatient users● You. Me.

Do I need an accessible site?

Yes.

It’s the law. It helps SEO.Above all, it’s the right thing to do.

Who defines “accessible”?

Accessibility on the web is a wild and wooly place:● Mostly unprotected by law● Different solutions for different disabilities● Filled with contradictory and confusing

information

Who defines “accessible”?

Much of accessibility is subjective (to the user, not you).

Know what’s testable and objective.

What level do I need?

Standards have diverse measurements; different users have different needs.

Do everything you can reasonably afford to do.

Test: Keyboard navigation

How: unplug your mouse.

Can you navigate to every link using the tab key?

Can you tell where you are?

Test: Keyboard navigation

1) Tab2) Look

“Skip to content” links

● Who are these for?● What does it do?

Quick Fix: Keyboard accessibility

● Most problems come from styles● Search your stylesheet; find a:hover● Replace with a:hover, a:focus

Test: Alt text

Alt text is a text alternative for non-text content (such as images)

Turn your browser’s images off.Is there any information missing?

Alt text

“Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.”

- WebAIM (Accessibility in Mind)

Alt text

True or false:Every image requires alt text.

False.

Alt text: is it needed?

Is the image decorative or essential?

If image is decorative, use alt=""

Alt text: is it needed?

If the content of the image is described insurrounding text,such as a caption,you might chooseto use alt=""

Alt Text

What words to use?

What is the image’s content?

What is its function?

Alt Text

If an image is a link, it has to have alt text.

If it doesn’t have alt text, it’s not clear what the screen reader will do.

Alt Text Examples

Image displayed

http://www.mnhs.org/

Alt Text Examples

Image not displayed

http://www.mnhs.org/

Alt Text Examples

Image not displayed; better alt text

http://www.mnhs.org/

Alt Text Examples

Ad with image displayed

http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free-concert-series-begins-january-5/

Alt Text Examples

Ad with images off: no info.

But the text doesn’t require design. The only things that are design are the background (which could be just color) and the image at the bottom.

http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free-concert-series-begins-january-5/

Alt Text Examples

Infographic with image displayed

http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics

Alt Text Examples

Infographic with images off: What should they have done?

http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics

Quick Fix: Alt Text

Sometimes, it’s not obvious.

Don’t forget email!

Prioritize. What are the consequences for not fixing?

Test: Check Color Contrast

Scan site:● Juicy Studio Color Contrast Analyser● WebAIM WAVE tool

Test: Check Color Contrast

Firefox add-on: WCAG Contrast Checker

Spot Check Color Contrast

Firefox: colorPicker add-onChrome: Native element inspector

Numerous applications for your operating system.

Solving Color Contrast Problems

Get suggestions: http://contrast-finder.tanaguru.com

Test color combinations:https://joedolson.com/tools/color-contrast.php

Test: Video Accessibility

Captions: text version of spoken words and sounds

Video Accessibility

YouTube’s auto captions:Always review them!

Tip: use auto captions for time points, then revise

Video Accessibility

Audio description: not the same as captions.

Audio descriptions are needed for users with visual disabilities when the audio track isn’t enough.

Video Accessibility

Audio descriptions: Narrator describes what is happening.

http://youtu.be/yuh35uYxQJU

Video Accessibility

Test the player you’ll be using● on YouTube ≠ embedded on your site● Check keyboard accessibility● Check caption support

Form Labeling

Forms have two key parts: inputs and labels● Every input must have a label● Every label must be explicitly connected to

an input

Form Labeling

The screen reader experience is hugely affected by missing labels.

Form Labeling: No Labels

Form Labeling: Correctly Labeled

Form Labeling Test

Keyboard test:Click on the label, then start typing.

http://dev.joedolson.com/form-good.htmlhttp://dev.joedolson.com/form-bad.html

Fix: Inclusive Content

Skimmable content? No.

Inclusive Content

Skimmable content?Yes.

http://opportunities.org/program-referrals/residential-options/

Inclusive Content

Meaningful link text? No.

Quick Fix: Open in New Window

Check for and remove:target="blank"

Exception: when interrupting a task would interfere with completion.

Inclusive Content

Color should not be youronly way to convey info

Inclusive Content

● Avoid locationally driven text such as “see the image at the right”

● Use clear language● Be aware of acronyms and abbreviations● Use all-CAPS sparingly

Summary

It is subjective.It is time-consuming.Prioritize.It will never be perfect. But you can get closer.Knowing the issues is more than half the battle.

Questions?

Joe Dolsonjoedolson.com@joedolson

Crystal Colby Mulry@ccolby

Accessibility Resources

Accessibility is a mindset, not a checklist

WebAIM: Simplified summaries, recommendations. Extensive documentation on almost every accessibility topic: http://webaim.org

Accessibility Resources

WCAG Recommended Techniques: highly technical, though simpler than the WCAG itself. http://www.w3.org/TR/WCAG-TECHS/

University of Minnesota, Duluth Web Design References: Extensive curated catalog of accessibility articles on the web: http://bit.ly/t3tPZC