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 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
    [email protected]
    • @emilylewis

    View 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 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 Slide

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

    View Slide

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

    View 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 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 Slide

  9. Who has coded
    HTML before?

    View Slide

  10. I Love HTML

    View Slide

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

  12. Simplicity

    View Slide

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

    View Slide

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

  15. It’s About People

    View Slide

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

    View Slide

  17. 17
    Science &Art

    View Slide

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

    View Slide

  19. View Slide

  20. 20
    A Brief History

    View Slide

  21. 21

    View Slide

  22. 22


    View Slide

  23. 23



    View Slide

  24. View Slide

  25. caniuse.com/#search=html5

    View Slide

  26. Why?

    View Slide

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

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

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

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

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

    View Slide

  32. 32
    What Is
    Semantic HTML?

    View Slide

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

    View Slide

  34. Priority of Constituencies

    View Slide

  35. It’s About People

    View Slide

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

    View Slide

  37. Who has heard of
    progressive
    enhancement?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. View Slide

  43. 43
    Good? Bad?

    View Slide

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

  45. 45
    AKA Basic A11y Testing
    Check YourWork

    View Slide

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

  47. Tools vs. Knowledge

    View Slide

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

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

  50. View Slide

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

    View Slide

  52. View Slide

  53. 53
    What Is
    Accessible Content?

    View Slide

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

    View Slide

  55. 55
    Accessible Content
    in practice

    View Slide

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

  57. 57
    Common a11yProblems

    View Slide

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

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

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

  61. View Slide

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

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

    View Slide

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

    View Slide

  65. View Slide

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

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

  68. 68
    • Transcripts
    • Avoid auto-play
    Audio

    View Slide

  69. Does anyone else
    use captions?

    View Slide

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

  71. View Slide

  72. 72
    Accessible Interactions

    View Slide

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

    View Slide

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

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

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

    View Slide

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

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

    View Slide

  79. View Slide

  80. View Slide