Why the Bad Rap?

Why the Bad Rap?Accessibility doesnt have to be a dirty wordDana DouglasTristan Wilsonddouglas@userworks.comtwilson@userworks.com@UserWorks@NoVAUXMeetupNoVA UX Meetup March 15, 2017

1

IntroductionWho we are and why we're here

D2

Who We AreDana DouglasUser Experience Specialist

Silver Spring, MDwww.userworks.com(301) 431 - 0500

Tristan WilsonUser Experience Specialist

D

We are User Experience Specialists at UserWorks in Silver Spring, and as part of our job designing and evaluating user experiences, we consider whether the experiences are accessible to people of all abilities. So accessibility to us means that all users, regardless of their abilities, are able to access the information and complete the tasks that are intended to be completed on a website. 3

Why We're Here4We aren't developers - we just work with them to make websites accessibleWe hope to convince you that accessibility doesn't have to be such a dirty wordThis makes us sad We believe in accessibility, but often it gets a bad rapWe love developers ... but sometimes it seems like they don't love usFeels like some people think our average day goes like this:Wake upRuin everyone's funGive developers more work to do

(TW) We wanted to start off by giving a little bit of context on how this presentation came to be.

First off - We want to emphasize the fact that we aren't developers. We just work with developers to help make their websites accessible.

Second - We love developers, but sometimes it seems like they don't feel the same way. It's a pretty one sided relationship.

It feels like some people think our average day goes like this: 1. Wake up, bright and early 2. Ruin everyone's fun 3. Give developers a whole lot of work to do

...and that makes us kind of sad.

We really believe in accessibility, and it bums us out when it gets a bad rap.

We're hoping that we can convince you that accessibility doesn't have to be a dirty word4

The BasicsWeb accessibility fundamentals

D

Obviously, accessibility can go far beyond just the Internet, but this evening, were going to focus on web accessibility. The tips, techniques, and tools that were talking about are for making websites accessible to all users including, and especially, those with disabilities. 5

Disabilities related to web accessibilityImpairment Categories6Vision Impairments

Auditory ImpairmentsMobility ImpairmentsCognitive Impairments

D So, first lets talk about the disabilities that may be affecting people who are visiting your website. There are four main categories of disabilities. Well go through each one briefly. 6

Disabilities related to web accessibilityImpairment Categories7Vision ImpairmentsCommon Assistive Technologies (AT)Screen readersMagnification toolsBraille displaysHigh contrast toolsLarge-print / tactile keyboards

D - Vision impairments include more than just blindness. This could include color blindness or any kind of less than perfect vision.

Now, how do people with vision impairments access websites? Users with lots of different disabilities often make use of tools called assistive technologies (sometimes referred to as AT) to help them access information and navigate a website.

Some assistive technology tools used by people with visual impairments when theyre using the web include: 7

Disabilities related to web accessibilityImpairment Categories8Auditory ImpairmentsCommon Assistive TechnologiesCaptions & subtitlesSign language accompanimentsAudio/video transcriptions

(TW)Next we have auditory impairments

Obviously this includes total hearing loss, but it can also be any sort of less-than-perfect hearing.

Some of the most common assistive technologies for auditory impairments are: - Captions and subtitles for media - usually video - Sign language accompaniments - Full transcriptions of audio or video

8

Disabilities related to web accessibilityImpairment Categories9Motor ImpairmentsCommon Assistive TechnologiesKeyboards Speech recognition toolsHead / Eye trackersMouth sticks / Head wands

D - Motor impairments include a wide array. Could include tremors, paralysis, limited reach, loss of fine motor control. Users with these types of impairments may access the web using assistive technologies:

The standard keyboard can be very useful for users who cannot effectively use a mouse. And even if theyre not interacting directly with the keyboard, they often are using another assistive tool that translates their input into keyboard commands. For example, speech recognition software allows users to use their voice to type or navigate a screen. 9

Disabilities related to web accessibilityImpairment Categories10Cognitive ImpairmentsCommon Assistive TechnologiesMemory AidsAccommodation SoftwareOrganizational Tools

(TW)Cognitive impairment refers to a range of deficits or impairments, including things like: - dyslexia - memory loss - intellectual disability - neuropsychological deficits

Some of the most common assistive technologies are - Memory aids - Accommodation software (like text readers & notetakers) - Organizational Tools (both analogue and electronic)10

Disabilities related to web accessibilityImpairment Categories11Temporary Impairments Permanent Impairments

