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

Developing for Accessibility with Semantic HTML

Developing for Accessibility with Semantic HTML

Workshop for Accessing Higher Ground 2020

Build a strong foundation for accessibility, speed, and SEO by developing with semantic HTML! Learn how semantic HTML solves common accessibility problems — without any advanced coding knowledge or using bulky frameworks. Discover how semantic HTML makes it easier for people of all abilities to interact with your content, even when using keyboard-only interaction or screen readers.

Emily Lewis

June 13, 2021
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Accessing Higher Ground
    November 10, 2020
    Developing for
    Accessibility with
    Semantic HTML

    View full-size slide

  2. 2
    • Accessibility & Universal Design Specialist - Knowbility
    • Formerly Bright Umbrella, CTRL+CLICK CAST & Web Standards Sherpa
    • Author Microformats Made Simple
    • Co-author HTML5 Cookbook
    • emily@knowbility
    • @emilylewis

    View full-size slide

  3. 3
    • Use Zoom's Q&A panel
    • Q&A segments throughout, including before and after lunch, and at the
    end of workshop
    Your Questions!

    View full-size slide

  4. 4
    • Use Zoom's chat for comments and interactions
    • Select "Panelists and Attendees" to share your comments with everyone
    • I will ask the group questions. Post your answers in chat.
    • I will informally poll the group. Use the "Raise Hand" function.
    Your Participation!

    View full-size slide

  5. 5
    Demos
    abrightumbrella.com/training/semantic-html

    View full-size slide

  6. 6
    • Your preferred browser
    • CodePen collection:
    codepen.io/collection/DpYNdk?grid_type=list
    Code Along - Required

    View full-size slide

  7. 7
    • Axe plugin installed in your preferred browser
    • Web Developer Toolbar plugin installed in your preferred browser
    • CodePen account
    • Your preferred text editor
    • If a Windows user, NVDA screen reader installed
    • Testing bookmarklets: target size and force focus
    Code Along - Optional

    View full-size slide

  8. 8
    Introductions
    Spirit of Accessibility
    History of HTML
    What Is Semantic HTML?
    Basic Accessibility Testing
    What Is Accessible Content?
    Common Accessibility Problems
    Accessible Interactions
    Agenda

    View full-size slide

  9. Who has coded
    HTML before?

    View full-size slide

  10. Seth Godin
    Interview on George Stroumboulopoulos Tonight
    If you can figure out how to do something
    interesting or unique or noteworthy, people will
    find you and pay you extra because you're not
    like everyone else ... you're different.

    View full-size slide

  11. • –Johnny Appleseed
    • Type a quote here.

    View full-size slide

  12. Pew Research
    www.pewresearch.org/fact-tank/2017/04/07/disabled-americans-are-
    less-likely-to-use-technology/
    42% of U.S. adults with a disability
    don’t own a smartphone

    View full-size slide

  13. It’s About People

    View full-size slide

  14. Can people with disabilities get the
    same information, perform the
    same interactionsand function as
    others with comparable ease?

    View full-size slide

  15. 17
    Science &Art

    View full-size slide

  16. 18
    • WCAG is bare minimum
    • Accessible Icon Buttons
    www.sarasoueidan.com/blog/accessible-icon-buttons/
    DEMO 1: Icon controls

    View full-size slide

  17. 20
    A Brief History

    View full-size slide

  18. caniuse.com/#search=html5

    View full-size slide

  19. WebAIM Screen Reader User Survey #8
    webaim.org/projects/screenreadersurvey8/#heading
    86.1% of screen reader survey
    respondents find heading levels
    very or somewhat useful

    View full-size slide

  20. 28
    • 20.5% of home pages had more than one
    • 1,002,946 instances of skipped heading levels
    • 39.1% of all page had skipped headings
    • 12.4% had no headings at all
    WebAIM Million
    webaim.org/projects/million/#headings

    View full-size slide

  21. 29
    • Visual scanning
    • Screen reader rotor
    • The Layer-Cake Pattern of Scanning Content on the Web
    www.nngroup.com/articles/layer-cake-pattern-scanning/
    DEMO 2: Headings

    View full-size slide

  22. 30
    • 97% of sites aren’t using semantic HTML
    • 85% of sites aren’t using ARIA correctly
    • 90% of SPAs have poor focus management
    • 90% of sites have unnecessary or redundant attributes
    • 80% of sites subvert the expected user experience
    18 months, 22 audits, ~1000 logged issues

    View full-size slide

  23. 31
    • Custom menus
    • Native menus
    • Styling a Select Like It’s 2019:
    www.filamentgroup.com/lab/select-css.html
    DEMO 3: Select Menus

    View full-size slide

  24. 32
    What Is
    Semantic HTML?

    View full-size slide

  25. 33
    Markup that has meaning
    Markup that describes the content, not the presentation
    Elements used for their intended purpose*
    Valid*

    View full-size slide

  26. Priority of Constituencies

    View full-size slide

  27. It’s About People

    View full-size slide

  28. 36
    • Code along:
    codepen.io/emilyplewis/pen/LYZgbNe?editors=1000
    DEMO 4: Input Labels

    View full-size slide

  29. Who has heard of
    progressive
    enhancement?

    View full-size slide

  30. 38
    Progressive Enhancement
    www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
    Illustration: Tiffany Tse, Shopify

    View full-size slide

  31. 39
    Progressive Enhancement
    www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
    Original illustration: Tiffany Tse, Shopify

    View full-size slide

  32. The First Rule of ARIA
    www.w3.org/TR/using-aria/#rule1

    View full-size slide

  33. 41
    • Code along:
    codepen.io/emilyplewis/pen/MWePboj?editors=1000
    DEMO 5: Disabled Buttons

    View full-size slide

  34. 43
    Good? Bad?

    View full-size slide

  35. Christopher Schmitt
    Knowbility Slack channel
    It's like the ‘I know good art when I see it’ rule.
    If I don't see devstalking about proper HTML,
    I know the HTML is suspect."

    View full-size slide

  36. 45
    AKA Basic A11y Testing
    Check YourWork

    View full-size slide

  37. 46
    • Accessibility
    • Validation
    • Document outline
    • axe
    www.deque.com/axe/browser-
    extensions
    • Web Developer Toolbar
    chrispederick.com/work/web-
    developer
    DEMO 6: Automated Checks

    View full-size slide

  38. Tools vs. Knowledge

    View full-size slide

  39. 48
    • No traps
    • Tab navigation
    • All controls can be triggered
    • Focus is visible
    • Force Show Keyboard Focus Bookmarklet for Accessibility Testing
    pauljadam.com/bookmarklets/focus.html
    DEMO 7: Keyboard Testing

    View full-size slide

  40. 49
    • General page loading
    • Read mode
    • Navigate with keyboard
    • Rotor actions
    • How Screen Readers Read Content
    webaim.org/techniques/screenreader/
    #how
    • VoiceOver Keyboard Shortcuts
    dequeuniversity.com/screenreaders/vo
    iceover-keyboard-shortcuts
    • NVDA
    www.nvaccess.org/download
    Screen Reader Testing

    View full-size slide

  41. Developing for Accessibility with
    Semantic HTML
    Lunch Break
    12:00-1:30pm (US Mountain)

    View full-size slide

  42. 53
    What Is
    Accessible Content?

    View full-size slide

  43. 54
    Reduces cognitive load
    Helps users focus
    Conveys content structure, hierarchy

    View full-size slide

  44. 55
    Accessible Content
    in practice

    View full-size slide

  45. 56
    • Devise consistent navigation
    • “Chunk” content, embrace lists
    • Use headings, sub-headings
    • Transcribe audio
    • Caption video
    • Craft appropriate alt text
    • Document instructions for forms
    and uncommon workflows
    • Document form error handling
    and status messages
    • No images of text

    View full-size slide

  46. 57
    Common a11yProblems

    View full-size slide

  47. 58
    • Chunking
    • Landmarks
    • Headings
    • Lists
    • How Chunking Helps Content Processing
    www.nngroup.com/articles/chunking/
    • 7 Tips for Presenting Bulleted Lists in
    Digital Content
    www.nngroup.com/articles/presenting-
    bulleted-lists/
    • Accessible Landmarks
    www.scottohara.me/blog/2018/03/03/land
    marks.html
    DEMO 9: Dense Blocks of Content

    View full-size slide

  48. 59
    • Verbose
    • Expected behavior
    • Code along:
    codepen.io/emilyplewis/pen/
    XWKxNeg?editors=1000
    • Block Links, Cards, Clickable
    Regions, Rows, Etc:
    adrianroselli.com/2020/02/block-
    links-cards-clickable-regions-
    etc.html
    • How to Stop Opening Links in
    New Windows without Warning:
    knowbility.org/blog/2019/links-
    opening-new-windows-no-
    warning/
    DEMO 10: Links

    View full-size slide

  49. 60
    • Links for navigation, buttons for action
    • Code along:
    codepen.io/emilyplewis/pen/LYZgbOm?editors=1000
    • 2nd Rule of ARIA
    www.w3.org/TR/wai-aria-practices/examples/button/button.html
    DEMO 11: Control Semantics

    View full-size slide

  50. 62
    • Contextual keyboards
    • Auto-filling fields
    • Code along:
    codepen.io/emilyplewis/pen/
    abZRBEE?editors=1000
    • Mobile Input Types
    mobileinputtypes.com
    • Exploring WCAG 2.1 — 1.3.5
    Identify Input Purpose
    knowbility.org/blog/2018/WCAG2
    1-135InputPurpose
    DEMO 12: Input Semantics

    View full-size slide

  51. 63
    • Code along:
    codepen.io/emilyplewis/pen/YzWJpeR?editors=1000
    DEMO 13: Grouping Fields

    View full-size slide

  52. 64
    • Reference field by visible label
    • How to resolve error
    • Focus management
    • jQuery Validation Plugin:
    jqueryvalidation.org
    DEMO 14: Error Messages

    View full-size slide

  53. 66
    • Hide from screen readers
    • Code along:
    codepen.io/emilyplewis/pen/
    LYZgqJr?editors=1000
    • An alt decision tree
    www.w3.org/WAI/tutorials/image
    s/decision-tree/
    DEMO 15: Decorative Images

    View full-size slide

  54. 67
    • Descriptive alternative text
    • Code along: codepen.io/emilyplewis/pen/Exydrdb?editors=1000
    • Contextually Marking up accessible images and SVGs:
    www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-
    a11y.html
    DEMO 16: Functional/Informative Images

    View full-size slide

  55. 68
    • Transcripts
    • Avoid auto-play
    Audio

    View full-size slide

  56. Does anyone else
    use captions?

    View full-size slide

  57. 70
    • Captions
    • Audio description
    • Avoid auto-play
    • The Problem With YouTube's Terrible Closed ‘Craptions’:
    www.wired.com/story/problem-with-youtubes-terrible-closed-craptions/
    Video

    View full-size slide

  58. 72
    Accessible Interactions

    View full-size slide

  59. 73
    • AKA “accordions”
    • Button semantics
    • Decorative icons
    • ARIA semantics
    • Collapsible sections
    inclusive-components.design/collapsible-
    sections/
    DEMO 17: Collapsible Sections

    View full-size slide

  60. 74
    • AKA “tabs”
    • List semantics
    • Section landmarks
    • ARIA
    • ARIA Authoring Practices Tabs
    www.w3.org/TR/wai-aria-practices-
    1.1/#tabpanel
    • Tabbed interfaces
    inclusive-components.design/tabbed-
    interfaces/
    DEMO 18: Tabbed Interfaces

    View full-size slide

  61. 75
    • AKA “popups”
    • Heading semantics
    • Button semantics
    • ARIA
    • ARIA Authoring Practices Dialog (Modal):
    www.w3.org/TR/wai-aria-practices-
    1.1/#dialog_modal
    DEMO 19: Dialogs

    View full-size slide

  62. 76
    But wait... There’s more!

    View full-size slide

  63. 77
    • Leaner code
    • Cleaner code
    • Supports performance
    • Potential for better search engine
    optimization (SEO)
    • Easy to read
    • Easy to learn/adopt
    • Easier to maintain
    • More efficient, consistent
    development
    Benefits Beyond Accessibility

    View full-size slide

  64. John Ruskin
    The Stones of Venice - Volume I
    Quality is never an accident.
    It is always the result of
    intelligent effort.

    View full-size slide