This is Good Karma and Web Accessibility. Help make the web be;er - - PDF document

This is Good Karma and Web Accessibility. Help make the web be;er for all people everywhere, and reap the SEO, User Experience, and Device Independence benefits. Introduce myself… I am Web Developer and Accessibility Harpy for Duke UniversiIes Web Services In a past life… before Duke…. I worked for a consulIng agency in Washington DC… customers included: U.S. Senate, House RepresentaIves, Federal Reserve, NaIonal Park Service, and many other gov’t agencies and NGOs. I played mulIple roles in my career but whatever I do accessibility has always been a passion. I am a CerIfied Usability Analyst from Human Factors Int’l and an accessibility wonk. As well as a Cat Gif aficionado. If your team cares about SEO, UX, and device independence, you care about Accessibility. I want you to be able to to win friends and influence people. Get people the band- 1

2

The WC3 states that… READ SLIDE 3

Jump through these fast as I read the definiIon. 4

Jump through these fast as I read the definiIon. 5

Jump through these fast as I read the definiIon. 6

For many people in developing naIons, the smart phone is their only method to get

• nline.

ConnecIons can be lousy…. Environments unforgiving… Be courteous, some people have data plans that require them to pay by the byte. MOBILE PRIMARY 7

I would bet that everyone here has a family member who is affected by one of these condiIons to some extent. 8

READ SLIDE Karma is cause and effect. If do good things for others, good things may happen in return. 9

Because almost everything that is good for Accessibility is good for all of the above. READ SLIDE People with disabiliIes want to use the same apps that you do. Facebook and twi;er. They… WE all want to use your site. 10

Who has a disability? Almost 20% of non-insItuIonalized people in the U.S. have a documented “disability”. Having a disability is not an on or off switch. Walking, some people are paralyzed and some people need a cane, some people run marathons. Sight - Some people are always blind or have limited sight. Perhaps you need glasses. Perhaps you have 20-20 vision. We all live on this spectrum. h;ps://www.census.gov/newsroom/releases/archives/miscellaneous/ cb12-134.html 11

People who have limited eyesight also benefit from websites that are compaIble with assisIve technology. People with the above ^ 80% of the adult populaIon have some form of visual deficit (including those of you with glasses) Those of you without glasses will need them. Around the age of 40 people start being effected by PRES-BY-OPIA — it is a normal, age-related loss of near focusing ability. This is major up and coming web accessibility issue, as the baby boomers get to reIrement age. h;ps://en.wikipedia.org/wiki/Visual_impairment About 90% of people who are visually impaired live in the developing world.[4] Age-related macular degeneraIon, glaucoma, and diabeIc reInopathy are

the leading causes of blindness in the developed world.[26]

The most common causes of visual impairment globally in 2010 were: 12

On a day-to-day basis, even hour-by-hour, a person's abiliIes and disabiliIes can change on a spectrum. We all experience temporary arIficial temporary disabiliIes. Our environment and devices change our abiliIes and disabiliIes. Sunlight making it hard to see your screen - Impaired Vision? Movement while walking - Tremors/ ArthriIs? No being able to hit touch targets Noisy rooms watching a video - Hearing loss? DistracIons – A.D.D.? These temporary experiences can build up on each other. As your cogniIve load increases, your ability to absorb informaIon decreases. Crea;ng Accessible technology helps everyone. 13

Legally, What does it mean if something is Accessible to someone with a Disability? The person with a disability must be able to obtain the informaIon as fully, equally and independently as a person without a disability. Although this might not result in idenIcal ease of use compared to that of persons without disabiliIes, it sIll must ensure equal opportunity to the benefits and

• pportuniIes afforded by the technology and equal treatment in the use of such

technology.” The fear is that as we move into the digital age, we’re faced with a two-edged sword because in some cases, of course, technology can make the world more accessible to individuals with sensory impairments or disabili;es. But in some cases, it can prove to raise new barriers and re-segregate our society. And that’s why this issue is being so heavily li;gated by individuals who fear that they’re going to end up on the wrong side of the digital divide. The 1998 N.O.D./Harris Survey of Americans with DisabiliIes. N.O.D./ Harris h;p://eric.ed.gov/?id=ED422692 14