Long-term; expected to last for the majority, or entirety of a person's life.Short-term; expected to last for a limited period of time

D - Now, each of these impairments weve discussed can fall into one of two additional categories: permanent or temporary.

Permanent impairments are long-term and can last the majority or entirety of a persons life. Additionally, as people age, they tend to develop permanent impairments. These types of impairments are probably what you think of when you think of people with disabilities.

However, there are also temporary impairments: these can include temporary injuries or simply impairments due to circumstance or situation like low lighting, or bright lighting, or loud environments, or distractions. So, really anyone can have a disability at some point or another. 11

Do I really have to?Arguments against accessibility

D - So, hopefully weve driven home the point that when we talk about web accessibility, were not just talking about screen readers or people with vision impairments.

But next, were going to talk about some of the arguments against accessibility that seem to exist and hopefully convince you that theyre not very strong arguments.

And before we get into those, well first mention that yes, sometimes you are legally required to make your website accessible. If your site is a federal government site, it needs to be compliant with the Section 508 guidelines. But since no one enjoys doing something they HAVE to do, tonight we want to focus on some other motivations for implementing accessible designs on your sites because we want everyone to make their sites accessible not just the ones that HAVE to. 12

It isnt worth the trouble for just a few users.Anti-Accessibility Argument #1

(TW) The first anti-accessibility argument that we often encounter, is "It just isn't worth the trouble for such a small number of affected users"

Essentially saying that accessibility is such an edge case, that it's not worth the effort.

Maybe weve already debunked this one in our last few slides, but well tackle this one a bit more. 13

People with permanent disabilities, of courseWho Benefits From Accessibility? 14~ 19% of the U.S. population (56.7 mil) have some type of disability 1> 50% of U.S. adults 65 and older have a disability 1 1. US Census Bureau (2012) Profile of America; Facts for Features [Link]

19%50%

(TW)So, let's talk about who actually benefits from accessibility.

The obvious answer, of course, is people with permanent disabilities. And it's as small of a group as you might think.

The US Census Bureau reports that about 19% of Americans have some type of disability. That's almost 57 million people.

And for adults who are 65 years or older, more than half have some sort of disability.

That's a lot of people.

But even if it wasn't - even if only 1% of the population had a disability - we say put yourself in their shoes. How would you feel if you couldn't have access to the media that everyone else enjoys? 14

Who Benefits From Accessibility?People with temporary impairments, too15Helps users with permanent vision impairments read text on the screenAlso helps users outside on a sunny day read text on the screenExamples of low contrast and high contrast text

D15

Who Benefits From Accessibility?People with temporary impairments, too16Allows users with permanent hearing impairments to access audio informationAlso allows users in a loud (or quiet) environment view videos without soundExample captions displayed on a video player

D16

Who Benefits From Accessibility?Everyone else, too17Easier for screen reader users to navigate and understandEasier for users with cognitive impairments to decipherEasier and faster for everyone to comprehendSimple tables with clear structures

(TW) Lets talk about tables. Simple tables. 17

Who Benefits From Accessibility?Everyone else, too18Essential for keyboard users to be able to access interactive elements on the page Essential for keyboard-driven assistive technology (screen readers, speech recognition, etc.) users to access elements on the pageSuper helpful for people who hate to use the mouse or trackpad and prefer tabbing through a formKeyboard accessible elements

(TW) Next up is web elements that are accessible with the keyboard.

Of course it's helpful for keyboard-only users, and essential for keyboard-driven assistive technologies, but it's also just awesome for people who think tabbing through forms is way better than having to click on each item with the mouse. 18

Who Benefits From Accessibility?Everyone else, too19Essential for screen reader users to know what information to enter in a form field Increases the target area for people with mobility impairments who struggle to use a mouse or trackpad Increases the target area for everyone using a touch screenInput fields with associated labels

(TW) Finally, lets talk about labels.

Having labels that are associated with input elements is a must for screen readers users - it's really difficult to know what an input is for if the label is automatically read for you.

It 19

It isnt worth the trouble for just a few users.Anti-Accessibility Argument #1

T So, to re-iterate argument #1 we hope you agree that implementing accessible designs isnt just for those few users.

20

Its too expensive and too much work.Anti-Accessibility Argument #2

DMoving on to another anti-accessibility argument.

Basically, this argument says ok, we understand we should do it, but we dont have money in the budget for all that extra work its going to take to make this site accessible.

This is probably the most common argument but were going to try to prove it wrong.

21

It will ruin the design. ...I cant do anything cool.Anti-Accessibility Argument #3

