Introduction to Keyboard Navigation and Accessibility

Introduction to
Keyboard Navigation
and Accessibility
https://matthewdeeprose.github.io/keyboardnav.html

Why talk about keyboard navigation first? 1
It covers fundamental aspects of accessibility and
accessibility testing.
Awareness should have a positive impact in
improving iSolutions services.
It introduces other concepts we’ll discuss in future
meetings.

meetings.

What do we mean by keyboard navigation?
A method to navigate web
pages / software etc for
those who cannot or do
not wish to use a mouse
or trackpad.

Keyboard (non-mouse) navigation (1)
Not only for keyboard navigation
Used with other assistive technologies, e.g.
• Mouth stick, head pointer, eye gaze, sip-
and-puff.
Focus indicators are used by screen readers
Power users love keyboard shortcuts

Keyboard (non-mouse) navigation (2)
Navigate website using tab, enter/return, cursor keys
Interaction Keystrokes
Navigate to most
elements
Tab
Shift + Tab - navigate backward
Link Enter (PC) / Return (Mac)
Button
Enter (PC) / Return (Mac)
or Spacebar
Checkbox Spacebar - check/uncheck a checkbox
Radio buttons
↑ / ↓ or ← / → = select an option.
Tab - move to the next element.
https://webaim.org/techniques/keyboard/
Deque Systems
UX Collective

Demonstration 1 on example site
https://mle.southampton.ac.uk/bb/access/example

Who uses keyboard navigation? (1)
Roughly 7% of working-age adults who have severe
dexterity difficulties* are likely to choose, out of
necessity or preference, to use their keyboard to
navigate a page or some kind of assistive technology to
browse content online.
31.9%** of people in the US workplace have at least
one basic action difficulty or limitation.
* https://www.powermapper.com/blog/website-accessibility-disability-statistics/
** https://www.disabled-world.com/disability/types/mobility/

Conditions such as…
• Multiple sclerosis
• Dyspraxia
• Parkinson’s disease
• Arthritis
• Carpal tunnel syndrome
…impair or limit fine motor skills.

Visually impaired users: using a mouse requires hand /
eye co-ordination.
Those using Dragon Dictate (for example) to navigate
their computer while not using the mouse or keyboard.
“Tab”, “Tab”, “Tab”, “Click Link”, “8”

A user with a broken mouse or trackpad.
Photo credit:
https://www.reddit.com/user/TheRealTrietsLab

Types of impairment Microsoft Design

Example situational impairments
Using someone else’s
computer: they have a
trackball, trackpad, unusual
mouse that you don’t like /
know how to use…

Example situational impairments (2)
Using device one-handed.
Using device in a cramped space
with limited movement.
Adobe Stock Image

What recommendations are there?
The Web Content Accessibility Guidelines provide a
method for us to ensure we can use keyboard
navigation.

Levels of conformance: A
A
Minimum level
of conformance.
AA
AAA

Levels of conformance: AA
A
Minimum level
of conformance.
AA
More accessible
/
Recommended.
AAA

Levels of conformance: AAA
A
Minimum level
of conformance.
AA
More accessible
/
Recommended.
AAA
Even more
accessible /
Enhanced.

Aspects of WCAG that relate to keyboard
navigation (introduction)
We can use the site with
a keyboard.
• 2.1.1 Keyboard
• 2.1.3 Keyboard (No
Exception)
There is consideration for
how we experience sites
when using a keyboard.
• 2.4.1 Bypass Blocks
• 2.4.3 Focus Order
• 2.1.2 No Keyboard Trap
• 2.1.4 Character Key
Shortcuts
Visual indications of the
interface are clear.
• 2.4.7 Focus Visible
• 2.4.11 Focus
Appearance (Minimum)
• 2.4.12 Focus
Appearance
(Enhanced)

navigation (introduction) (2)
a keyboard.
• 2.1.1 Keyboard
Exception)
Shortcuts
• 2.4.11 Focus
• 2.4.12 Focus
Appearance
(Enhanced)

navigation (introduction) (3)
a keyboard.
• 2.1.1 Keyboard
Exception)
Shortcuts
• 2.4.11 Focus
• 2.4.12 Focus
Appearance
(Enhanced)

Accessibility guidelines have four high-level
principles.
Perceivable
Cater to our
senses.
Operable
We can use
the site.
Understandable
Readable
and
predictable.
Robust
Compatible
across
devices -
even those
to come in
the future.

Keyboard navigation applies to two of these
principles.
Perceivable
Cater to our
senses.
Operable
We can use
the site.
Understandable
Readable
and
predictable.
Robust
Compatible
across
devices -
even those
to come in
the future.

2.1.1 Keyboard
(Level A)
• All functionality of the content is operable through a
keyboard interface without requiring specific timings
for individual keystrokes, except where the underlying
function requires input that depends on the path of
the user's movement and not just the endpoints.
https://www.w3.org/TR/WCAG22/#keyboard

2.1.3 Keyboard (No Exception)
(Level AAA)
• All functionality of the content is operable through a
keyboard interface without requiring specific timings
for individual keystrokes.
https://www.w3.org/TR/WCAG22/#keyboard-no-
exception

