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
  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
  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!
  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!
  5. 5 Demos abrightumbrella.com/training/semantic-html

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

    Along - Required
  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
  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
  9. Who has coded HTML before?

  10. I Love HTML

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

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

  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
  15. It’s About People

  16. Can people with disabilities get the same information, perform the

    same interactionsand function as others with comparable ease?
  17. 17 Science &Art

  18. 18 • WCAG is bare minimum • Accessible Icon Buttons

    www.sarasoueidan.com/blog/accessible-icon-buttons/ DEMO 1: Icon controls
  19. None
  20. 20 A Brief History

  21. 21 <p> <h1> <img>

  22. 22 <font> <marquee> <big> <blink>

  23. 23 <nav> <main> <aside>

  24. None
  25. caniuse.com/#search=html5

  26. Why?

  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
  28. 28 • 20.5% of home pages had more than one

    <h1> • 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
  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
  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
  31. 31 • Custom menus • Native menus • Styling a

    Select Like It’s 2019: www.filamentgroup.com/lab/select-css.html DEMO 3: Select Menus
  32. 32 What Is Semantic HTML?

  33. 33 Markup that has meaning Markup that describes the content,

    not the presentation Elements used for their intended purpose* Valid*
  34. Priority of Constituencies

  35. It’s About People

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

  37. Who has heard of progressive enhancement?

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

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

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

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

  42. None
  43. 43 Good? Bad?

  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."
  45. 45 AKA Basic A11y Testing Check YourWork

  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
  47. Tools vs. Knowledge

  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
  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
  50. None
  51. Developing for Accessibility with Semantic HTML Lunch Break 12:00-1:30pm (US

    Mountain)
  52. None
  53. 53 What Is Accessible Content?

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

    hierarchy
  55. 55 Accessible Content in practice

  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
  57. 57 Common a11yProblems

  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
  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
  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
  61. None
  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
  63. 63 • Code along: codepen.io/emilyplewis/pen/YzWJpeR?editors=1000 DEMO 13: Grouping Fields

  64. 64 • Reference field by visible label • How to

    resolve error • Focus management • jQuery Validation Plugin: jqueryvalidation.org DEMO 14: Error Messages
  65. None
  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
  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
  68. 68 • Transcripts • Avoid auto-play Audio

  69. Does anyone else use captions?

  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
  71. None
  72. 72 Accessible Interactions

  73. 73 • AKA “accordions” • Button semantics • Decorative icons

    • ARIA semantics • Collapsible sections inclusive-components.design/collapsible- sections/ DEMO 17: Collapsible Sections
  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
  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
  76. 76 But wait... There’s more!

  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
  78. John Ruskin The Stones of Venice - Volume I Quality

    is never an accident. It is always the result of intelligent effort.
  79. None
  80. @emilylewis emily@knowbility.org training@knowbility.org