High quality mark-up impacts accessibility, performance & discoverability

The impact that high quality
mark-up can have on
accessibility, performance,
and discoverability.
Matthew Deeprose
https://matthewdeeprose.github.io/ 1

Based on what I learned from
building a personal site on
github pages.
2
Matthew Deeprose
https://matthewdeeprose.github.io/

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

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

Workflow
Write using
Notepad
++
Save (in
OneDrive?)
Push using
github
desktop
Published
on WWW
5

So what did I learn?
6

What I learned and will share today 2
7
Layout
• Responsive
reflow
• Using
semantic
landmarks
Navigation Colour Performance Discoverability

Layout 2
8

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

10 modern layouts in 1 line of CSS
10

Landmarks
11

Semantic landmarks
12

Semantic landmarks 2
13

Navigating regions / landmarks
Screen reader Shortcut key to browse
region
JAWS r
NVDA d
Narrator d
Voiceover Use the rotor
14

Semantic landmarks and NVDA “banner
landmark”
“Navigation
landmark”
“main
landmark”
“complementary
landmark”
“content info
landmark”
15

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

Revealing landmarks and regions
17

Do you use reader / simplified mode?
18

Layout concluding remarks
Reflow is vital and expected.
Use semantic tags or landmarks.
19

20
Layout Navigation
• Designing for
screen reader
/ keyboard
users
• Respecting
user
preference
• Designing for
vestibular
disorders
Colour Performance Discoverability

Navigation
21

Initial issues with menu
Pay attention to:
•What the screen reader
announces.
•Focus order.
22

Before
23

After
24

Implementing Expanded / Collapsed
25

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

Improved focus and screen reader handling
 Selecting hamburger
now announces whether
it is expanded or
collapsed.
 Focus order is now
logical.
27

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

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.

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

31
So many arias!
• aria-activedescendant
• aria-atomic
• aria-autocomplete
• aria-braillelabel
• aria-brailleroledescription
• aria-busy
• aria-checked
• aria-colcount
• aria-colindex
• aria-colindextext
• aria-colspan
• aria-controls
• aria-current
• aria-describedby
• aria-description
• aria-details
• aria-disabled
• aria-dropeffect
• aria-errormessage
• aria-expanded
• aria-flowto
• aria-grabbed
• aria-haspopup
• aria-hidden
• aria-invalid
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-level
• aria-live
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-owns
• aria-placeholder
• aria-posinset
• aria-pressed
• aria-readonly
• aria-relevant
• aria-required
• aria-roledescription
• aria-rowcount
• aria-rowindex
• aria-rowindextext
• aria-rowspan
• aria-selected
• aria-setsize
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
31

“Scroll to top”
The Guardian UoS (old style) elearn
32

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

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.”

Implementing scroll to top
35

Setting / emulating motion preference
36

Example
37

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

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

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

Navigation final thoughts
Pay attention to the
small details as well
as the large.
Respect user
preference.
Listen carefully to
screen reader
output.
41

42
Layout Navigation Colour
• Designing for
dark mode
• WCAG 3
contrast
• Building an
accessible
colour toggle
that
remembers
your
preference
Performance Discoverability

Light mode / Dark mode
43

Are you on the dark side?
Do you prefer:
• Light mode
• Dark mode
• It depends…
44

Setting up / testing
45

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

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

Setting up light / dark styles
48

Trying to use UoS colours: dark mode
Melanzane
Plain
Black
Rich
Black
Neutral 4 Marine 6 Horizon 1
#161415 #231F20 #00131D #E1E8EC #C1D100 #FCBC00
#161415 AAA AAA AAA
#231F20 AAA AAA AAA
#00131D AAA AAA AAA
#E1E8EC AAA AAA AAA
#C1D100 AAA AAA AAA
#FCBC00 AAA AAA AAA
49

Different background shades (Dark mode)
50

Trying to use UoS colours: light mode
Rich
Black
Ivory
Twilight
Blue
Neutral 1 Marine 1
Sherpa
Blue
Horizon 1 Horizon 5
#00131D #FFFFF4 #F0F2E8 #495961 #005C84 #005051 #FCBC00 #8D3970
#00131D AAA AAA
#FFFFF4 AAA AAA AAA AAA AAA
#F0F2E8
#495961 AAA
#005C84 AAA
#005051 AAA
#FCBC00 AAA
#8D3970 AAA
51

Different background shades (Light mode)
52

Ivory?
Rello, L & Baeza-Yates, R, “Optimal colors to improve readability for
people with dyslexia”, WAI R&D Symposia 2012.
53

Favicons
54

Focus styles (dark mode)
55

Focus styles (light mode)
56