2.4.1 Bypass Blocks
(Level A)
• A mechanism is available to bypass blocks of content
that are repeated on multiple Web pages.
https://www.w3.org/TR/WCAG22/#bypass-blocks

Example of a Bypass Block

2.4.3 Focus Order
(Level A)
• If a Web page can be navigated sequentially and the
navigation sequences affect meaning or operation,
focusable components receive focus in an order that
preserves meaning and operability.
https://www.w3.org/TR/WCAG22/#focus-order

Example of Focus Order

Demonstration 2 on example site
• https://mle.southampton.ac.uk/bb/access/example

2.1.2 No Keyboard Trap
(Level A)
• If keyboard focus can be
moved to a component of
the page using a keyboard
interface…
• focus can be moved away
from that component using
only a keyboard interface,
• if it requires more than
unmodified arrow or tab
keys or other standard exit
methods, the user is
advised of the method for
moving focus away.
https://www.w3.org/TR/WCAG22/#no-keyboard-trap

Examples
• Press Escape to leave a
modal (pop up box).
•Similarly in modals,
making sure that you can
only tab between links /
actions with the modal,
and not content outside
of it.

2.1.4 Character Key Shortcuts
(Level A)
If a keyboard shortcut is
implemented in content using
only letter (including upper- and
lower-case letters),
punctuation, number, or symbol
characters, then at least one of
the following is true:
• Turn off
• A mechanism is available to turn
the shortcut off;
• Remap
• A mechanism is available to
remap the shortcut to include
one or more non-printable
keyboard keys (e.g., Ctrl, Alt);
• Active only on focus
• The keyboard shortcut for a user
interface component is only
active when that component has
focus.
https://www.w3.org/TR/WCAG22/#character-key-shortcuts

Which of the WCAG principles are we
considering? (2)
Perceivable
Cater to our
senses.
Operable
We can use
the site.
Understandable
Readable
and
predictable.
Robust
Compatible
across
devices -
even those
to come in
the future.

2.4.7 Focus Visible
(Level A) Any keyboard
operable user
interface has a mode
of operation where
the keyboard focus
indicator is visible.
https://www.w3.org/TR/WCAG22/#focus-visible

More examples

Indicating focus, example 1

2.4.11 Focus Appearance (Minimum) 1
(Level AA)
• For the keyboard focus
indicator of each User
Interface Component, all of
the following are true:
• Minimum area:
The focus indication area is
greater than or equal to a
1 CSS pixel border of the
focused control, or has a
thickness of at least 8 CSS
pixels along the shortest side
of the element.
https://www.w3.org/TR/WCAG22/#focus-appearance-minimum

(Level AA)
Interface Component, all
of the following are true:
Change of contrast:
The color change for the
focus indication area has a
contrast ratio of at least
3:1 with the colors of the
unfocused state.

(Level AA)
Interface Component, all of
the following are true:
Adjacent contrast:
• The focus indication area
has a contrast ratio of at
least 3:1 against all
adjacent colors for the
minimum area or greater,
or has a thickness of at
least 2 CSS pixels.

(Level AA)
Unobscured:
•The item with focus is
not entirely hidden by
author-created content.

2.4.12 Focus Appearance (Enhanced) 1
(Level AAA)
Minimum area:
•The focus indication
area is greater than or
equal to a 2 CSS
pixel solid border around
the control.
https://www.w3.org/TR/WCAG22/#focus-appearance-enhanced

(Level AAA)
Change of contrast:
•Color changes used to
indicate focus have a
contrast ratio of at least
4.5:1 with the colors
changed from the
unfocused control.

(Level AAA)
Unobscured:
•No part of the focus
indicator is hidden by
author-created content.

Colour contrast?

Examples of different colour contrasts
Revisiting hard to read contrast
examples
Hard to read
1.19:1
Hard to read
1.64:1
Hard to read
1.84:1
Hard to read? 2.71:1 Hard to read? 2.96:1 Hard to read? 4:1
Easy to read
7.58:1 Easy to read 15.27:1 Easy to read 21:1

The ratios to remember
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):

More about colour contrast in a future session

navigation (summary)
a keyboard.
• 2.1.1 Keyboard
Exception)
Shortcuts
• 2.4.11 Focus
• 2.4.12 Focus
Appearance
(Enhanced)

So what do I need to remember? (1)
• Can I use the keyboard to use the site/service?
• Without getting “trapped”.
• With a sensible order of making my way through it?
• Can I see the focus indicator clearly?
• Can I “skip to content”?

• With a sensible order of making my way through it?

• With a sensible order for making my way through it?

Final demonstration
Access the prospectus from an example University web
page:
• https://www.southampton.ac.uk/student-
life/accommodation

Introduction to Keyboard Navigation and Accessibility

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to Keyboard Navigation and Accessibility

Similar to Introduction to Keyboard Navigation and Accessibility (20)

More from Matthew Deeprose

More from Matthew Deeprose (20)

Recently uploaded

Recently uploaded (20)

Introduction to Keyboard Navigation and Accessibility

Editor's Notes