D

While were at it, another common argument is:

Ill have to use ugly colors and I wont be able to do that cool map I was envisioning or use expanding panels.

Again, were going to try to prove this argument wrong. Were going to tackle these last two arguments (that its too expensive or too much work and that it will ruin the design) together because their solutions often go hand in hand. 22

A Few SolutionsAccessibility can be easy and cool

T23

WAI-ARIAThe accessibility band-aid24WAI-ARIA = Web Accessibility Initiative; Accessible Rich Internet ApplicationsARIA is a technical specification published by the World Wide Web Consortium (W3C) Guidelines on how to increase the accessibility of web pagesAllows role, property, and state information to be added dynamic web applicationsHelps assistive technologies to parse non-standard markupARIA provides accessibility features that aren't (yet) possible with HTML aloneARIA has been around longer than HTML5, so support from assistive tech is more completeWe sometimes think of ARIA as an "accessibility band-aid" This is an oversimplification, but the analogy has some truth to itARIA is often used as a way of making existing websites accessible after the factHowever, it is often successfully included as part of initial development

1. W3C (2014) Accessible Rich Internet Applications 1.0 [Link] 2. Featherstone, D. (2011) Real World Accessibility: HTML5, ARIA and the Modern Web [Link]

T24

WAI-ARIAThe accessibility band-aid25Landmark RolesMethod for describing the structure/function of major "landmark" elementsEx. role="navigation", role="main", role="banner", etc. Landmark roles are the older brother to HTML5's semantic elementsHelpful to ensure accessibility even in older browsers that may not be compatible with HTML5

... ... ...

With ARIA:

... ... ...

Without ARIA:

TWe wanted to go through a few examples of how you can use ARIA to make a website element more accessible.

25

WAI-ARIAThe accessibility band-aid26Expand/Collapse StateIndicates expandable regions of content and their present stateEx. aria-expanded="false", aria-expanded="true"Expandable Panel with ARIA:

Example Title

D26

ARIA Example: aria-expanded - JAWS 17 - Chrome27

D

We have a video of the JAWS screen reader interacting with two expandable panels one without any ARIA and one using ARIA. [Go through code for each]For those who have never heard a screen reader, what youll hear is a funny voice reading the page elements as we navigate to them with the Tab or arrow key. The difference that youll hear between the two examples is that in the first, we will just be told that there is a link; we wont be told that its expandable or whether its collapsed or expanded. In the second example, we will hear the current state.

So, as you can imagine, it can be very useful information to a screen reader user to know whether the panel is expanded or collapsed. Without that knowledge, the user could miss the information in the panel.

27

WAI-ARIAThe accessibility band-aid28ARIA LabelsProvide AT-only descriptions of various elementsEx. aria-label="External Link" Alert RolePrioritizes and communicates important messages to AT'sEx. role="alert"

T28

ARIA Example: role="alert" - JAWS 17 - Internet Explorer29

DThis ARIA feature is extremely useful for screen reader users in that their focus is directed immediately to the error message. In many cases, screen reader users can miss important information is their focus is not directed there. 29

Now with more accessibility!HTML530HTML5 isn't perfect, but it's the most accessible markup language ever 1W3C actually created an Accessibility Task Force specifically for HTML 5 2Built-in accessibility features make authoring accessible content easier than everImproved semantics and sectioningMore granular form constructionNative validation / error handlingBetter support for media & media alternatives

1. Mark Sadecki (2014) Accessibility Features of HTML5 [Link] 2. W3C WAI (2010) HTML Accessibility Task Force Work Statement [Link]

T30

HTML5Now with more accessibility!31Sectioning ElementsHTML5 includes additional descriptive replacements for generic 's and 'sEx. , , , , , Used to label the major sections of a typical webpageEssentially forces specific aria landmark roles to be added to each elementMakes it more convenient for authors to communicate page structure to AT's1. W3schools. HTML5 Semantic Elements [Link] 2. WebAIM (2010) Future Web Accessibility [Link] 3. Peterson, C. (2012) Accessibility in HTML5 [Link]

D31

Sectioning Elements Example - JAWS 17 - Internet Explorer32

D

32

HTML5Now with more accessibility!33Input RestrictionsNative control over common input constraints with a few new attributesrequired = field must be completed prior to form submission pattern = field will only accept a certain pattern of input (checked against regular expression)max = sets a maximum value that the field will acceptmin = sets a minimum value that the field will acceptThese attributes can be parsed by assistive technologies, helping the disabled user to understand what is required of them before they attempt to submit the formAllows for simple control over user input that everyone can understand