:focus:not(:focus-visible)
57

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.

Contrast
59

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

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

“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

“Future-proofing” contrast
Pass
WCAG 2.1
AAA
Pass APCA
63

Dark mode (APCA)
Melanzane
Plain
Black
Rich
Black
Neutral 4 Marine 6 Horizon 1
#161415 #231F20 #00131D #E1E8EC #C1D100 #FCBC00
#161415
#231F20 Lc -90.1 Lc -70.7 Lc-70.5
#00131D Lc -91.6 Lc -72.2 Lc -72.0
#E1E8EC Lc 89.0 Lc 91.0
#C1D100 Lc 71.1 Lc 73.0
#FCBC00 Lc 70.9 Lc 72.9
64

Light mode: APCA
Rich
Black
Ivory
Twilight
Blue
Neutral 1 Marine 1
Sherpa
Blue
Horizon 1 Horizon 5
#00131D #FFFFF4 #F0F2E8 #495961 #005C84 #005051 #FCBC00 #8D3970
#00131D Lc -106.8 Lc -72.0
#FFFFF4 Lc 104.8 Lc -89.6 Lc 84.4 Lc 90.4 Lc 83.6
#F0F2E8
#495961 Lc -89.6
#005C84 Lc -89.3
#005051 Lc -94.8
#FCBC00 Lc 72.9
#8D3970 Lc -88.5
65

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

The button
67

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.

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

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

Remember this?
71

Apply theme based on a saved preference on page
load.
Upon page load, apply theme based on saved preference, if present.
72

Theme toggle example
73

Hang on…
74

Who uses screen readers?
75
79.50%
21.90%
7.30% 3.60% 3.20% 2.40%
0.00%
20.00%
40.00%
60.00%
80.00%
100.00%
Disability types (% of respondents)
WebAIM Screen Reader User Survey #9, 2021

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

77
Layout Navigation Colour Performance
• Page load
time analysis
• Critical render
blockers
• using
Lighthouse
• Recent DL
blog
improvements
Discoverability

Performance
78

Chrome mobile, 3G, Mumbai, India
First
Byte
Start
Render
FCP
Speed
Index
LCP TBT Total Bytes
https://matthewdeeprose.github.i
o 1.569 2.4 2.345 2.475 2.344 0 158KB
https://elearn.southampton.ac.uk 3.956 7.96 7.778 7.985 8.245 0.193 1,029KB
https://www.soton.ac.uk 4.285 7.9 7.641 8.594 9.751 0.736 2,111KB
https://generic.wordpress.soton.
ac.uk/digital-learning/ 4.114 8.7 8.619 10.992 13.269 0.594 792KB
79

Firefox v97, Cable, Frankfurt, Germany
First Byte
Start
Render
FCP
Speed
Index
LCP TBT Total Bytes
https://matthewdeeprose.github.io 0.284 0.5 0.491 0.516 ≥ .000 64KB
https://elearn.southampton.ac.uk 1.937 3.3 3.237 3.305 ≥ .129 1,029KB
https://www.soton.ac.uk 0.951 2.2 2 4.602 ≥ .423 2,334KB
https://generic.wordpress.soton.ac.
uk/digital-learning/ 2.433 4.7 4.61 11.642 0.128 12,294KB
80

What does the DL blog load?
81

Render-blocking resources on DL blog
82

Lighthouse
83

Lighthouse 3
https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/
84

Lighthouse Result
85

UoS home page (not OneWeb) Lighthouse Result
86

elearn Lighthouse Result
87

DL Blog Lighthouse Result
88

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

Before and after example: the title
90

Before and after example: the footer
91

Before and after example: menu used with
keyboard
92

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

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?

95
Layout Navigation Colour Performance Discoverability
• Open graph
• Card
validators

Discoverability
96
Site map Google Search
Console
RSS

Meh-ta
97

Card validators
98

It’s happening!
99

Discoverability recommendations
Use card validators to check content
previews will look good on the socials /
teams etc.

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.

Conclusion
103

104
Code snippets
Code snippets
created using:
• PrismJS
• a11y syntax
highlighting by
Eric Bailey

Resources, slides, transcript
All materials can be downloaded from:
https://matthewdeeprose.github.io/high_quality-markup_impact
105

More

High quality mark-up impacts accessibility, performance & discoverability

Recommended

Recommended

More Related Content

Similar to High quality mark-up impacts accessibility, performance & discoverability

Similar to High quality mark-up impacts accessibility, performance & discoverability (20)

More from Matthew Deeprose

More from Matthew Deeprose (20)

Recently uploaded

Recently uploaded (20)

High quality mark-up impacts accessibility, performance & discoverability