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 we meet AA compliance standards? 2 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) 3 The Institutes | Risk and Insurance Knowledge Group
Why should we invest in accessibility? 4 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? 5 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 6 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 7 The Institutes | Risk and Insurance Knowledge Group
It makes good financial sense Customers can be persuasive… Original Photo by Dominik Vanyi on Unsplash 8 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/ 9 The Institutes | Risk and Insurance Knowledge Group
It helps everyone ► People who need accommodations ► People looking for efficiency ► Search engines 10 The Institutes | Risk and Insurance Knowledge Group
It’s the right thing to do ► Enjoy the moral high ground! Photo by Denys Nevozhai on Unsplash 11 The Institutes | Risk and Insurance Knowledge Group
Awwww … Photo by Jonas Vincent on Unsplash 12 The Institutes | Risk and Insurance Knowledge Group
How do we get to AA compliance? 13 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 Photo by Glenn Carstens-Peters on Unsplash Americans with Disabilities Act of 1990 14 The Institutes | Risk and Insurance Knowledge Group
Sources: ► 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 Photo by Glenn Carstens-Peters on Unsplash – https://www.w3.org/TR/wai-aria-practices-1.1/ GoogleDoc Checklist ► Online Checklists – https://webaim.org/standards/wcag/checklist – https://a11yproject.com/checklist.html – https://www.wuhcag.com/wcag-checklist/ https://t2m.io/0Quawquh 15 The Institutes | Risk and Insurance Knowledge Group
Step 1: Understand – The Guiding Principles ► Be predictable ► Give the user control Photo by Casey Horner on Unsplash ► Provide alternatives 16 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 17 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 18 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… 19 The Institutes | Risk and Insurance Knowledge Group
Quick Wins ► Check your contrast https://webaim.org/resources/contrastchecker/ 20 The Institutes | Risk and Insurance Knowledge Group
Markup The correct reading sequence can be programmatically determined ► 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 <span class=“h3”>Am I a Heading?</span> 21 The Institutes | Risk and Insurance Knowledge Group
Markup Help users to navigate, find content, and determine where they are ► 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 Photo by Hendrik Morkel on Unsplash suggestions for valid input (AA) 22 The Institutes | Risk and Insurance Knowledge Group
Markup Help users to navigate, find content, and determine where they are ► Provide alternatives to main navigation – Site map – Search Photo by Ricardo Gomez Angel on Unsplash 23 The Institutes | Risk and Insurance Knowledge Group
Managing Images ► Let text be text Photo by Jonas Jacobsson on Unsplash 24 The Institutes | Risk and Insurance Knowledge Group
Managing Images: Fail ►alt=“ Sliced ginger sitting on wooden board with text overlay of How to Dehydrate Ginger and make Ginger Powder” https://www.thepurposefulpantry.com/dehydrate-ginger-make-ginger-powder/ 25 The Institutes | Risk and Insurance Knowledge Group
Managing Images - Backgrounds ► CSS background images: Use role, aria-label on the container ► Watch your contrast! http://www.brandwood.com/a11y/ 26 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 27 The Institutes | Risk and Insurance Knowledge Group
Managing Images ► When to skip the alt tag div – A captioned image – Strictly decorative image Photo by Jeremy Bishop on Unsplash Independence Hall, Philadelphia, PA. Photo taken by Stefaniya G. /div 28 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 29 The Institutes | Risk and Insurance Knowledge Group
Control Photo by Nikita Kachanovsky on Unsplash ► Give the user control – Let the user interactions determine when things start, stop – Provide warnings prior to automatic timeout, logoff 30 The Institutes | Risk and Insurance Knowledge Group
Low-frequency issues ► Foreign language phrases Photo by Soner Eker on Unsplash – Tag the foreign language used ► Live video: captions 31 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. 32 The Institutes | Risk and Insurance Knowledge Group
Alternatives ► Do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. ► Color is not used as the only visual means of conveying information. Photo by Quino Al on Unsplash 33 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? 34 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 of the things. ► Keyboard navigation – Position your cursor at the end of the URL window – Tab ► Do you see where you are? ► Can you navigate to all of the “clickables” on the page? 35 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/ 36 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 37 The Institutes | Risk and Insurance Knowledge Group
That seems like a lot. What do I have to do ? 38 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 39 The Institutes | Risk and Insurance Knowledge Group
Recommend
More recommend
