Make your content accessible: ConfabCentral 2014

48
Make your content accessible

description

Content strategists are in a unique position to effectively champion accessibility within their teams and organizations. You are trusted advisors and connect with all the right stakeholders for a project, including the people that will use the product you're building. You are often the person that connects the big picture with in the trenches hands-on work. Filled with practical advice and examples from real projects, this session will provide you with an in-depth look at accessibility requirements for content on the modern web, recognize opportunities for ensuring that your work and that of your teams is as accessible as it can be as you integrate accessibility into your overall process. You'll learn: * How people with disabilities use the web and how that influences your content and its consumption * How you can use accessibility as a tool to simply create content that is better for everyone * Four cornerstone principles of accessibility that should guide all your content creation

Transcript of Make your content accessible: ConfabCentral 2014

Page 1: Make your content accessible: ConfabCentral 2014

Make your content accessible

Page 2: Make your content accessible: ConfabCentral 2014
Page 3: Make your content accessible: ConfabCentral 2014

Derek Featherstone

[email protected] @feather

Page 4: Make your content accessible: ConfabCentral 2014

• blind • low-vision • hearing • mobility/dexterity

(fine motor control, low-strength, single-handedness)

• cognitive (memory-related, literacy, routines/

predictability, attention) • vestibular issues • speech

Page 5: Make your content accessible: ConfabCentral 2014

Typical content accessibility issues

Page 6: Make your content accessible: ConfabCentral 2014

• use plain language • check reading level/readability scores • expand abbreviations on first occurrence

Page 7: Make your content accessible: ConfabCentral 2014

We create more accessible solutions through better content, design, and

development.

Page 8: Make your content accessible: ConfabCentral 2014

We create more accessible solutions through better content, design, and

development.

Page 9: Make your content accessible: ConfabCentral 2014

LESSON 1Provide great document structure

Page 10: Make your content accessible: ConfabCentral 2014
Page 11: Make your content accessible: ConfabCentral 2014
Page 12: Make your content accessible: ConfabCentral 2014
Page 13: Make your content accessible: ConfabCentral 2014
Page 14: Make your content accessible: ConfabCentral 2014

LESSON 2Provide orientationand way-finding cues

Page 15: Make your content accessible: ConfabCentral 2014

12** This bank has been anonymized to protect the innocent.

Page 16: Make your content accessible: ConfabCentral 2014

• Where am I?(title of page, headings)

• What happens if…? (call to action, button/link)

• What just happened?(title page, headings, dialog titles, next text/tab stop)

Page 17: Make your content accessible: ConfabCentral 2014
Page 18: Make your content accessible: ConfabCentral 2014
Page 19: Make your content accessible: ConfabCentral 2014

LESSON 3Perfect your text alternatives

Page 20: Make your content accessible: ConfabCentral 2014
Page 21: Make your content accessible: ConfabCentral 2014

What’s the call to action?

Page 22: Make your content accessible: ConfabCentral 2014

<a href="javascript:void(0);">! <img src=“images/homepage_tool_programs.png”! alt=“visit">!</a>

Page 23: Make your content accessible: ConfabCentral 2014

Calls to action must match!

Page 24: Make your content accessible: ConfabCentral 2014

LESSON 4Decide which images are content.

Page 25: Make your content accessible: ConfabCentral 2014
Page 26: Make your content accessible: ConfabCentral 2014

Windows High Contrast Mode: background images disappear.

Page 27: Make your content accessible: ConfabCentral 2014

LESSON 5Understand contextbefore you write.

Page 28: Make your content accessible: ConfabCentral 2014

What is the purpose of the image?

Page 29: Make your content accessible: ConfabCentral 2014

What is the purpose of the image?

Page 30: Make your content accessible: ConfabCentral 2014

LESSON 6Facilitate multiple methods to achieve the same goal.

Page 31: Make your content accessible: ConfabCentral 2014

Use captions, transcripts AND external links.

Page 32: Make your content accessible: ConfabCentral 2014

LESSON 7Create content specifically for people with disabilities.

Page 33: Make your content accessible: ConfabCentral 2014

What influences decision making? What content is needed?

Page 34: Make your content accessible: ConfabCentral 2014

LESSON 8Write front-loaded content.

Page 35: Make your content accessible: ConfabCentral 2014

Front-loaded content

Page 36: Make your content accessible: ConfabCentral 2014

<img src="../Thumbnail.png" alt="TapType">

Page 37: Make your content accessible: ConfabCentral 2014

<img src="../Thumbnail.png" alt="Video: Features of the TapType keyboard" />

Page 38: Make your content accessible: ConfabCentral 2014

<img src="../Thumbnail.png" alt="Video: TapType keyboard features" />

CONTENT TIP Front-load content to help those consuming LINEARLY

Page 39: Make your content accessible: ConfabCentral 2014

LESSON 9Think: Minimum Viable Interaction

Page 40: Make your content accessible: ConfabCentral 2014

• What if someone only reads the headings? • What if someone only reads the links? • What is someone only looks at the pictures?

Page 41: Make your content accessible: ConfabCentral 2014
Page 42: Make your content accessible: ConfabCentral 2014
Page 43: Make your content accessible: ConfabCentral 2014

USE HEADINGSTO YOUR ADVANTAGE

Page 44: Make your content accessible: ConfabCentral 2014
Page 45: Make your content accessible: ConfabCentral 2014
Page 46: Make your content accessible: ConfabCentral 2014

Each of these lessons is informed by one of four core principles of accessibility.

Page 47: Make your content accessible: ConfabCentral 2014

erceivable perable nderstandable obust

POUR

Page 48: Make your content accessible: ConfabCentral 2014

Derek Featherstone

[email protected] @feather