Paul Lehnert, Content DevelopmentTamara Shores, Visual DesignRoger Somazzi, Software Testing and Quality Assurance

www.xxx.com• Slide deck• List of tools

Accessible health education: Setting it up from scratch

• Nonprofit with 270 employees• Offices in Boise, Boston• Health content used by over 250 clients • Mission-driven for 40 years: “Help people make better health decisions”

About Healthwise

Content synopsiso 13,123 Medical Topics

• Health-Condition Topics• Symptom Topics• Decision Aids• Step-by-Step “How To”• Interactive Tools• Videos• Images• Slideshows• And more …

Goals

o Make existing content more accessibleo AA: WCAG (Web content accessibility

guidelines) o Set up processes to ensure that content

stays accessible and that new content is accessible

First stepso Get a leadero Find expertso Do auditso Get toolso Define scope

Visual design

1. Learn through sharing

2. Use tools

3. Rinse & repeat

Learn through sharing

Design to the parameters

A web for everyone

https://uxmag.com/articles/book-excerpt-a-web-for-everyone

Inexperienced users

Unfamiliar device

Emotionalor cognitive

loads

Distracting or stressful settings

Parameters that are important to health care

Use tools

Test as you design

Test as you design

https://www.paciellogroup.com/resources/contrastanalyser/

Rinse & repeat

Create rules

Use components

Content

The content world

o What can content do?• Discovery through audits• WCAG

Test: WCAG areaso 1.1.1 o 1.3.1 o 1.3.2o 1.3.3o 2.4.2o 2.4.4o 2.4.6o 2.4.9o 2.4.10o 3.1.3o 3.1.4o 3.1.5o 3.1.6

Healthwise content focus

o Structure and hierarchyo Linkso Images and alternative texto Tableso Interactive content

Getting it done: The past

o Small team to retrofito Run reportso Decide

• Scope • Work on now• Work within existing processes• Set up new processes

o Informs guidelines and what to teach

Getting it done: The future

o Make content accessible from the starto Bake accessibility into content

development processes• Develop guidelines• Develop checklists• Develop instructions• Modify or set up processes• Train content developers

Guidelines

o Long!o Provide background information

• Why importanto Provide good and bad exampleso Provide specificso Fit our authoring system

Guidelines: Heading examples

Guidelines: Displayed headings

Guidelines: Links

o “If you’re making a decision about a steroid inhaler, it helps to know the facts.”• Good link in context, but it would mean

nothing in a list.• Try something like “Know the facts about

using a steroid inhaler when deciding whether to use one.”

Checklist: Links

Link text should be short and concise. Make sure the link text tells the user what information the

link will provide. Make links “stand-alone.” This means they make sense

even if the link is turned off.

How to

Training

o What is accessibility?o Why is it important?o Targeted presentationso Videos, guidelines, checklists, “how to”o Think and mention accessibility all the time

Summary

o Identify what you need to learn and teacho Make decisions on scopeo Set up small teams to retrofit contento Use existing processes when possibleo Set up processes for the futureo Provide a variety of training tools

• Accessibility content team

Accessibility in development & test

Myths: One

oAccessibility solutions benefit only those with disabilities• Increasing the number of people who can

consume what you have to offer is better

Myths: Two

o Accessibility is hard and expensive• Inaccessible development practices were

inaccessible first (*apps came later)• You already have specialists in your org.

Use them to learn A11y

Myths: Three

oAccessibility won’t succeed unless I have leadership support• Accessibility can be implemented by you,

today (or when you get back to work!)

Our model (dev and test)

oUse basic toolso Improve skills through workshopsoEstablish repeatable standardsoLearn accessibility along the wayo Include every teamoRely on experts as needed

Paciello Web Accessibility Toolbar (WAT)

ohttps://www.paciellogroup.com/resources/wat/

Developer toolbar

o “Accessible” + <what you’re looking for>• Buttons, tables, checkboxes, etc.

Workshops

oAdaptive technologies (i.e., JAWS and NVDA)• Keep them short and on a focused topic

oExamples of inaccessible/accessible pages

oTools: WAT, developer toolbar, etc.oWriting proper accessibility issues

• Code that does and does not work

Workshops

Standard test cases

oKeyboard navigationoFocus indicatorsoPage structure and readabilityoContrast and high-contrast modesoDisabling styling (CSS) & imagesoMedia (videos)oForms and field labelsoAssistive technologiesoMobile

Acceptance criteria

oDocument structureoAlternative textoForm elementsoCaptions and transcriptsoContrast/coloroNon-HTML elementsoLink contentoCustom controls

Acceptance criteria examples

oDocument structureo A disabled user can:

o Skip repetitive page content with linkso Navigate content using headingso See what object has focus at all times

o Alternative texto All non-text content contains meaningful alternative text

oContrast and coloro Pages and their objects (i.e., text) will display with

appropriate contrast, including HCM (high-contract mode)o Information conveyed using color must also be available

by other means (i.e., underlines for links, etc.)

If you made only one improvement..

Launch an immediate action?• Use <button>, not <div>, not <span>

Multiple Choice?• Input type=“radio”

Navigate point A to B?• Link <a href=>

“What is this thing, what does it do?” –Karl Groves (TPG)

<div class….> <button class….>

Grow that knowledge

oThe Paciello Group• https://www.paciellogroup.com

oWebAIM• http://webaim.org• Checklist: http://webaim.org/standards/wcag/checklist• Wave: http://wave.webaim.org/

oW3C web accessibility tutorials• https://www.w3.org/WAI/tutorials/Y

oYou!

Thank you for joining us!

Q & A