usability ≠ accessibility. an intro to web accessibility for agencies

Usability ≠ Accessibility. an intro to web accessibility for agencies.

April 30, 2016 Authored by Kate Horowitz k8horowitz at gmail dot com Public version 2

3 common approaches to accessibility:

1. Accommodation. 2. Equivalent Use. 3. Universal Design.

1.  What is accessibility?2.  Accessibility vs. usability3.  Business case4.  Implementation5.  Accessible project strategy6.  Checklist7.  Questions?8.  Appendix

Agenda

What is Accessibility?

Accessibility refers to the degree to which a product, place, service, or website can be accessed & utilized by its users.

Accessibility:

In practice, accessibility is the web’s response to users’ disabilities and impairments.

There are 4 types of physical impairments that affect online access & behavior:

Visual Auditory Motor Cognitive

Difficulty reading small fonts, distinguishing similar colors, or inability to see at all.

Inability to hear audio of videos, or to understand auditory cues.

Difficulty using a mouse, or tapping a finite area on a touch screen.

Inability to understand. Causes may be age related, browsing in a non-native language, cognitive disabilities, or just being distracted.

Kate is a Product Manager. She is in her mid twenties and healthy, but she has very bad vision that can sometimes affect her work. Kate uses visual accessibility features on her mac while at work.

•  Kate spends half to most of her day in front of a computer screen.

•  Kate shops online about once a week.

•  Kate increases the font on every web page she visits, and often has to find an alternate website if the current page’s text size cannot be increased.

•  Kate is a vision impaired user.

Kate.

But physical impairments aren’t the only things excluding users.

Infrastructure impairments can also affect online access & behavior.

Connection Old equipment Mobile–only Cost

Low bandwidth means difficultly downloading media content.

Older browsers break some code; old monitors are harder to read.

Mobile users experience high latency, smaller screen size, and slower processors.

Some users turn off resource-taxing web features for lower connection charges.

Mobile–only

Itwillsoonbeoutdatedtocallmobile-onlyaccessaninfrastructureimpairment.Ifyou’realreadyfollowingmobile-firstprinciples,thismayalreadybeuntrue.Infact,pre<ysoonwemightstartthinkingofdesktop-onlyusersasimpaired,tetheredtomachinesthatcannotmakeuseofgeo-loca>onfeatures,touch,orbeacons.

Update:

Ludwick is an entrepreneur from Limpopo who invented DryBath, a waterless bathing product that provides a sanitation option to those without fresh water. DryBath also prevents diseases such as Trachoma, which affects 350 million each year.

•  Inventor of DryBath•  Wrote a patent and a 40 page business

plan on his cell phone.

•  Only internet access was a Nokia 6234 cell phone connected to wireless at an internet café.

•  See his TED talk here.•  Ludwick is a mobile-only user.

Ludwick.

“Everyone operates under some kind of duress that degrades their

performance.”

Source: A Web for Everyone ( 2013)

The deficit between user and system capability.

Disability:

Is it the responsibility of the system, not the user, to bridge that deficit.

System. Users.

Accessibility vs. usability.

Usability and accessibility often overlap, but they are not the same thing.

Device-centric. Device agnostic.

Accessibility. Usability.

Usability.

Accessibility.

Adaptive Technology.

The focus on system extensibility to a wide variety of devices is the key difference between accessibility and usability.

Business case.

Some companies, especially financial companies, are required by law to comply with accessibility guidelines.

But there are strong business cases for making your project accessible, even if you’re not required to.

There are many direct financial benefits: •  Interoperable code for devices and new technology can reduce

tech maintenance costs

•  Broader user reach

•  Higher SEO *

•  Reduce support costs by providing more users with online info, which is cheaper than call center or email support

•  Reduce legal risk and avoid costly legal fees down the road

* Source: Article by Liam McGee (August 6, 2009)

http://www.communis.co.uk/blog/2009-08-06-seo-and-accessibility-overlap

1 in 4 U.S. adults aged 16 to 64 have a dexterity (motor) difficulty or

impairment.

1 in 4 U.S. adults aged 16 to 64 have a visual difficulty or

impairment

1 in 5 U.S. adults aged 16 to 64

have a hearing difficulty or impairment.

Key stats

Source: Study commissioned by Microsoft, conducted by Forrester Research, Inc., 2003

