Making Accessibility Business as Usual

Stop Thinking About Accessibility
How we can all make accessibility
business as usual.
20 May 2015
Wendy Moltrup
Stop Thinking About A11y | Code for San Francisco | ©2015 Wendy Moltrup

“The power of the Web is in its universality.”
“Access by everyone regardless of disability is an
essential aspect.”
— Tim Berners-Lee, World Wide Web Consortium (W3C) Director
and inventor of the World Wide Web

First steps to launch an inclusive
accessibility strategy
Let’s make accessibility (a11y)
• Collaborative
• Business as usual

Elements of an Accessibility Strategy
• Allow everyone to own accessibility
• Empower the team with education
• Share a vocabulary
• Integrate accessibility into your brand
• Institute accessibility into your culture
• Build accessibility into your Content
Management System (CMS)

Allow Everyone to Own Accessibility
Someone else is responsible for
accessibility…
Accessibility is in the code, so developers
should take care of it, right?

Accessibility happens during product
planning, content creation, design, and
maintenance
We are all responsible for
accessibility.

Educate Everyone
Categories of disabilities
• Visual
• Auditory
• Physical
• Cognitive
• Seizure Disorders
• Situational disabilities

Educate Everyone
• Types of assistive technologies
• The experience for people who use assistive
technologies
“Humans design for humans"
— Wendy Moltrup, Content and
Accessibility Strategist

Educate Everyone
Education should be fun and easy
• Lunch and learn
• Team meetings
• Online training
• Free resources
President Obama learning at lunch

Educate Everyone
Everyone includes
• Management
• Quality Assurance team
Project documentation must be correct
Seriously, this is a problem

Share a Vocabulary
HTML5 elements
• Header
• Nav
• Section
• Article
• Aside
• Footer
Jennifer Marsman

Integrate Accessibility into Your Brand
Some suggestions
• Editorial style guide
• Writing principles
• Writing how-to
• Brand standards
…be creative

Institute Accessibility into Your Culture
The only constant in technology is change.
— Wendy Moltrup, Content and
Accessibility Strategist
“Once seniors join the online world, digital technology
often becomes an integral part of their daily lives.”
— Pew Research Center
Older Adults and Technology Use

The content team is often overlooked as
a resource and an ally for accessibility
• Content Strategists
• Writers
• Publishers
• Content Management System (CMS)

Content is Everything
Content is text, images, infographics, tag lines,
boilerplate language, blog posts, navigation, data, etc.
People consume your content in many different ways

Writing for Everyone
Do Use
✔ Plain language
✔ Keywords
✔ Consistent navigation
✔ Clear visual or visually
hidden labels
Do Not Use
✖ Undefined acronyms
✖ Jargon
✖ Colloquialisms
✖ Unstructured content
– content blobs

HTML for the Content Team

Content Structure: HTML Headings
“Web designers can easily add headings, which facilitate page navigation using a
screen reader, to their Web pages.”
— Department of Justice, Notice of Proposed Rulemaking on creating accessible websites

Content Structure: HTML Lists
Unordered Lists
<ul>
<li>Headings should always be in order.</li>
<li>Clear headings make it easy to scan…</li>
<li>Headings break up blocks of text</li>
<li>Headings identify content relationships.</li>
<li>What's <abbr title="hypertext markup language">HTML</abbr>?</li>
</ul>
Ordered Lists
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Code Basics: Images
“The most common barrier to Web site accessibility is an image or photograph
without corresponding text describing the image.”
— Department of Justice, Notice of Proposed Rulemaking on creating accessible websites
Image and code from a WebAIM article, Cognitive Disabilities Part 1

Code Basics: Alt vs. Title
In HTML, the text equivalent for an image is defined in the alt attribute
alt=“Side View of a CAT scan of a brain”
From the WebAIM website

