The document discusses how to build an accessible personal website on GitHub pages, covering topics like layout, navigation, color, performance, and discoverability. It provides guidance on using responsive design, semantic HTML, keyboard navigation, color contrast, page speed optimization, and social media integration. Screenshots and code examples demonstrate implementing techniques like semantic landmarks, ARIA attributes, dark mode/light mode toggling, and scroll to top functionality in an accessible way.
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
The impact that high quality mark-up can have on accessibility, performance, and discoverability
1. The impact that high quality
mark-up can have on
accessibility, performance,
and discoverability.
Matthew Deeprose
https://matthewdeeprose.github.io/ 1
2. Based on what I learned from
building a personal site on
github pages.
2
Matthew Deeprose
https://matthewdeeprose.github.io/
3. What I learned and will share today
3
Layout
• Responsive
reflow
• Using
semantic
landmarks
Navigation
• Designing for
screen reader
/ keyboard
users
• Respecting
user
preference
• Designing for
vestibular
disorders
Colour
• Designing for
dark mode
• WCAG 3
contrast
• Building an
accessible
colour toggle
that
remembers
your
preference
Performance
• Page load
time analysis
• Critical render
blockers
• using
Lighthouse
• Recent DL
blog
improvements
Discoverability
• Open graph
• Card
validators
https://matthewdeeprose.github.io/
4. What is github pages?
GitHub Pages is a free static
site hosting service.
• One site per github account.
• ____.github.io address
• 1GB quota
• 100GB bandwidth per
month
• Not for commercial use
• No support for support
server-side languages
4
https://matthewdeeprose.github.io/
6. So what did I learn?
6
https://matthewdeeprose.github.io/
7. What I learned and will share today 2
7
Layout
• Responsive
reflow
• Using
semantic
landmarks
Navigation Colour Performance Discoverability
https://matthewdeeprose.github.io/
9. WCAG 1.4.10: Reflow (AA)
Content can be
presented without
loss of information
or functionality, and
without requiring
scrolling in two
dimensions for:
9
Vertical
scrolling
content
Horizontal
scrolling
content
Except for
content
requiring
two-
dimensional
layout
https://matthewdeeprose.github.io/
10. 10 modern layouts in 1 line of CSS
10
https://matthewdeeprose.github.io/
14. Navigating regions / landmarks
Screen reader Shortcut key to browse
region
JAWS r
NVDA d
Narrator d
Voiceover Use the rotor
14
https://matthewdeeprose.github.io/
15. Semantic landmarks and NVDA “banner
landmark”
“Navigation
landmark”
“main
landmark”
“complementary
landmark”
“content info
landmark”
15
https://matthewdeeprose.github.io/
16. WCAG 1.3.1: Info and Relationships (A)
Information, structure, and
relationships conveyed
through presentation can
be programmatically
determined or are
available in text.
16
https://matthewdeeprose.github.io/
20. What I learned and will share today 3
20
Layout Navigation
• Designing for
screen reader
/ keyboard
users
• Respecting
user
preference
• Designing for
vestibular
disorders
Colour Performance Discoverability
https://matthewdeeprose.github.io/
26. 4.1.2: Name, Role, Value (A)
For all user
interface
components…
The name and role can be programmatically
determined
States, properties, and values that can be set
by the user can be programmatically set
Notification of changes to these items is
available to user agents, including assistive
technologies.
26
https://matthewdeeprose.github.io/
27. Improved focus and screen reader handling
Selecting hamburger
now announces whether
it is expanded or
collapsed.
Focus order is now
logical.
27
https://matthewdeeprose.github.io/
28. Hamburger comparisons
Site Works with Keyboard? Semantics
used
ARIA-
expanded?
Libguides Yes (but no focus indicator
on button and very low
contrast on menu items)
Button Yes
Digital Learning
blog
No Checkbox No
Elearn No Div No
UoS (OneWeb) Yes, but cannot close with
keyboard
Link No
28
https://matthewdeeprose.github.io/
29. ARIA?
ARIA modifies the
accessibility tree, changing
how assistive technology
(AT) presents content to
users.
Only affects AT.
29
Add extra label and description
text to elements
Express semantic relationships
between elements
Make parts of a page "live,"
immediately informing assistive
technology of changes.
https://matthewdeeprose.github.io/
30. The first rule of ARIA…
If you can, use a native
HTML element or attribute
with the semantics and
behaviour you require
already built in.
30
https://matthewdeeprose.github.io/
32. “Scroll to top”
The Guardian UoS (old style) elearn
32
https://matthewdeeprose.github.io/
33. Scroll to top
Should be usable with keyboard.
Scrolling smoothness should cater to preference.
After use, the keyboard focus should be in a logical place.
33
https://matthewdeeprose.github.io/
34. WCAG considerations
34
2.1.1 Keyboard
(A)
2.1.3 Keyboard
(No Exception)
(AAA)
2.4.3 Focus
Order
(A)
“Except where the underlying
function requires input that
depends on the path of the
user's movement and not just
the endpoints.”
https://matthewdeeprose.github.io/
38. 2.3.3 Animation from Interactions (Level AAA)
Allow users to prevent
animation from being
displayed on Web pages.
Some users experience
distraction or nausea from
animated content.
Triggered reactions include
nausea
migraine headaches,
and potentially needing
bed rest to recover.
38
https://matthewdeeprose.github.io/
39. Vestibu-what?
Lars Chittka; Axel Brockmann (CC BY 2.5)
Vestibular disorders can be caused by both
genetic and environmental factors. It’s part of the
larger spectrum of conditions that make up
accessibility concerns and it affects more than
70 million people.
Vestibular disorders can cause your vestibular
system to struggle to make sense of what is
happening, resulting in loss of balance and
vertigo, migraines, nausea, and hearing loss.
If you have a vestibular disorder or have certain
kinds of migraine or seizure triggers, navigating
the web can be a lot like walking through a
minefield — you’re perpetually one click away
from activating an unannounced animation. And
that’s just for casual browsing.
39
https://matthewdeeprose.github.io/
40. Scroll to top comparisons
Site Works with
Keyboard?
Semantics
used
Where
does
focus go?
Scroll behaviour
Lib guides Yes Link (with js
onclick)
Stays at
end of
page
Smooth (even if you
prefer reduced motion).
Elearn (old) Yes Anchor link Stays at
place in
footer
Smooth (even if you
prefer reduced motion).
UoS (OneWeb) No Div N/A Smooth AND respects
motion preference.
UoS (old style) No Span N/A Auto (instant).
40
https://matthewdeeprose.github.io/
41. Navigation final thoughts
Pay attention to the
small details as well
as the large.
Respect user
preference.
Listen carefully to
screen reader
output.
41
https://matthewdeeprose.github.io/
42. What I learned and will share today 4
42
Layout Navigation Colour
• Designing for
dark mode
• WCAG 3
contrast
• Building an
accessible
colour toggle
that
remembers
your
preference
Performance Discoverability
https://matthewdeeprose.github.io/
43. Light mode / Dark mode
43
https://matthewdeeprose.github.io/
44. Are you on the dark side?
Do you prefer:
• Light mode
• Dark mode
• It depends…
44
https://matthewdeeprose.github.io/
45. Setting up / testing
45
https://matthewdeeprose.github.io/
46. Benefits of dark mode
Save battery on LED
displays.
Can reduce flicker on poor
quality screens.
Less likely to trigger
photophobia.
46
Easier to use in low-light
conditions.
May reduce eye strain.
Some people just prefer it
https://matthewdeeprose.github.io/
47. Accessibility considerations
Using maximal contrast
can induce eyestrain and
reduces reading stamina.
• For example:
• #000000 on #FFFFFF
• rgb(255,255,255) on
rgb(0,0,0)
47
https://matthewdeeprose.github.io/
48. Setting up light / dark styles
48
https://matthewdeeprose.github.io/
53. Ivory?
Rello, L & Baeza-Yates, R, “Optimal colors to improve readability for
people with dyslexia”, WAI R&D Symposia 2012.
53
https://matthewdeeprose.github.io/
58. 2.4.12 Focus Appearance (Enhanced)
58
The focus indication area is greater than or equal to a 2 CSS pixel solid
border around the control.
Colour changes used to indicate focus have a contrast ratio of at least
4.5:1 with the colours changed from the unfocused control.
No part of the focus indicator is hidden by author-created content.
https://matthewdeeprose.github.io/
60. WCAG 2.1 / 2.2
3:1
4.5:1
7:1
Minimum for
Graphical
Objects / UI
AA
Minimum for Text
AAA
Enhanced level
for Text
(not to scale)
1.4.11 Non-text Contrast (Level AA) 1.4.3 Contrast (Minimum) (Level AA) 1.4.6 Contrast (Enhanced) (Level AAA):
2.4.11 Focus Appearance (Minimum) 2.4.12 Focus Appearance (Enhanced)
60
https://matthewdeeprose.github.io/
61. WCAG 3.0
Uses APCA method for measuring
contrast
• In development
• Considers font size and weight
• Text / background results not
reversable
• Perceptually-based
measurement
• Lightness contrast (Lc)
61
https://matthewdeeprose.github.io/
62. “We were always at war with Oceania”
Foreground Colour Background Colour
#231F20
Plain Black
#758D9A
Neutral 2
Quick Brown Fox
WCAG Rating APCA Rating
4.68:1 - AA Lc 38.9 Fail*
Foreground Colour Background Colour
#002E3B
Prussian
#EF7D00
Horizon 2
Quick brown fox
WCAG Rating APCA Rating
5.22:1 - AA Lc 46.2 Fail*
62
https://matthewdeeprose.github.io/
66. Light / dark mode toggle
Light theme.
It’s light so the light
switch is off.
Dark theme.
It’s dark so I need to
turn the light on.
• Change theme using a button
• Preference set in localStorage
• UI pattern based on an on / off
button using aria-pressed
• Changes are announced to a
screen reader using aria-live
• Using more than colour alone to
differentiate the change between
themes
66
https://matthewdeeprose.github.io/
68. Three Functions
68
Set ARIA state of the button on page load (pressed or not pressed).
Allow changing themes and save the preference so it is maintained across
the side, announce change to screen reader and change ARIA state of
button.
Apply theme based on a saved preference on page load.
https://matthewdeeprose.github.io/
69. Set ARIA state of the button on page load (pressed
or not pressed).
Set ARIA state of the button on page load (pressed or not pressed).
69
https://matthewdeeprose.github.io/
70. Allow changing themes and save the preference so it is maintained across the side, announce change
to screen reader and change ARIA state of button.
Allow changing themes and save the preference so it is maintained across
the side, announce change to screen reader and change ARIA state of
button.
70
https://matthewdeeprose.github.io/
72. Apply theme based on a saved preference on page
load.
Upon page load, apply theme based on saved preference, if present.
72
https://matthewdeeprose.github.io/
76. 4.1.2: Name, Role, Value (A) again
For all user
interface
components…
The name and role can be programmatically
determined
States, properties, and values that can be set
by the user can be programmatically set
Notification of changes to these items is
available to user agents, including assistive
technologies.
76
https://matthewdeeprose.github.io/
77. What I learned and will share today 5
77
Layout Navigation Colour Performance
• Page load
time analysis
• Critical render
blockers
• using
Lighthouse
• Recent DL
blog
improvements
Discoverability
https://matthewdeeprose.github.io/
89. Making accessibility improvements to the DL blog
325 lines of additional CSS
that
resolve contrast issues
underline links
WCAG 2.2 AAA
compliant focus indicators
fix navigation oddities
89
https://matthewdeeprose.github.io/
90. Before and after example: the title
90
https://matthewdeeprose.github.io/
91. Before and after example: the footer
91
https://matthewdeeprose.github.io/
92. Before and after example: menu used with
keyboard
92
https://matthewdeeprose.github.io/
93. Improving performance
• Using TinyPNG and
TinyJPG to optimise
image size.
• Using Lazy loading for
images and iframe
embeds
•Load scripts only on
pages where they will be
used.
•Reduce chaining critical
requests by using media
queries.
93
https://matthewdeeprose.github.io/
94. Performance final thoughts
94
Render blocking
resources?
Third party font scripts.
Are plugins still
necessary?
Auto-playing videos?
What’s being loaded on
every page, whether it’s
useful or not?
https://matthewdeeprose.github.io/
95. What I learned and will share today 6
95
Layout Navigation Colour Performance Discoverability
• Open graph
• Card
validators
https://matthewdeeprose.github.io/
100. Discoverability recommendations
Use card validators to check content
previews will look good on the socials /
teams etc.
https://matthewdeeprose.github.io/ 101
101. What next?
102
Migrate to static site generator such as Eleventy to streamline build process?
Use a “click to load” for video embeds?
Refactor CSS and use CSS variables instead?
Continue building components to identify appropriate ARIA, and dark/light mode.
Use as basis for further experiments.
https://matthewdeeprose.github.io/
104. Resources, slides, transcript
All materials can be downloaded from:
https://matthewdeeprose.github.io/high_quality-markup_impact
105
https://matthewdeeprose.github.io/