31% Of U.S. adults access the internet

primarily on a mobile device.

Key stats

Source: Study by Pew Research, 2012,http://www.pewinternet.org/2012/06/26/cell-internet-use-2012

62% Of U.S. adults, aged 16 to 64, are likely or very likely to benefit from the use of accessible technology.

Key stats


“The findings in this study show that the majority of [U.S.] working-age adults

are likely to benefit from the use of accessible technology.”


So how do we turn this information into practical, actionable tasks that result in an accessible product?

Implementation.

Guidelines. Implementation

Guidelines define what needs to be done to make the product as accessible to as many users as possible.

Guideline:

Guidelines come from two places: W3C-WAI (“Web Accessibility Initiative”) and Governments.

This is what a guideline looks like.

Guidelines are organized in 2 key ways:



Accessibility guidelines are organized by:

1. Product. 2. Principle.

What are you making? A website? A content management system? An application, such as a multi-player game?

Product:

Type of product Which includes things like…

Website •  text, images, and sounds •  code or markup that defines structure, presentation, etc.

Rich Internet Applications •  dynamic content •  advanced user interface controls developed with Ajax, JavaScript, etc.

Authoring tool •  Content Management Systems (CMS) •  WYSIWYG editors •  sites that let users add content, such as blogs, wikis, and social

networking sites

User agent •  browsers •  media players •  assistive software

Something interactive with lots of gestures

•  scrolling behaviors that could be performed with a scroll wheel or a finger swipe

Type of product Should follow these guidelines…

Website WCAG “Web Content Accessibility Guidelines”

Rich Internet Applications ARIA “Accessible Rich Internet Applications Suite”

Authoring tool ATAG “Authoring Tool Accessibility Guidelines”

User agent UUAG “User Agent Accessibility Guidelines”

Something interactive with lots of gestures

Indie UI “Independent user interface”

It’s important to know that on it’s own, WCAG ≠ Accessibility.



Accessibility guidelines are organized by:

1. Product. 2. Principle.

What is the end goal?Principle:

Each Guideline document has a slightly different set of principles.

Let’s take a look at the 4 Principles that WCAG Guidelines follow.

Principle Which includes things like…

Perceivable •  Provide text alternatives for non-text content. •  Provide captions and other alternatives for multimedia. •  Create content that can be presented in different ways, •  including by assistive technologies, without losing meaning. •  Make it easier for users to see and hear content.

Operable •  Make all functionality available from a keyboard. •  Give users enough time to read and use content. •  Do not use content that causes seizures. •  Help users navigate and find content.

Understandable •  Make text readable and understandable. •  Make content appear and operate in predictable ways. •  Help users avoid and correct mistakes.

Robust •  Maximize compatibility with current and future user tools.

These Principles provide context for the end goal of each Guideline.

Anatomy of a Guideline.

Implementation

Guidelines are merely goals. Success Criteria are the instructions.

Actionable, measurable, testable.Success Criteria:



Success criteria contain:

1. Conformance Level. 2. Sufficient Techniques. 3. Advisory Techniques.

”Double A”

More difficult to pull off,

but much more accessible.

Almost identical to Section

508, and other

government standards,

and is the most common

level to build for.

AA. “Level A”

Basic, easy stuff you can

do to try to make your site

more easily accessible for

all users.

A. “Triple A”

Is a royal pain in the ass

even more difficult to pull

off, but provides the most

accessible user experience

of all. Your “normal” users

might start to notice

accessible features, which

they probably didn’t notice

in levels A or AA.

AAA.

Conformance Levels:

“Double A”

“Audio description is

provided for all

prerecorded video content

in synchronized media.”

AA. “Level A”

“Captions are provided for

all prerecorded audio

content in synchronized

media, except when the

media is a media

alternative for text and is

clearly labeled as such.”

A. “Triple A”

“Sign language

interpretation is provided

for all prerecorded audio

content in synchronized

media.”

AAA.

Guideline 1.2: Time-based Media

Defines implementation tactics that will meet this Success Criterion.

Sufficient technique:

Preferred tactics that meet and exceed the Success Criterion, and deliver a better user experience.

Advisory technique:

Lets look at the difference between sufficient and advisory techniques, using alt text as an example.

“Picture of a student.”

“A postgraduate engineering student

working in the new electron microscope

lab.”

