Accessible components for developers and designers

Accessible Components
for developers and designers
By Vegard Haugstvedt, Webstep

— Tim Berners-Lee
“The power of the Web is in its
universality. Access by
everyone regardless of
disability is an essential
aspect.”

TERMINOLOGY
Numeronym of Accessibility
Accessibility
Content should be perceivable,
operable and understandable.
Inclusive design
Designing for as many users with as many
backgrounds as possible.
Universal design
Designing for everybody in one solution
A11Y

● Accessibility tree
● Screen reader
● Reading list
● Switch and other tools
WHAT IS ASSISTIVE TECHNOLOGY?

ACCESSIBILITY TREE
An element provides certain
traits for assistive technology
Accessible name
The text content of an element
Role
Tells assistive technology how the element
can be interacted with or presented
State
Current state, like «checked»,
«expanded», etc.
Value
Value of input fields
Element

Accessible name
Text content Labels
All form elements must
have a label.
Alternative
text
Alt-attribute for images,
title in SVGs, etc.
ARIA-label
Aria-label, aria-labelledby,
aria-describedby
The basis for accessible
name is child text nodes
of the element.

Headings give content structure, splits it up
into easily digestible parts and enable the
user to get a quick overview and find the
relevant content.
HEADINGS

Uses of headings
Sections Hierachy
Headings organizes content
in levels, so one section
belongs to a parent.
Table of
contents
Headings provide an
automatic table of
contents
Navigation
Headings enable the user
to quickly skip to the
relevant content
Headings mark the
beginning of a new
section of content

<body>
<h1>Main title</h1>
<p>…</p>
<p>…</p>
<h2>Section title</h2>
<p>…</p>
<h3>Subsection title</h3>
<p>…</p>
<h2>New section title</h2>
<p>…</p>
</body>
EXAMPLE

Landmarks provide structure
and organize content by type
and importance.
LANDMARKS

LANDMARKS
Main Article/Section
Headings organizes content
in levels, so one section
belongs to a parent.
Header/Footer
Headings provide an
automatic table of
contents
Nav
Headings enable the user
to quickly skip to the
relevant content
Headings mark the
beginning of a new
section of content

Skip links are links that
enable in-page navigation to
skip past large amounts or
repetitive content.
Skip links are mostly hidden
before receiving focus.
SKIP LINKS

• First link on page
• Mostly hidden before
receiving focus
• Activating the link moves
focus to the main tag
SKIP TO MAIN

OTHER USE CASES
FOR SKIP LINKS
Skip past tables, maybe
with lots of buttons, or
similar content.
Large amounts of content
Skip past content with
keyboard traps, content you
can’t guarantee
accessibility for, ads, etc.
Inaccessible content

<body>
<a href="#main" class="skip-link">
Skip to main content
</a>
<header>
<nav>
<ul>…</ul>
</nav>
<header>
<main id="main" tabindex="-1">
…
</main>
</body>
IMPLEMENTING A SKIP LINK
HTML
<body>
<a href="#main" class="skip-link">
Skip to main content
</a>
<header>
<nav>
<ul>…</ul>
</nav>
<header>
<main id="main" tabindex="-1">
…
</main>
</body>

.skip-link:not(:focus) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
IMPLEMENTING A SKIP LINK
CSS
.skip-link:focus {
// Normal link styles
// Should have good focus indicator
}
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

A disclosure widget is a component
that can hide and show content.
DISCLOSURE WIDGET

● <details>
○ <summary>Open/close</summary>
○ This content is shown when the
widget is open.
● </details>
Details/summary
- The native solution

● const DisclosureWidget = () => {
● const [isOpen, setIsOpen] = useState(false);
● return (
● <>
● <button
● aria-expanded={isOpen}
● aria-controls="disclosure_content"
● onClick={() => setIsOpen(!isOpen)}
● >
● {isOpen ? "Close" : "Open"}
● </button>
● <div id="disclosure_content">
● This content is displayed when open.
● </div>
● </>
● );
● };
Disclosure widget
- The simple solution
● button[aria-expanded]:before {
● content: "";
● display: inline-block;
● width: 0;
● height: 0;
● border-top: 0.25rem solid transparent;
● border-bottom: 0.25rem solid transparent;
● border-left: 0.5rem solid black;
● margin-right: 0.5rem;
● }
● button[aria-expanded="true"]:before {
● transform: rotate(90deg);
● }
● button[aria-expanded="false"] + * {
● display: none;
● }
● Pattern inspired by Adrian Roselli:
https://adrianroselli.com/2020/05/disclosure-widgets.html