Universal Design (a.k.a. UD) says we should expect things to be ready for us without asking or planning ahead. This is what we want. This is what we are advoca;ng for. Provide a good user experience to all your visitors. It can be provided by following clear standards and pracIces that make "adaptaIon"

• unnecessary. We can benefit from accessibility without announcing or explaining our
• disabiliIes. Like having a 508 compliant website.

When you hear UD also think responsive web design, device independence, and web accessibility. Ideally, an accommodaIon is for adaptaIons that CAN NOT be anIcipated or

• standardized. The obvious downside to asking for an accommodaIon is that we have

to explain our disabiliIes a bit in order to get accommodaIons. h;p://design.ncsu.edu/cud h;p://www.hhs.gov/web/secIon-508/accessibility-accomodaIon/index.html 15

Lets talk Vocabulary and Buzzwords real quick!!! Sec;on 508 is an amendment of the of the Rehabilita;on Act WCAG - Web Content Accessibility Guidelines. I will spend most of my Ime on criIcal WCAG 2.0 criteria. But the evoluIon and the laws are important to understand. 16

READ TITLE 17

To understand what 508 is, I think it is important to know where it comes from, and who needs to comply. 508 is an amendment to the The Rehabilita;on Act of 1973. The rehab act is a federal anI-discriminaIon law that affords individuals with disabiliIes the same civil rights as groups protected by the Civil Rights Act of 1964. Before this it was ok that there were architectural barriers to receiving government services. Here is an example of the Rebab Act in acIon: Sec;on 504 implies: People in wheel chairs have the same civil rights to enter the same building as anyone else. Result: Public buildings need to have a ramp or elevators to prevent architectural barriers to access. 18

Example 508 Example: Mul;media alterna;ves are provided (for deaf) Videos and audio have transcripts

• r cap;ons

Example why capIons are so important. CAUSE: Help the 7 million people who are deaf or hard of hearing in our county. EFFECT: Helping everyone else.

• 80% of people who use video capIoning are not deaf.
• Noisy bar, they turn on capIons.
• Watching a movie while the baby sleeps,
• English as a second language.
• Over 60% of YouTube's audience are foreign language speakers and hearing-

impaired viewers...". Again, like most things that are done to improve accessibility, capIoning videos also improves ESL usability, user experience, and search engine opImizaIon. 19

DISCLAIMER: I AM NOT A LAWYER, TRUST YOUR OWN LEGAL COUNCIL. IF THEY DISAGREE WITH ME THAT MEANS THAT THEY ARE CORRECT AND I AM INCORRECT. I am oyen asked, who needs to comply with 508? Its complicated. Americans with DisabiliIes Act Expands 504 to the Public Sector In 1990 the Americans with DisabiliIes Act (ADA) was passed. Title II of the ADA applies the same requirements to state and local government enIIes. The biggest difference is that SecIon 504 applies to federally funded programs… and the ADA applies to state and local government funded programs. Between the two laws, virtually all federal, state and local government funded programs must be compliant. The ADA is essen;ally an expansion of 504. It affords Civil Rights to individuals with disabiliIes in the public sector. h;ps://secIon508.gov/ h;p://info.3playmedia.com/rs/3playmedia/images/SecIon508- Brief.pdf 20

DISCLAIMER: I AM NOT A LAWYER, TRUST YOUR OWN LEGAL COUNCIL. IF THEY DISAGREE WITH ME THAT MEANS THAT THEY ARE CORRECT AND I AM INCORRECT. Just because the website is not federally funded does not necessarily mean you are in the clear. Recent court decisions have implicated online businesses as being in violaIon of the ADA. For instance, in a lawsuit against Nezlix, the court construed that Nezlix was as a "place of public accommodaIon," a provision of the ADA that had previously only been applied to physical structures. If the court's trend of implicaIng electronic and informaIon technology in its interpretaIon of the ADA conInues, it would extend the requirements of SecIon 508 to the public sector. The 1998 N.O.D./Harris Survey of Americans with DisabiliIes. N.O.D./ Harris h;p://eric.ed.gov/?id=ED422692 h;p://www.3playmedia.com/2016/04/01/what-happens-when-the-doj- 21

