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
   

   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
   • emily@knowbility
   • @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. View Slide

22. View Slide

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. @emilylewis
    emily@knowbility.org
    training@knowbility.org
    

    View Slide