Slide 1
Slide 1 text
Accessing Higher Ground
November 10, 2020
Developing for
Accessibility with
Semantic HTML
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
3
• Use Zoom's Q&A panel
• Q&A segments throughout, including before and after lunch, and at the
end of workshop
Your Questions!
Slide 4
Slide 4 text
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!
Slide 5
Slide 5 text
5
Demos
abrightumbrella.com/training/semantic-html
Slide 6
Slide 6 text
6
• Your preferred browser
• CodePen collection:
codepen.io/collection/DpYNdk?grid_type=list
Code Along - Required
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
Who has coded
HTML before?
Slide 10
Slide 10 text
I Love HTML
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
Simplicity
Slide 13
Slide 13 text
• –Johnny Appleseed
• Type a quote here.
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
It’s About People
Slide 16
Slide 16 text
Can people with disabilities get the
same information, perform the
same interactionsand function as
others with comparable ease?
Slide 17
Slide 17 text
17
Science &Art
Slide 18
Slide 18 text
18
• WCAG is bare minimum
• Accessible Icon Buttons
www.sarasoueidan.com/blog/accessible-icon-buttons/
DEMO 1: Icon controls
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
20
A Brief History
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
22
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
caniuse.com/#search=html5
Slide 26
Slide 26 text
Why?
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
31
• Custom menus
• Native menus
• Styling a Select Like It’s 2019:
www.filamentgroup.com/lab/select-css.html
DEMO 3: Select Menus
Slide 32
Slide 32 text
32
What Is
Semantic HTML?
Slide 33
Slide 33 text
33
Markup that has meaning
Markup that describes the content, not the presentation
Elements used for their intended purpose*
Valid*
Slide 34
Slide 34 text
Priority of Constituencies
Slide 35
Slide 35 text
It’s About People
Slide 36
Slide 36 text
36
• Code along:
codepen.io/emilyplewis/pen/LYZgbNe?editors=1000
DEMO 4: Input Labels
Slide 37
Slide 37 text
Who has heard of
progressive
enhancement?
Slide 38
Slide 38 text
38
Progressive Enhancement
www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
Illustration: Tiffany Tse, Shopify
Slide 39
Slide 39 text
39
Progressive Enhancement
www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care
Original illustration: Tiffany Tse, Shopify
Slide 40
Slide 40 text
The First Rule of ARIA
www.w3.org/TR/using-aria/#rule1
Slide 41
Slide 41 text
41
• Code along:
codepen.io/emilyplewis/pen/MWePboj?editors=1000
DEMO 5: Disabled Buttons
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
43
Good? Bad?
Slide 44
Slide 44 text
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."
Slide 45
Slide 45 text
45
AKA Basic A11y Testing
Check YourWork
Slide 46
Slide 46 text
46
• Accessibility
• Validation
• Document outline
• axe
www.deque.com/axe/browser-
extensions
• Web Developer Toolbar
chrispederick.com/work/web-
developer
DEMO 6: Automated Checks
Slide 47
Slide 47 text
Tools vs. Knowledge
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Developing for Accessibility with
Semantic HTML
Lunch Break
12:00-1:30pm (US Mountain)
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
53
What Is
Accessible Content?
Slide 54
Slide 54 text
54
Reduces cognitive load
Helps users focus
Conveys content structure, hierarchy
Slide 55
Slide 55 text
55
Accessible Content
in practice
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
57
Common a11yProblems
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
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
Slide 63
Slide 63 text
63
• Code along:
codepen.io/emilyplewis/pen/YzWJpeR?editors=1000
DEMO 13: Grouping Fields
Slide 64
Slide 64 text
64
• Reference field by visible label
• How to resolve error
• Focus management
• jQuery Validation Plugin:
jqueryvalidation.org
DEMO 14: Error Messages
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
68
• Transcripts
• Avoid auto-play
Audio
Slide 69
Slide 69 text
Does anyone else
use captions?
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
72
Accessible Interactions
Slide 73
Slide 73 text
73
• AKA “accordions”
• Button semantics
• Decorative icons
• ARIA semantics
• Collapsible sections
inclusive-components.design/collapsible-
sections/
DEMO 17: Collapsible Sections
Slide 74
Slide 74 text
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
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
76
But wait... There’s more!
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
John Ruskin
The Stones of Venice - Volume I
Quality is never an accident.
It is always the result of
intelligent effort.
Slide 79
Slide 79 text
No content