READ SLIDE When I worked for the Senate, Very few senator and congressional websites would pass a 508 accessibility review. It might not shock you that the people who passed the law don’t follow it. 508 compliance requirements generally the same thing as the NEWER internaIonal Web Content Accessibility Guidelines 1.0. SecIon 508 states that, "When developing, procuring, maintaining, or using electronic and informaIon technology, each Federal department or agency […] shall ensure, unless an undue burden would be imposed on the department or agency, that the electronic and informaIon technology allows, regardless of the type of medium of the technology, individuals with disabiliIes […] to have access to and use

• f informaIon and data that is comparable to the access of [those] who are not

individuals with disabiliIes." h;p://secIon508.gov h;p://info.3playmedia.com/rs/3playmedia/images/SecIon508-Brief.pdf 22

I’m going to go over the success criteria this slide later… Here are the major points of emphasis for SecIon 508 compliance, next to the success criteria for WCAG 1.0. For example, every image or graphic or video needs to have a text equivalent. That can’t really be tested in a WAVE test. That’s a job for humans. Form items need labels. That can be checked by a WAVE Test. As you can see, if you meet WCAG you will probably meet 508. The words are not interchangeable, but the requirements are basically the same. WCAG 1.0 is slightly more strict, but not by much. 23

Web Content Accessibility Guidelines or WAACAAAGGG READ SLIDE The WCAG 1.0 standards have also been surpassed with the WCAG 2.0 standard. 24

Should, may If you meet WCAG 2.0 you meet WCAG 1.0 and 508 Compliance 25

For all pracIcal purposes the 508 guidelines have been replaced by the internaIonal WCAG 2.0 guidelines for websites. WCAG 2.0 guidelines are more strict. They cover more things, so WCAG 2.0 AA compliance virtually assures 508 compliance. I am not going to read these guidelines to you. They are readily available online, in this presentaIon I want to focus on the criteria that have dual benefits like SEO, UX, and DI. 2014 the U.S. Access Board submi;ed a proposal to refresh the SecIon 508 standards based on the WCAG 2.0 standards. Technically 508 standards are the law

• f the land.

But the DOJ has moved on. In reality WCAG 2.0 is the standard. .. For example: If the DOJ inves;gates your university for failing to meet accessibility requirements they force you into a “Resolu;on Agreement”. In those documents the DOJ are already requiring universi;es to meet the WCAG 2.0 AA standard. When you hear 508 Compliance think WCAG 2.0 Compliance also. 26

That was some HEAVY stuff thank you for hanging in there with me. Business Cat??? 27

28

READ THIS (not slide): Organized by principles instead of guidelines and checkpoints. Perceivable: Operable: Understandable: Robust: Good for SEO? Good for UX? Good for Device Independence? 29

Principle 1. Content is available to the senses (sight, hearing, and/or touch) These principles build on each other, They are all important, but the farther you go down the line the more overlap between execuIon and delivery are intertwined. 30

READ SLIDE 31

EXAMPLE Making a bu;on Red to indicate an acIon backfires with Pro-tan-op-ia. Because it sort of turns green. If people are totally colorblind color has very li;le meaning. SIDE NOTE:

• Color blindness is more prevalent among males than females, because the most

common form of color vision deficiency is encoded on the X sex chromosome.

• About 8% of all men are suffering from color blindness.
• Don’t ask your boyfriend for fashion advice

www.colorblindcheck.com h;p://webaim.org/arIcles/visual/colorblind h;p://www.color-blindness.com/2009/01/06/50-facts-about-color-blindness/ 32

READ SLIDE: MOST CRITIAL AND FOUNDATIONAL CONCEPT OF ACCESSIBILE USER EXPERIEANCE!!!! If you can’t read content everything else will crumble.

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/ TR/WCAG20/

33

Who has the glasses right now? Which line can you read?

