All for Web and Web for All: Moving Your Organization Toward - - PowerPoint PPT Presentation

▶
all for web and web for all moving your organization
SMART_READER_LITE
LIVE PREVIEW

All for Web and Web for All: Moving Your Organization Toward - - PowerPoint PPT Presentation

Feb 19, 2024 369 likes •844 views

All for Web and Web for All: Moving Your Organization Toward Accessibility Compliance 2019 Gretchen Grant, senior web developer 1 The Institutes | Risk and Insurance Knowledge Group Why should we invest in accessibility? How do

slide-1
SLIDE 1

1 The Institutes | Risk and Insurance Knowledge Group

All for Web and Web for All: Moving Your Organization Toward Accessibility Compliance

2019

Gretchen Grant, senior web developer

slide-2
SLIDE 2

2 The Institutes | Risk and Insurance Knowledge Group

  • Why should we invest in

accessibility?

  • How do we meet AA compliance

standards?

slide-3
SLIDE 3

3 The Institutes | Risk and Insurance Knowledge Group

  • Why me?
  • Who I am (and who I’m not)
  • How I ended up here

(or the perils of speaking up)

slide-4
SLIDE 4

4 The Institutes | Risk and Insurance Knowledge Group

Why should we invest in accessibility?

slide-5
SLIDE 5

5 The Institutes | Risk and Insurance Knowledge Group

It makes good financial sense

How much do you want to set aside to pay off a settlement?

slide-6
SLIDE 6

6 The Institutes | Risk and Insurance Knowledge Group

It makes good financial sense

Would you walk away from a pile of cash?

Photo by Vladimir Solomyani on Unsplash

slide-7
SLIDE 7

7 The Institutes | Risk and Insurance Knowledge Group

It makes good financial sense

In 2015, 40 million Americans were living with disability issues per the U.S. Census Bureau

slide-8
SLIDE 8

8 The Institutes | Risk and Insurance Knowledge Group

It makes good financial sense

Customers can be persuasive…

Original Photo by Dominik Vanyi on Unsplash

slide-9
SLIDE 9

9 The Institutes | Risk and Insurance Knowledge Group

Who are all these people?

►How do you move through the world? ►The need for accommodations spans the spectrum

Photo by Tom Grimbert (@tomgrimbert) on Unsplash https://gatfl.gatech.edu/

slide-10
SLIDE 10

10 The Institutes | Risk and Insurance Knowledge Group

It helps everyone

►People who need accommodations ►People looking for efficiency ►Search engines

slide-11
SLIDE 11

11 The Institutes | Risk and Insurance Knowledge Group

It’s the right thing to do

Photo by Denys Nevozhai on Unsplash

►Enjoy the moral high ground!

slide-12
SLIDE 12

12 The Institutes | Risk and Insurance Knowledge Group

Awwww…

Photo by Jonas Vincent on Unsplash

slide-13
SLIDE 13

13 The Institutes | Risk and Insurance Knowledge Group

How do we get to AA compliance?

slide-14
SLIDE 14

14 The Institutes | Risk and Insurance Knowledge Group

Action plan

►Understand assistive technology ►What to look for ►How to check for compliance Goal: AA compliance, as enumerated by W3C, interpreting Section 508 of the Rehabilitation Act of 1973 and the Americans with Disabilities Act of 1990

Photo by Glenn Carstens-Peters on Unsplash

slide-15
SLIDE 15

15 The Institutes | Risk and Insurance Knowledge Group

Sources:

Photo by Glenn Carstens-Peters on Unsplash

►Standards: Accessible Rich Internet Applications (ARIA)

– https://www.w3.org/TR/wai-aria-1.1/#introduction

►Contrast Checker

– https://webaim.org/resources/contrastchecker/ – http://www.brandwood.com/a11y/

►Design Patterns

– https://www.w3.org/TR/wai-aria-practices-1.1/

►Online Checklists

– https://webaim.org/standards/wcag/checklist – https://a11yproject.com/checklist.html – https://www.wuhcag.com/wcag-checklist/

https://t2m.io/0Quawquh

GoogleDoc Checklist

slide-16
SLIDE 16

16 The Institutes | Risk and Insurance Knowledge Group

Step 1: Understand – The Guiding Principles

►Be predictable ►Give the user control ►Provide alternatives

Photo by Casey Horner on Unsplash

slide-17
SLIDE 17

17 The Institutes | Risk and Insurance Knowledge Group

