Mission: Accessible. Share & Connect Online with Everybody!
Post on 07-May-2015
138 Views
Preview:
DESCRIPTION
Transcript
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
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 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
top related