Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility For Everyone

Accessibility For Everyone

Suzette Franck will be providing an introduction to accessibility, which is MORE than just screen readers! Be sure to be there to learn how you can make your site more inclusive.

Suzette Franck

September 16, 2021
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. Accessibility for Everyone:


    An Introduction to Making Inclusive Website
    s

    WPGR Grand Rapids WordPress Meetup
    September 16, 2021

    View Slide

  2. [email protected]
    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

    View Slide

  3. “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

    View Slide

  4. 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

    View Slide

  5. 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

    View Slide

  6. 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

    View Slide

  7. 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

    View Slide

  8. 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

    View Slide

  9. 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

    View Slide

  10. • 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

    View Slide

  11. 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

    View Slide

  12. • 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

    View Slide

  13. • 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

    View Slide

  14. 10 prescriptive advice 

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

    View Slide

  15. 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

    View Slide

  16. 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

    View Slide

  17. 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

    View Slide

  18. 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

    View Slide

  19. (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

    View Slide

  20. (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

    View Slide

  21. (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

    View Slide

  22. (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

    View Slide

  23. (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

    View Slide

  24. (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

    View Slide

  25. 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

    View Slide

  26. 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

    View Slide

  27. 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

    View Slide

  28. [email protected] 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

    View Slide

  29. Recommended resources and further study

    View Slide

  30. 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

    View Slide

  31. 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

    View Slide

  32. Extra Credit:

    Example Accessibility Statements

    View Slide

  33. Accessibility statement - OPTAvia
    33

    View Slide

  34. Accessibility statement - EdX
    34

    View Slide

  35. Accessibility statement - Bureau of Internet Accessibility
    35

    View Slide

  36. uzette[email protected] on 09/10/2021
    Accessibility statement - Deque University
    36

    View Slide

  37. View Slide