Writing Alt Text for Images
What you write for an image’s alt text depends on context.
The alt text relates the function or purpose of the image
The text equivalent either
• Describes the image
• Explains the concept or meaning the image conveys
• Defines the function or action of image, such as the destination
for images that are links
• Tells assistive technology to ignore a decorative image with the
null value (alt =“”)

Writing Alt Text for Images
• Keep it concise, a couple of words or a phrase
• Assistive technologies identify that an element is an image followed by the
alt text – don’t write “image of.” Only when it’s relevant to the meaning of
the image, distinguish the type of image
• Avoid repeating text that’s in the body copy or caption
• Although designers should avoid text displayed as an image, if you
encounter this, the alt text should usually be the text in the image
– logos are an exception
• Mind grammar rules, but use punctuation and typographic symbols
judiciously. Common punctuation such as a comma is okay, but avoid ASCII
symbols. What is read and how varies across technologies

Code Basics: Links
<a href="intro.html" title="Introduction to Techniques for WCAG 2.0”>Intro</a>

Writing Descriptive Links
Descriptive links
• Make sense out of context and the destination clear for users
• Are easier for visual users to recognize
• Are helpful for screen reader users who may listen to a list of links
From the WebAIM website

Writing Descriptive Links
When you are writing link text
• Use keywords towards the beginning of the link text
• In general, write a short description of the destination instead of a URL
• Consider the length of link text as a touch target for users on smaller
devices and users with mobility impairments
• Screen readers announce to users that it’s a link, don’t write “link” in
the title attribute or link text
Reduce the cognitive load for everyone – never make users guess
where they are going

Code Basics: Abbreviations and Acronyms
<abbr title="Introduction">Intro</abbr>

Next Steps for the Content Team
Educate your content team about
• Complex images, graphics and infographics
• Data tables
• PDFs
• Video and audio
• Visual and visually hidden labels
• What makes sense for your company

Resources
• Deque http://www.deque.com/
• Luke McGrath https://www.wuhcag.com/
• SSB Bart YouTube Channel http://bit.ly/1F2TvO0
• WebAIM http://webaim.org/

Contact
Wendy Moltrup
linkedin.com/in/wendymoltrup
@wjinca
Ask questions. Prevent Problems.

References
• Chris Pawelski, Sample Access Devices (no date) https://sites.google.com/a/tc.columbia.edu/elo/home/sample-access-devices
• Department of Justice, Notice of Proposed Rulemaking, Nondiscrimination on the Basis of Disability: Accessibility of Web
Information and Services of State and Local Government Entities and Public Accommodations (2010)
http://www.regulations.gov/#!documentDetail;D=DOJ-CRT-2010-0005-0001
• Jennifer Marsman, HTML5 Part 1: Semantic Markup and Page Layout, MSDN Blog (August 2011)
http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
• Pete Souza, Image of Barack Obama & Stephen Harper at lunch in Ottawa (2009)
http://www.whitehouse.gov/photogallery/working-with-canada/. Licensed under Public Domain via Wikimedia Common
http://commons.wikimedia.org/wiki/File:Barack_Obama_%26_Stephen_Harper_at_lunch_in_Ottawa_2-19-
09.JPG#/media/File:Barack_Obama_%26_Stephen_Harper_at_lunch_in_Ottawa_2-19-09.JPG
• Pew Research Center Internet, Science & Tech, Older Adults and Technology Use, (2014)
http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/
• Plain Language.gov, What is Plain Language? (no date) http://www.plainlanguage.gov/whatisPL/index.cfm
• WebAIM, Cognitive Disabilities Part 1 (2013) http://webaim.org/articles/cognitive/cognitive_too_little/
• Wikipedia, Wikipedia:WikiProject Accessibility/What is accessibility? (2014)
http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Accessibility/What_is_accessibility%3F
• W3C, Accessibility (2015) http://www.w3.org/standards/webdesign/accessibility

Making Accessibility Business as Usual

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Making Accessibility Business as Usual

Similaire à Making Accessibility Business as Usual (20)

Dernier

Dernier (20)

Making Accessibility Business as Usual