Making Accessibility Business as Usual

Stop Thinking About Accessibility

How we can all make accessibility business as usual.

20 May 2015Wendy 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 Stop Thinking About A11y | Code for San Francisco | ©2015 Wendy Moltrup

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 creativeStop Thinking About A11y | Code for San Francisco | ©2015 Wendy Moltrup

Institute Accessibility into Your Culture

The only constant in technology is change.

— Wendy Moltrup, Content andAccessibility 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 ListsUnordered 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”Stop Thinking About A11y | Code for San Francisco | ©2015 Wendy Moltrup

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


<a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a>

<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/

http://www.deque.com/

https://www.wuhcag.com/

http://bit.ly/1F2TvO0

http://bit.ly/1F2TvO0

http://webaim.org/

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_Oba

ma_%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/accessibilityStop Thinking About A11y | Code for San Francisco | ©2015 Wendy Moltrup

https://sites.google.com/a/tc.columbia.edu/elo/home/sample-access-devices

https://sites.google.com/a/tc.columbia.edu/elo/home/sample-access-devices

http://www.regulations.gov/%23!documentDetail;D=DOJ-CRT-2010-0005-0001

http://www.regulations.gov/%23!documentDetail;D=DOJ-CRT-2010-0005-0001

http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx



http://commons.wikimedia.org/wiki/File:Barack_Obama_&_Stephen_Harper_at_lunch_in_Ottawa_2-19-09.JPG%23/media/File:Barack_Obama_&_Stephen_Harper_at_lunch_in_Ottawa_2-19-09.JPG




http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/



http://www.plainlanguage.gov/whatisPL/index.cfm

http://www.plainlanguage.gov/whatisPL/index.cfm

http://webaim.org/articles/cognitive/cognitive_too_little/

http://webaim.org/articles/cognitive/cognitive_too_little/

http://en.wikipedia.org/wiki/Wikipedia:WikiProject_Accessibility/What_is_accessibility?



http://www.w3.org/standards/webdesign/accessibility

http://www.w3.org/standards/webdesign/accessibility