● Use the disclosure widget with links
● Escape should close the dropdown
● Clicking outside the dropdown
should close it.
Dropdown menu

Do NOT use aria-role="menu"
on websites!
… unless you are replicating
a native application menu

Always have visual order
reflect the order in
the markup!
With one or two exceptions…

A card is a component with a title,
maybe some text and an optional image.
We often want the entire card to be
clickable.
CARD LAYOUT

Wrap the entire card in a link, and you’re
done! Right?
No!
First instinct

● Keep the link text as short and
unique as possible.
● Consider the programmatical order
of the content.
● Unless there is a lot of text content,
don’t use heading tags for the title.
Accessible cards

Card markup
● <article class="card">
● <div class="card__content">
● <a class="card__title">
● Checkered cotton shirt
● <span class="card__ribbon">
● On sale!
● </span>
● </a>
● <p class="card__price">$49</p>
● <p class="card__old-price">
● Previous price: $79
● </p>
● </div>
● <img
● class="card__image"
● src="..."
● alt="Man wearing a checkered shirt in red,
● white and blue colors."
● />
● </article>
● On sale!
● </span>
● </a>
● </p>
● </div>
● <img
● src="..."
● />
● </article>
● On sale!
● </span>
● </a>
● </p>
● </div>
● <img
● src="..."
● />
● </article>
● On sale!
● </span>
● </a>
● </p>
● </div>
● <img
● src="..."
● />
● </article>

Card styling
● .card {
● display: grid;
● grid-template-columns:
● repeat(auto-fit,minmax(12rem,1fr));
● }
● .card__content {
● text-align: center;
● }
● .card__image {
● order: -1;
● }
● .card__ribbon {
● position: absolute;
● ...
● }

Making the
entire card
clickable
● .card {
● position: relative;
● }
● a.card__title:before {
● content: ""
● position: absolute;
● top: 0;
● left: 0;
● right: 0;
● bottom: 0;
● }

● Add an event listener to the card
element instead!
○ We only need to listen for
mouseclicks
○ Keyboard users will only need
to have access to the actual
link.
● Should add cursor styling to
highlight that the entire card is
clickable.
Making the
entire card
clickable

● Remember to add space between
cards!
● Users need space tap for scrolling,
etc.
Card grid

TESTING YOUR COMPONENTS
FOR ACCESSIBILITY
Automated checks for
contrast, missing alt-
text, etc.
Lighthouse
Check that all interactive
components can be reached and
interacted with using a keyboard
Keyboard
Check that all content is
visible and operable on
different screen sizes
Zoom/Resize
Test with real users.
You are nowhere near
finished without this.
User testing
Check heading
structure, focus order,
etc. Also some audits
like Lighthouse.
Extensions
Check that content is
presented correctly.
Name, Role, Status and
Value. Interaction.
Screen reader

● Lowest-hanging fruit
● Helps with a lot of other
issues, like screen reader
compatibility.
● Easy, anyone can do it.
● You’d be surprised how many
bugs arefound in this stage.
Keyboard

● Is all content perceivable (visible)?
○ Contrast issues on dynamic
backgrounds?
● Does any content get cut off or
moved off-stage?
Zoom

● Lighthouse, etc.
● Cover normal, easily
discoverable bugs that a
machine can discover.
● 25-50% of bugs can be
found this way.
Browser audit

● HeadingsMap
● Axe Pro
● High contrast mode
● NerdeFocus
Browser
extensions

● Lighthouse, etc.
● Cover normal, easily
discoverable bugs that a
machine can discover.
● 25-50% of bugs can be
found this way.
Screen readers

● Don’t go here before you complete
the rest of the testing!
● Your real answer for whether your
webpage/application is accessible.
● Remember – users of assistive
technology are as diverse as the rest
of us!
User testing

CREDITS: This presentation template was created by
Slidesgo, incluiding icons by Flaticon, and
infographics & images by Freepik.
THANKS!
Do you have any questions?
@it_vegard
webstep.no

Accessible components for developers and designers

Recommended

Recommended

More Related Content

Similar to Accessible components for developers and designers

Similar to Accessible components for developers and designers (20)

More from Vegard Haugstvedt

More from Vegard Haugstvedt (6)

Recently uploaded

Recently uploaded (20)

Accessible components for developers and designers

Editor's Notes