T33

Input Restrictions Example: Required - JAWS 17 - Chrome34

D

34

Input TypesSimple, granular definition of input purposeEx. type="tel", type="email", type="date", type="URL", etc.Now with more accessibility!HTML535 Date ... Without HTML5:With HTML5: Date ... Native Error Handling

T35

HTML5Now with more accessibility!36Programmatic CaptionsHTML5 allows captions to be programmatically associated with corresponding figuresEx. , 1. Sadecki, M. (2014) Accessibility Features of HTML5 [Link] 2. W3C WAI (2010) HTML Accessibility Task Force Work Statement [Link]

D36

Figure & Figcaption Example - JAWS 17 - Chrome37

D

37

HTML5Now with more accessibility!38New Global AttributesIn HTML5, the tabindex and hidden attributes can be applied to any elementIn HTML 4.01, these were limited to: , , , , , , and .Helpful in various ways, such as forcing focus to shift to a non-link elementNative Media HandlingBrowser-only media without plugins (e.g. Flash, Java), , Lorem ipsum dolor

T38

ARIA and HTML5 39In general, using HTML5 alone (according to standards) is a great startHowever there are still some compatibility problems, both for browser and assistive technologiesARIA goes above and beyond what HTML is currently capable ofIf you want to be sure you're doing the most you can, use ARIA in conjunction with HTML5

T39

Frameworks & LibrariesLet other people do the work for you!40Many modern web development libraries and frameworks now include accessibility featuresThese resources can help make web accessibility less of a choreNone of them are perfect, and they won't magically make your site accessible, but they can help

D40

Frameworks & LibrariesLet other people do the work for you!41Bootstrap [Website] [GitHub] Free | Open-Source | MIT LicensePopular front-end web framework; initial release 2011HTML & CSS templates, optional JavaScript extensionsIncludes various HTML & CSS snippets/templates that are accessible out of the boxFoundation [Website] [GitHub] Free | Open-Source | MIT LicenseFront-end framework emphasizing responsive design; initial release 2011All components & examples are screen reader and keyboard accessibleOptional JavaScript extensions add accessible attributes and improve keyboard navigation

T41

Frameworks & LibrariesLet other people do the work for you!42U.S. Web Design Standards [Website] [GitHub] Free | Open-Source | MIT LicenseLibrary of UI components & styles developed by 18F for government websitesEvery asset offered is designed to meet Section 508 standards

Turret [Website] [GitHub] Free | Open-Source | MIT LicenseSelf described as "styles and browser behavior normalization framework"HTML templates are largely written accessibly Includes some CSS tailored specifically toward screen readers [GitHub]

T42

Frameworks & LibrariesLet other people do the work for you!43Assorted Libraries/Plugins for Accessibilityally.js [Website] [GitHub]JavaScript library intending to make implementation of various accessibility features easierBootstrap Accessibility Plugin [Website] [GitHub]JavaScript library designed by the PayPal team that adds accessibility markup to Bootstrap v3accessifyhtml5.js [GitHub]JavaScript plugin that mitigates browser incompatibility with HTML5 by inserting aria 'role' attributes automatically

T43

Accessibility ToolsFree utilities to aid in accessible web development44Color Safe [Website]Simple, customizable tool for generating color palettes that meet WCAG contrast guidelinestota11y [Website]JavaScript plugin that highlights accessibility related elements on your siteAccessify [GitHub]Assorted tools for generating accessible markup including tables, skip navs, popups/modals, forms, etc.W3C's Accessibility Tool List [Website]A list of hundreds of tools for developing accessible content and checking it for accessibility

T44

Make accessibility affordable, easy, and funStrategies45Implement accessibility earlyAvoid post-hoc remediation costsSimplify and standardize page elementsUse standard elements, existing frameworks, and simple layouts; and use them consistently Be creative and open-minded when coming up with accessible solutionsStart with the goal (The user needs to know this information at this time) and then determine various possible solutions; often the simplest solution is the best

D

[Mention simple solution examples]45

In Conclusion

Accessibility can be a good word47Worth the investmentEasy to implement Can work seamlessly with designCan actually be kind of cool

D

We hope we have convinced you that accessibility isnt such a dirty word, but can be quite the opposite.

Hopefully you agree that accessibility is:

47

Thank you!Dana Douglasddouglas@userworks.com

Silver Spring, MDwww.userworks.com(301) 431 - 0500

Tristan Wilsontwilson@userworks.com