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.

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
20. 20 A Brief History
21. 21 <p> <h1> <img>
22. 22 <font> <marquee> <big> <blink>
23. 23 <nav> <main> <aside>
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
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
51. Developing for Accessibility with Semantic HTML Lunch Break 12:00-1:30pm (US Mountain)
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
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
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
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.
80. @emilylewis emily@knowbility.org training@knowbility.org