But you are like… “Joel, that’s not fair. This is a projector.” I ask, Is a projector a device? If your site looks bad here that means your site is not device independent. This is not your designers fault. You may have even requested these color on purpose because it looked good on your big monitor in a room with no windows. 34

These requirements are not always pracIcal. READ SLIDE

Color can not be the only method to determine what is a link and what is not a link.

35

36

Example of meeIng the minimum requirement of 3:1 Good for UX and good for Device Independnce 37

Reduce frustraIon and help users accomplish your goal. Good for SEO? Good for UX? Good for Device Independence?

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/ TR/WCAG20/

38

39

I could not decide which meme to use so I went with both. 40

PERCEPTION --- CONCEPT Simply: Bu;ons & Links should be easy to idenIfy Stop being cute. Good for SEO? Good for UX? Good for Device Independence? 41

This is a good example showing bu;ons as bu;ons. When people see a bu;on, they know they can click on it. The only thing that saves iOS7+ is that the links/bu;on are consistent in color. Every text and icon that is clickable on is light blue, with a few excepIons. 42

NEW BUZZ WORD! Flat Design h;p://arIcles.dappergentlemen.com/2014/12/03/flat-design-2/ 43

CONCEPT Nobody likes to use scratch-and-sniff websites. Strawberry sIckers? Good for UX? Good for SEO? Good for Device Independence?

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/

44

TALK ABOUT SCREEN READERS Shocking Fact: Studies show that most people don’t read your whole website. People oyen scan pages for links. I WILL DEMO THIS LATER People who use screen readers oyen jump directly to links on a page. When a screen reader gets to “more” it just reads “more”. “More” what? “Read more” what? Good link text is also Great for SEO. Keywords in links are more valuable than plain text…. “Learn more about cats” is be;er than “more” Bad link text is a missed SEO opportunity Good for SEO? Good for UX? Good for Device Independence? 45

There is also a Itle a;ribute on the link tag that you can use alternaIvely. Or using element-invisible to hide the extra text visually, yet it sIll gets read by a screen reader Good for SEO? Good for UX? Good for Device Independence? 46

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/ TR/WCAG20/

47

What are some success criteria? Text equivalents for every non-text element. (for deaf) Images get alt tags Complex graphics or charts have descripIons h;p://webaim.org/standards/508/checklist 48

READ SLIDE That text can not be read by a screen reader. Google does not crawl the words in an image. All text in an image is a missed SEO

• pportunity

Good for SEO? Good for UX? Good for Device Independence? Good for Transla;on

• too. Google translate can translate words, but it can not translate text inside an

image. 49

Principle 2. Interface forms, controls, and naviga;on are operable 50

51

Larger touch targets are good for everyone. Be;er term is “independent pixels” READE SLIDE Good for SEO? Good for UX? Good for Device Independence? 52

This success criterion Suggest breadcrumbs, themaIc graphic IF it actually helps, KEEP navigaIon, persistent and consistent. Studies show that only 50% of people click breadcrumbs. ParIally because they can’t tell they are links. But they do provide informaIon scent even if they are not clicked. They are also keywords in links. REQUIREMENT: “All funcIonality of the content is operable through a keyboard interface without requiring specific ;mings for individual keystrokes.” Good for SEO? Good for UX? Good for Device Independence? 53

Remove unexpected Screen changes