Step 2: What to Look for - Quick Wins

►No flashing stuff: “Do not use content that can cause seizures.” ►Use valid markup – that includes no duplicate IDs. ►Keep your js error-free.

Photo by Marcus Wright on Unsplash

slide-18
SLIDE 18

18 The Institutes | Risk and Insurance Knowledge Group

Step 2: What to Look for - Quick Wins

►Navigation menus are in the same location and order on every Web page. ►Provide error messaging in forms. ►Specify the language of the Web page.

Photo by Marcus Wright on Unsplash

slide-19
SLIDE 19

19 The Institutes | Risk and Insurance Knowledge Group

Quick Wins

►Drupal provides “skip to main content”

  • links. Don’t break it. “Users can bypass

blocks of content that are repeated on multiple Web pages, such as navigation menus.”

If it ain’t broke…

slide-20
SLIDE 20

20 The Institutes | Risk and Insurance Knowledge Group

Quick Wins

►Check your contrast

https://webaim.org/resources/contrastchecker/

slide-21
SLIDE 21

21 The Institutes | Risk and Insurance Knowledge Group

Markup

►Semantic markup is your friend ►Use headings to show hierarchy

– Keep markup in the same flow as display – Screen reader power users can use headings to traverse the page

The correct reading sequence can be programmatically determined

<span class=“h3”>Am I a Heading?</span>

slide-22
SLIDE 22

22 The Institutes | Risk and Insurance Knowledge Group

Markup

►Page needs useful <title> ►Tables need <thead>

– Only use tables for tabular data

►Forms need labels

– Forms need error messages (A) – Error messages should provide suggestions for valid input (AA)

Help users to navigate, find content, and determine where they are

Photo by Hendrik Morkel on Unsplash

slide-23
SLIDE 23

23 The Institutes | Risk and Insurance Knowledge Group

Markup

►Provide alternatives to main navigation

– Site map – Search

Help users to navigate, find content, and determine where they are

Photo by Ricardo Gomez Angel on Unsplash

slide-24
SLIDE 24

24 The Institutes | Risk and Insurance Knowledge Group

Managing Images

► Let text be text

Photo by Jonas Jacobsson on Unsplash

slide-25
SLIDE 25

25 The Institutes | Risk and Insurance Knowledge Group

Managing Images: Fail

►alt=“Sliced ginger sitting on wooden board with text

  • verlay of How to

Dehydrate Ginger and make Ginger Powder”

https://www.thepurposefulpantry.com/dehydrate-ginger-make-ginger-powder/

slide-26
SLIDE 26

26 The Institutes | Risk and Insurance Knowledge Group

Managing Images - Backgrounds

►CSS background images: Use role, aria-label

  • n the container

►Watch your contrast!

http://www.brandwood.com/a11y/

slide-27
SLIDE 27

27 The Institutes | Risk and Insurance Knowledge Group

Managing Images

►Assistive technology: screen readers for the visually impaired ►How to accommodate: alt tags for images

Photo by Ken Treloar on Unsplash

slide-28
SLIDE 28

28 The Institutes | Risk and Insurance Knowledge Group

Managing Images

►When to skip the alt tag

– A captioned image – Strictly decorative image

Photo by Jeremy Bishop on Unsplash

Independence Hall, Philadelphia, PA. Photo taken by Stefaniya G. /div div

slide-29
SLIDE 29

29 The Institutes | Risk and Insurance Knowledge Group

Links

►Link text is descriptive

– Assistive technology can present the page’s links in a list Purchase course materials Learn more Apply for Waiver Learn more Register Learn more Learn more Learn more Learn more Learn more

slide-30
SLIDE 30

30 The Institutes | Risk and Insurance Knowledge Group

Control

►Give the user control

– Let the user interactions determine when things start, stop – Provide warnings prior to automatic timeout, logoff

Photo by Nikita Kachanovsky on Unsplash

slide-31
SLIDE 31

31 The Institutes | Risk and Insurance Knowledge Group

Low-frequency issues

►Foreign language phrases

– Tag the foreign language used

►Live video: captions

Photo by Soner Eker on Unsplash

slide-32
SLIDE 32

32 The Institutes | Risk and Insurance Knowledge Group

Managing Video Assets

►Provide alternatives to video content

– Transcript – Captions, including descriptions (include additional information about non-speech content)

►Give control to the user – pausing, stopping, volume control.

slide-33
SLIDE 33

