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. 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
  2. 3 • Use Zoom's Q&A panel • Q&A segments throughout,

    including before and after lunch, and at the end of workshop Your Questions!
  3. 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!
  4. 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
  5. 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
  6. 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.
  7. Can people with disabilities get the same information, perform the

    same interactionsand function as others with comparable ease?
  8. 18 • WCAG is bare minimum • Accessible Icon Buttons

    www.sarasoueidan.com/blog/accessible-icon-buttons/ DEMO 1: Icon controls
  9. 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
  10. 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
  11. 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
  12. 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
  13. 31 • Custom menus • Native menus • Styling a

    Select Like It’s 2019: www.filamentgroup.com/lab/select-css.html DEMO 3: Select Menus
  14. 33 Markup that has meaning Markup that describes the content,

    not the presentation Elements used for their intended purpose* Valid*
  15. 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."
  16. 46 • Accessibility • Validation • Document outline • axe

    www.deque.com/axe/browser- extensions • Web Developer Toolbar chrispederick.com/work/web- developer DEMO 6: Automated Checks
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 64 • Reference field by visible label • How to

    resolve error • Focus management • jQuery Validation Plugin: jqueryvalidation.org DEMO 14: Error Messages
  25. 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
  26. 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
  27. 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
  28. 73 • AKA “accordions” • Button semantics • Decorative icons

    • ARIA semantics • Collapsible sections inclusive-components.design/collapsible- sections/ DEMO 17: Collapsible Sections
  29. 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
  30. 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
  31. 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
  32. John Ruskin The Stones of Venice - Volume I Quality

    is never an accident. It is always the result of intelligent effort.