(#5 complaint)

Rota;ng banners are not helpful. They are good for office poliIcs because everyone gets something on the homepage… but they are not good for accessibility… and mulIple studies show that they are not effecIve. Give users enough Ime to read and use content How much Ime for a Imed content? Depends on your users. For adults without cogniIve disabiliIes read the text out loud twice. That how much Ime it will probably take for a EFL visitor to read it. unnecessary animaIon – no animaIon should be necessary for understanding a page anyway. WARNING if you have a history of seizers close you eye for a second. I am going to demonstrate what Screen Flicker is. 54

This is probably bad for the UX for most people, but especially people who suffer from epilepsy 55

Principle 3. Content and interface are understandable. Easy to read please! One study shows that poor user interface can lead to depression. People blame themselves. That’s bad karma. hkp://www.oneguidelineaday.com/category/principle-3-understandable/ My Wife the Social Worker helps people with disabili;es find jobs. Bad UI is very discouraging. 56

57

Mimic the pros. Follow known design pa;erns.

• Amazon. Spend millions on research to save one click. Because reducing interacIon

cost increases sales. Facebook is ubiquitous its hard to find a person who has never used facebook. Mimicking interacIons you see there will help you choose design pa;erns that are known to users. 58

Principle 4. Content can be used reliably by a wide variety of user agents, including assis;ve technologies

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/ TR/WCAG20/

59

Don’t miss this opportunity to provide informaIon about your content to Google and assisIve technology Don’t use an H3 when it should be an H1 just because of looks good. This confuses Google as well as Screen Readers Proper semanIcs also help with content migraIon. Your old site might have a red H3 that you love, but the new one is green and suddenly looks bad too. Good seman;cs is Good for SEO? Good for UX? Good for Device Independence? Migra;on?

h;ps://www.w3.org/ WAI/intro/wcag.php

60

These tags are really important, I will show you in the demo later. Turn off styles does it s;ll work? ArIcle tags help Google know where to look for the first meaningful text When in doubt use a div Code ValidaIon helps assisIve technologies and Google says that sites with valid HTML get a bump over invalid sites. Good for SEO? Good for UX? Good for Device Independence? 61

• utline: none; is in some resets by default. Get that out of

there.

h;ps://www.w3.org/ WAI/intro/wcag.php h;ps://www.w3.org/ TR/WCAG20/

62

Good for SEO? Good for UX? Good for Device Independence? 63

I can’t do it all! Its so overwhelming! 64

65

Someone did a study on this. They asked people who use assisIve technologies what causes them the most problems.

• 1. Flash - The presence of inaccessible Flash content
• 2. CAPTCHA - images presenIng text used to verify that you are a human user (what

is captcha)

• 3. Ambiguous Links - or bu;ons that do not make sense
• 4. Images with missing or improper descripIons (alt text)
• 5. Screens or parts of screens that change unexpectedly (rotaIng banners – the

page is doing something you did not ask it to do)

• 6. Complex or difficult forms
• 7. Poor or Lack of keyboard accessibility
• 8. Missing or improper headings
• 9. Too many links or navigaIon items
• 10. Complex data tables
• 11. Inaccessible or missing search funcIonality
• 12. Lack of "skip to main content" or "skip navigaIon" links

h;p://desarrolloweb.dlsi.ua.es/cursos/2012/introducIon-web-accessibility/most- problemaIc-items 66

None of us like CAPTCHA Some CAPTCHA systems have no audio fall back. GO BACK ONE SLIDE 67

SPEAK UP. If you see content on a site that you can’t read for some reason, color, font-size, etc. On any device. You are not the only one. As a consumer and a stakeholder. Screens or parts of screens that change unexpectedly (Rotators and giant Ads) 68

When you make websites with a good Accessible UX you have both the moral high- ground as well as the legal high-ground to defend your design decisions. Don’t be afraid to whip out some of these buzz words and concepts to defend your design decisions. 69

h;p://cigs.sandbox:8888/ Click on Academics 70

h;p://cigs.sandbox:8888/units I hopefully ayer this demo you can see all of this guidelines look in acIon. And why they ma;er so much. 71

Don’t be overwhelmed. Fixing one thing can fix 100 things. There are tools to check for compliance. The best place to start is the Web Accessibility EvaluaIon Tool. It is free. There is an online version and a Chrome Extension. It will point out some pass/fail criteria like contrast raIos and image alt tags. But there are some things it can not test for:

• Does your video have capIons or a transcript.
• It also can not tell what color a background image is.

72

73

Thank you for a;ending. 74

75

To make a site more accessible you do not need to meet a specific level of compliance.

• Try to reduce barriers
• Make whatever improvements you can
• Make life easier for your visitors

It’s sIll good karma. I hope you enjoyed the presentaIon. Thanks for sIcking with me. 76

77