Ideally, the alt text evocatively describes the content of the image to provide the user with meaningful context.

It’s vital that the team understands the spirit of the Guidelines to ensure quality.

Accessibility Standards Document

Guideline

Success Criterion(A)

Success Criterion(AA)

Sufficient Techniques

Advisory Techniques


Advisory Techniques

Success Criterion(AAA)


Advisory Techniques

Principle 1 Principle 2

Guideline




Advisory Techniques


Advisory Techniques



Advisory Techniques

Guideline




Advisory Techniques


Advisory Techniques



Advisory Techniques

Anatomy of an Accessibility Guidelines document.

Technical approaches.

Implementation:

There are 3 common technical approaches to meeting accessible Success Criteria.



3 common approaches to Accessibility:


Creating a separate, accessible version of the site, similar to creating a mobile-only site version.

Accommodation:

”Separate but equal“ is wrong.

Accommodation:

Same product, with alternative presentations of the same information.

Equivalent use:

One site, same content, works for everyone.

Universal design:

There are multiple approaches to meeting Success Criteria; some provide higher user value than others.

Accessible project strategy.

“You’ve convinced me. But how do I make my project accessible?”

Recommendation.

Determine which accessibility conformance level, if any, you are

required to meet.

Conformance audit. Design.

Development. Quality assurance. Content strategy.

Identify business goals & target users and recommend an accessible

strategy for them.


required to meet.

Design.


Recommendation. Conformance audit.


strategy for them.

Craft a solution that includes accessible visual design and

interactions.


required to meet.


Recommendation. Design. Conformance audit.


strategy for them.


interactions.

Involve Content Strategy in all aspects of copywriting, from

marketing to metadata, to ensure

accessibility requirements are met.


required to meet.

Development. Quality assurance.

Recommendation. Design.

Content strategy.

Conformance audit.


strategy for them.


interactions.

Ensure that code is semantically structured and includes accessibility

attributes.





required to meet.

Quality assurance.


Development. Content strategy.

Conformance audit.


Development.

Test with assistive devices and common accessibility software to

ensure a positive user experience.

Quality assurance. Content strategy.

Conformance audit.


strategy for them.


interactions.

Ensure that code is semantically structured and includes accessibility

attributes.





required to meet.

The earlier we understand accessibility requirements, the easier and cheaper they are to implement.

When accessibility is incorporated from the beginning of a project, it is often a small percentage of the overall project cost.

Checklist.

Use the following checklist at the beginning of a project to see if you will have accessibility requirements.

Does this sound like your client? 1/3 q Is the client a financial institution?

q Is the client currently mandated by law to meet an accessible standard?

q Is this client subject to broader legislation about discrimination or equal opportunity?

q Might this client be subject to legal or policy changes in the future?

q Does this client have a corporate policy that includes accessibility?

Does this sound like your client? 2/3 q Is the client a government agency?

q Might they do business with a government via this site?

q Does the client receive government funding?

q Is the client an educational institution?

q Is the client a non-profit that might accept government funding in the future?

Does this sound like your client? 3/3 q Does good PR rely on inclusivity for this client?

q Does this client promise to provide equal opportunities?

q Will many of their users be positively affected by accessibility?

q Does this client plan on using this site for a long time? (greater than 2 years) Often, coding for accessibility means your site can more easily keep up with browser updates and newer technology.

q Does their content heavily rely on inaccessible formats (i.e. video) to relay information?

If you said “yes” to any of the checklist items, there is a good chance that your client requires an accessible product.

If you didn’t say yes to any, can you confidently say “yes” to this: q  Does the client understand and accept the

risks of failing to provide an accessible website?

Questions?

Appendix.

Resources. Appendix:

Resources: • Web Accessibility Initiative Homepage.

• WCAG 2.0

• Understanding the Four Principles of Accessibility.

• Understanding Levels of Conformance.

• Essential Components of Web Accessibility.

• “A Web for Everyone: Designing Accessible User Experiences.” [book]

• Accessibility Confluence Space. [internal wiki]

• “The user is drunk“ Hupspot.com review. [blog + video]

Referenced documents: • “The Wide Range of Abilities and it’s Impact on Computer Technology.” A Research Report Commissioned by Microsoft Corporation and Conducted by Forrester Research, Inc. 2003. [PDF]

• “SEO and Accessibility Overlap.” Article by Liam McGee. August 6, 2009. [Web article]

