Accessibility (a11y)
by Tomas Trescak
t.trescak@westernsydney.edu.au
a11y
/
Introduction
- Accessibility ensures everyone can use your app
- It’s a legal and ethical must
- 👺 Myth : It’s just for blind users
a11y
/
WCAG Prinsiples
- Web Content Accessibility Guidelines (WCAG)
- Perceivable : Info must be accessible
- Operable : Interfaces must be navigable
- Understandable : Clear and predictable
- Robust : Works with assistive tech
a11y
/
Example
<div>
<div>Tech Blog</div>
<div>
<a href="/">Home</a>
<a href="/posts">Posts</a>
<a href="/about">About</a>
</div>
<div>
Some Post
</div>
</header>
<header>
<h1>Tech Blog</h1>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/posts">Posts</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
Some Post
</main>
Bad
Good
a11y
/
Dropdown
// TagFilter.tsx
import React, { useState } from 'react';
const TagFilter: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div role="combobox" aria-label="Filter posts by tag">
<button
aria-expanded={isOpen}
aria-controls="tag-list"
onClick={() => setIsOpen(!isOpen)}
>
Select Tag
</button>
<ul id="tag-list" hidden={!isOpen}>
<li><button onClick={() => setIsOpen(false)}>JavaScript</button></li>
<li><button onClick={() => setIsOpen(false)}>CSS</button></li>
</ul>
</div>
);
};
export default TagFilter;
a11y
/
Visual Accessibility
- High contrast for readability
- Avoid colour-only cues
- Test with tools
a11y
/
Keyboard Navigation
// PostEditor.tsx
import React from 'react';
const PostEditor: React.FC = () => {
return (
<form>
<label htmlFor="title">Post Title</label>
<input
id="title"
type="text"
required
tabIndex={0}
/>
<label htmlFor="content">Content</label>
<textarea id="content" required></textarea>
<button type="submit">Save Post</button>
</form>
);
};
a11y
/
Case Study
- Problem : Users couldn’t filter posts
- Solution : ARIA and keyboard support
- Impact : Inclusive experience
- Lesson : Test early, test often
a11y
/
Wrap-Up
- Use semantic HTML and ARIA
- Ensure keyboard accessibility
- Test with real tools ( NVDA , VoiceOver , Lighthouse )
- Resources: WCAG , WebAIM