33 The Institutes | Risk and Insurance Knowledge Group

Alternatives

►Do not rely solely on sensory characteristics of components such as shape, size, visual location,

  • rientation, or sound.

►Color is not used as the only visual means of conveying information.

Photo by Quino Al on Unsplash

slide-34
SLIDE 34

34 The Institutes | Risk and Insurance Knowledge Group

See Why Alternatives Are Important?

►JavaScript datepickers – an intuitive visual interface…but what does a screen reader present?

slide-35
SLIDE 35

35 The Institutes | Risk and Insurance Knowledge Group

Step 3: How to Check – Understanding Assistive Technology

►Hire an experienced user of assistive technology and buy all

  • f the things.

►Keyboard navigation

– Position your cursor at the end

  • f the URL window

– Tab

►Do you see where you are? ►Can you navigate to all of the “clickables” on the page?

slide-36
SLIDE 36

36 The Institutes | Risk and Insurance Knowledge Group

Understanding Assistive Technology

►Screen Readers

– Write down how to turn VoiceOver off – Find your headphones – Borrow the iPad – Turn VoiceOver on – Navigate to a page For additional experience with screen readers, download NVDA. (It’s free!)

https://www.nvaccess.org/download/

slide-37
SLIDE 37

37 The Institutes | Risk and Insurance Knowledge Group

Compliance is hand-in-hand with valid code

►If your markup is valid, the screenreader is likely to interpret it correctly.

Photo by Roman Kraft on Unsplash

slide-38
SLIDE 38

38 The Institutes | Risk and Insurance Knowledge Group

That seems like a lot. What do I have to do?

slide-39
SLIDE 39

39 The Institutes | Risk and Insurance Knowledge Group

Your Mission (should you choose to accept it)

  • 1. Be aware
  • 2. Check yourself
  • 3. Be vigilant

(Please hum Mission Impossible theme here.)

Photo by Simone Acquaroli on Unsplash

slide-40
SLIDE 40

40 The Institutes | Risk and Insurance Knowledge Group

Your Mission (1 of 3): Be Aware

►Be aware of accessibility issues

– Alert product owners early on in the process. – Use the aXe extension in Chrome to do a preliminary check before you call it done. – Use the accessibility checklist as guidance.

https://t2m.io/0Quawquh

slide-41
SLIDE 41

41 The Institutes | Risk and Insurance Knowledge Group

Your Mission (2 of 3): Check Yourself

►Get familiar with an Accessibility Checker – and USE it

– aXe toolbar Chrome extension – Google Lighthouse audits

slide-42
SLIDE 42

42 The Institutes | Risk and Insurance Knowledge Group

Your Mission…step 2 (cont’d)

►Investigate Violations and “Needs review” issues

slide-43
SLIDE 43

43 The Institutes | Risk and Insurance Knowledge Group

Your Mission…step 2 (cont’d)

►Once more, using Lighthouse.

slide-44
SLIDE 44

44 The Institutes | Risk and Insurance Knowledge Group

Your Mission (3 of 3): Be vigilant!

►Make it part of your process to keep accessibility in mind

https://www.phillymag.com/foobooz/2013/10/21/shake-shack-opens-king-prussia

slide-45
SLIDE 45

45 The Institutes | Risk and Insurance Knowledge Group

Sources:

Photo by Glenn Carstens-Peters on Unsplash

►Standards: Accessible Rich Internet Applications (ARIA)

– https://www.w3.org/TR/wai-aria-1.1/#introduction

►Contrast Checker

– https://webaim.org/resources/contrastchecker/ – http://www.brandwood.com/a11y/

►Design Patterns

– https://www.w3.org/TR/wai-aria-practices-1.1/

►Online Checklists

– https://webaim.org/standards/wcag/checklist – https://a11yproject.com/checklist.html – https://www.wuhcag.com/wcag-checklist/

https://t2m.io/0Quawquh

GoogleDoc Checklist

slide-46
SLIDE 46

46 The Institutes | Risk and Insurance Knowledge Group

Follow up

►If you liked my talk, again, my name is Gretchen Grant

– grant@theinstitutes.org – gretchen.h.grant@gmail.com – https://www.linkedin.com/in/gretchengrantwebgirl/ – (Sorry, not on Twitter.)

►If you did NOT like my talk, my name is Carol Danvers.

Photo by MILKOVÍ on Unsplash Image courtesy of Vox.com and Marvel