• “Cell Internet Use 2012.” Study by Pew Research. 2012. [PDF]

• “Accessible Information and Communication Technologies: Benefits to Business and Society.” OneVoice for Accessible ICT. 2009-2010. [PDF]

Glossary. Appendix:

Presentation definitions : (1/3) •  Accessibility refers to the degree to which a software

product, place, service, or website can be accessed and utilized by it’s users.

•  Disability: The deficit between user and system capability. (proposed definition.)

•  Guidelines define what needs to be done to make the product as accessible to as many users as possible.

•  Success Criteria are the instructions for fulfilling a Guideline, and they are actionable, measurable, testable.

Definitions: continued 2/3. •  Sufficient Techniques define implementation tactics that

will meet a Success Criterion.

•  Advisory Techniques are preferred tactics that meet and exceed the Success Criterion, and deliver a better user experience.

•  Accommodation: Creating a separate, accessible version of the site, similar to creating a mobile-only site version. In this author’s opinion, accommodation is bad because it creates separate, and likely not equal, experiences.

Definitions: continued 3/3. •  Equivalent use describes one product that has alternative

presentations of the same information.

•  Universal Design: One site, same content, works for everyone.

Assistive tech. Appendix:

Assistive technology can be anything from a braille display to reading glasses. It’s just the extra things we use to get stuff done.

Here are some examples of what it’s like to rely on more advanced assistive technology to access the internet.

Assistive tech demos: •  In this refreshable braille display demo, Bruce explains how he

shops on Amazon.com. Length is 6:42. Link opens YouTube.

•  Tommy the blind film critic demos how blind people use an iPhone. Length is 3 minutes. Link opens YouTube.

•  Joel is quadriplegic, and he demos how he uses a mouth stylus to type (really fast!) in this video. Length is 3 minutes. Link opens YouTube.

Assistive tech demos: •  Michelle has limited use of her arms, so she uses a trackpad

with her nose to create professional design work. Check out how she does it in this video or read about it in this blog post. Video length is 1:30, might play an ad first. First link opens YouTube.

•  Here is a great screen reader demo. Length 9:30. Link opens YouTube.

•  Here’s a quick blog post about common barriers for deaf web users, such as videos and audio alerts. No video at this link.

Assistive tech demos: •  Here are some personas that illustrate some other common

user impairments, and how it affects their online behavior. Link opens a website.

•  Check out this chrome extension that allows you to view websites the way color blind users see. Allows you to toggle between 9 different types of colorblindness. If you can’t see, you can listen to what it’s like to be color blind in this video. Ad may play before video. Length is under 3 minutes. Link opens YouTube.

Assistive tech demos: •  Here is a humorous promotional video about a Video Relay

Service that includes in-browser video conferencing to an interpreter that can “speak” sign language. This is less common now that video phones are mainstream, but still very much in use by the deaf community. Video is 1 minute 35 seconds, and does not have audio. Link opens YouTube.

•  If you cannot see the video at the link above, this Wikipedia article can tell you a little more about Video Relay services.

Assistive tech demos: •  This video shows how Johann uses screen magnification

software. Length is 9 minutes. Link open YouTube.

•  One assistive feature that most of us are familiar with is closed captioning, but here is a link to the Wikipedia article if you are not familiar. You can also check out this TEDx talk about how the legal focus on quantity, and not quality, of captioning means that captioning is failing to serve the deaf community. Video is 10 minutes. Link opens YouTube.

Graphics. Appendix:

Graphics credits: Translation icon designed by Lek Potharam. Definition icon designed by Arthur Shlain. Vision icon designed by Christian Tabacco. Audio mute icon by Vania Platonov.

Graphics credits: Router icon by Ilsur Aptukov. Old computer icon by Evgeny Kiverin. Brain icon by jessie_vp. Mobile device icon by Mourad Mokrane.

Graphics credits: Dollar sign icon by Yarden Gilboa. Wheelchair user icon by José Campos. Audit icon by Miroslav Koša. Recommendation icon by iconsmind.com.

Graphics credits: Design icon by Vijay Sekhar. Quality assurance icon by useiconic.com. Development icon by John Caserta. Content strategy icon by hunotika.

Graphics credits: Braille icon by Iconathon. iPhone icon by Ross Sokolovski. Gear icon by Reed Enger.