Accessibility for Everyone: An Introduction to Making Inclusive Website s WPGR Grand Rapids WordPress Meetup September 16, 2021

hello@suzettefranck.com About Me • Self-proclaimed “Web Accessibility Advocate” • Web Content Producer at Warner Bros. in Burbank, Californi a • Created my fi rst HTML website in 1995 (geocities ) • Some college but mostly self-taught in many web technologie s • Gave fi rst WordCamp talk WCOC 2011 on BuddyPres s • 35 WordCamp talks over US & Canada since then 
 (last talk was in 2016 at WCOC) also many meetups in Californi a • I love crochet, dark pink #FF0099, my cat, colorful art, and day of the dead stuff, pandas, nature, and the beach

“The power of the web is in its universality.
 Access by everyone regardless of disability is an essential aspect.”
 
 — Tim Berners-Lee , World Wide Web Inventor, 1990 3

Accessibility is essential to create high-quality apps, websites, and other digital content — and to not exclude people from using your products and services. -W3C WAI World Wide Web Consortium Web Accessibility Initiative What is accessibility? 4

Accessibility is not a website or mobile app checklist to attain, but an attitude of inclusiveness so that all people will be able to use your digital media regardless of situation or device as new technologies are introduced, and it is always changing. What is accessibility not? 5

1. The web originally was conceived to make information accessible to all people 
 2. The web is accessible by default; new issues are introduced in the design, development, content, and maintenance phases of web project
 3. Prevalence: 1 in 5 people worldwide are disabled or will become at some point in their life, 15% of all people are disabled https://www.wethe15.org/
 4. Mitigate public relations disaster and reputation damage to your brand
 5. Web accessibility lawsuits on the rise and are costly and damaging Why web accessibility? 6

Famous web accessibility lawsuits Title III of the Americans with Disabilities Act (ADA) has been interpreted by many courts to include websites as places of public accommodation. Because of this, numerous entities – from sole proprietors to the biggest corporations – have received demand letters or had lawsuits fi led against them . • Disney - Can’t use screenreader and no keyboard na v • Beyoncé - Blind woman can’t use sit e • Amazon - Can’t use screenreader or refreshable braille displa y • Net fl ix - No subtitles on video s • Nike - Can’t use screenreade r • Fox News Network - Alt text missing and can’t use keyboard navigatio n • Burger King - Can’t use screenreade r More Details: 
 https://www.essentialaccessibility.com/blog/title-iii-lawsuits-10- big-companies-sued-over-website-accessibility
 https://www.essentialaccessibility.com/blog/web-accessibility- lawsuits 7

Types of Disability: 
 1.Permanent – Blind, Low vision, deaf, missing limbs, chronic illness 2.Temporary – Broken limb, night darkness, lost glasses or contacts, illness 3.Situational – While driving, holding a baby, multi-tasking, bright light, slow internet connection Anyone can be disabled 8

Disabilities include the following areas or a combination of these: 
 • Visual - Blindness, low vision, color‑blindness. • Auditory - Deafness and hard-of-hearing. • Physical - Inability to use a mouse, slow response time, limited fi ne motor control. • Cognitive - Learning disabilities, distractibility, inability to remember or focus on large amounts of information. Disability can be invisible 9

• First version WCAG was published in 1999 by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) in collaboration with individuals and organizations within the global accessibility community.
 • Stands for Web Content Accessibility Guidelines • Pronounced WCAG (way-kagg)
 • Accessibility is sometimes shortened to A11 Y • The current Standard, WCAG 2.1, was released 2018 to address mobile devices, those with low vision, and cognitive disabilities; includes all items of WCAG 2.0 and 17 more items Web accessibility basics 10

Timeline of web accessibility WCAG 1.0 WCAG 2.0 WCAG 2.1 WCAG 2.2 WCAG 3.0 1999 2008 2018 FUTURE Working Draft Proposed Draft Standard Minimum Outdated 2021 1990 WWW
 INVENTION Tim Berners-Lee 11

• California State Unruh Civil Rights Act (awards civil damages) • U.S. Title III of the Americans with Disabilities Act (ADA) • U.S. Rehabilitation Act of 1973 Amended Sections 504 & 508 • European Accessibility Act • Canada Accessibility Laws • United Nations - The Committee on the Rights of Persons with Disabilities (CRPD) • More laws will apply depending on locality and type of business Laws governing web accessibility 12

• Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)
 • Operable: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.
 • Understandable: Content is clear and limits confusion and ambiguity.
 • Robust: A wide range of technologies (including old and new user agents and assistive technologies) can access the content. Source: How To Meet WCAG (Quick Reference) P.O.U.R. principles of WCAG 13

10 prescriptive advice 
 checks for website owners Full Details: How To Meet WCAG (Quick Reference)

Full details: https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=246#resize-text   Tools : https://chrome.google.com/webstore/detail/zoom-text- only/ Tips:
 • Use relative heights and widths for containers, such as REM and % • Make sure menu doesn’t go wonky when zoome d • Make sure the line height does not cause the text to overla p (1) Zoom text up to 200%, does it break the site? 15

Full Details:
 https://www.w3.org/WAI/WCAG21/quickref/ #content-on-hover-or-focus Tools : Reload page and hit the tab key to navigate the page. Are focused items easy to identify ? Tips : • CSS Outline Property (Beware of CSS Resets that set outline: 0; without an alternative for focus states ) • https://www.w3schools.com/cssref/ pr_outline.asp (2) Need hover and focus states for interactive elements 16

Full Details: https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=246%2C2410#non-text-content Tools: Web Developer Chrome Extension (Chrome, FireFox, Opera ) https://chrispederick.com/work/web-developer/ Tips : • Turn off images, is there a text equivalent displayed ? • Does the page make sense with images turned off ? • Display Alt text instead of image s • Writing alt text: https://webaim.org/techniques/alttext/ • The fi rst principle of accessibility: 
 https://www.doe.mass.edu/nmg/alt_text.html (3) Text equivalents for all non-text content such as graphs, images, etc. 
 17

Full Details : https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible   Tools : • Tab, Shift + Tab and enter key s • Mouse Grid by Nuance with Dragon NaturallySpeaking Speech Software (Windows/PC Only)
 https://www.nuance.com/products/help/dragon/dragon-for-mac/ enx/Content/Navigation/MouseGrid.html Enable Voice Command s • Voice Control built in to iOS in Accessibility Settings, say, “Show Grid”, then pick a number to zoom or click 
 https://support.apple.com/guide/mac-help/control-your-mac-and- apps-using-voice-control-mh40719/11.0/mac/11.0 Tips : • Links to content or to skip navigation should be provided at beginnin g • Is the menu navigable by keyboard or do you lose focus ? • Shift-tab to go backward s (4) Use keyboard (no mouse) to navigate site, cannot get stuck in keyboard trap 18

(5) Heading levels should communicate importance and hierarchy rather than style Full Details: https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=246%2C2410#headings-and-labels Tools: • Structure Tab of W.A.V.E. Browser Extension 
 https://wave.webaim.org/ 
 Tips: • H1 reserved for Site Title (WordPress) or Page Title (Drupal) • H2, H3, H4 can be used to show hierarchy of information • Should not go more than 3 levels deep (H5 & H6 are not used often) • Heading Levels should not be used to communicate style, as they help people using screenreader and voice commands • Semantic is the name given to headings that communicate hierarchy rather than style 19

(6) Changing text spacing to accommodate low vision & cognitive disabilities Full Details: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246#text-spacing Tools:
 Stylus Browser Extension, can temporarily overwrite styles for any website https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Tips: No loss or breakage occurs from setting the below temporary properties: •Line height (line spacing) to at least 1.5 times the font size; •Spacing following paragraphs to at least 2 times the font size; •Letter spacing (tracking) to at least 0.12 times the font size; •Word spacing to at least 0.16 times the font size Code: * { line-height: 1.5 !important ; letter-spacing: 0.12em !important ; word-spacing: 0.16em !important ; } p { margin-bottom: 2em !important ; } 20

(7) Use high level of contrast in colors in text, objects & Backgrounds Full Details: • https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=246#contrast-minimum • https://webaim.org/articles/contrast/ Tools: • Online: https://webaim.org/resources/contrastchecker/ • WAVE Browser Extension also includes a Contrast Checker and Desaturation Page option: https:// wave.webaim.org/ Tips: •The visual presentation of text and images of text has a contrast ratio of at least 4.5: 1 21

(8) Never use "read more" or "click here" or "continue reading" to describe links The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general . Full Details : https://www.w3.org/TR/WCAG21/#link-purpose-in-context Tools : • Human review of link s • Chrome Screen Reader Extension (Hit Ctrl to stop reading ) • VoiceOver in Accessibility Options on iOS Ma c • ChromeVox on Chrome O S • JAWS, NVDA or Narrator (default) for Windows P C Tips : • Screenreaders always say, “Link” before they read out the link text . • Never use the URL for the link text on a website (it will be read out ) • See demo: https://youtu.be/dEbl5jvLKGQ?t=22 22

(9) Designs should be device responsive as well as orientation agnostic Full Details : https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=246%2C2410%2C144#orientation Tools : • iPhone, iPad, different physical devices • Emulator such as BrowserStac k • Chrome Inspector (Native ) Tips : • Toggle mobile/different device toolbar view as well as change orientation using the device toolbar in the Chrome Inspecto r 23

(10) All audio and video media should have subtitles and transcripts Full Details : https://www.w3.org/WAI/WCAG21/quickref/? showtechniques=144%2C246%2C2410%2C121#time-based- media Tools : • https://get.otter.ai/ • https://www.opensubtitles.org/ • https://www.w3.org/WAI/videos/standards-and-bene fi ts/ Tips : • Sidecar or SRT are additional text fi les that go with video fi le to provide timing and captions to the video (post-production ) • Automatic and Human transcription or use a combination of bot h • YouTube, Vimeo, FV Player for WordPress support using .SRT Sidecar fi le s • Transcripts are human readable versions of the fi le using in plain text or plain HTML and should be placed near video player. 24

Accessibility tools for everyone • Tools can only catch 30-40% of error s • Only noti fi es of the error, someone needs to manually fix • No automatic solutions or plugin s • Need human oversight and intervention to make changes, i.e., review heading level s • Tools provide useful guidelines, but Accessibility and testing is a manual proces s • Free and Open Source Tools available 25

W.A.V.E. browser extension • https://wave.webaim.org/ • Activated from pinned browser extension butto n • Provides actionable data from our non- public URLs in Details ta b • Provides black and white views to test contrast. • In The W.A.V.E. panel, you can view the heading levels used to see if they make sense 26

LIGHTHOUSE browser extension • https://chrome.google.com/webstore/ detail/lighthouse/ blipmdconlkpinefehnmjammfjpmpbjk • Authored by Google Chrome DevTool s • Activated from Inspector panel in incognito mod e • Runs report to provide recommendation s • Assigns a score to different areas : • Performanc e • Accessibilit y • Best Practice s • SEO 27

uzette.Franck@warnerbros.com on 09/10/2021 • https://www.getstark.co/ • FREE Chrome extension:
 https://chrome.google.com/webstore/detail/stark • Contrast Checker • Vision Simulations and Generato r • Simplify Focus Order Stark plugin for XD, Sketch, & Figma (Pro/paid) 28

Recommended resources and further study

Recommended resources Everyone should take this free course : • https://www.w3.org/WAI/fundamentals/foundations-course/ • Offered though Ed X • Takes a few weeks to complet e • Optional $99 certi fi cat e Designers: Derek Featherstone (UX/UI ) • https://www.youtube.com/results?search_query=derek+featherstone • https://www.linkedin.com/learning/accessibility-for-web-design/ • https://www.linkedin.com/learning/ux-foundations-accessibility/ Developers: Morten Rand-Hendriksen (WordPress Developer ) • https://www.youtube.com/results?search_query=Morten+Rand-Hendriksen+accessibility • https://www.linkedin.com/learning/simplifying-web-development-with-accessibility-best-practices/ 30

Further study • Article: WebAIM Introduction • Article: Making accessibility a company priority:
 WebAIM - The Model • Articles from WebAIM: https://webaim.org/articles/ (*Excellent ) • Courses: LinkedIn Web Accessibility Courses • WP Video: Accessibility Is a Moving Target by AmyJune Hineline (WP & Drupal) • Videos: YouTube W3C WAI Web Accessibility Videos 31

Extra Credit:
 Example Accessibility Statements

Accessibility statement - OPTAvia 33

Accessibility statement - EdX 34

Accessibility statement - Bureau of Internet Accessibility 35

uzette.Franck@warnerbros.com on 09/10/2021 Accessibility statement - Deque University 36

hello@suzettefranck.com 37