Skip to content

Instantly share code, notes, and snippets.

View bpmckee's full-sized avatar

Billy McKee bpmckee

4 followers · 1 following
View GitHub Profile
@bpmckee
bpmckee / index.html
Last active August 12, 2019 21:09
A11y training
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 19:33
A11y basics - 9. Screen Reader live region
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1"
aria-labelledby="abc">
▼
@bpmckee
bpmckee / index.html
Last active December 12, 2021 19:37
A11y basics - BONUS - 10. Windows high contrast
<h1>Golf Scorecard</h1>
<p class="score" aria-live="true">
You are at par
</p>
<div class="button-container">
<button data-offset="-1"
aria-labelledby="abc">
▼
@bpmckee
bpmckee / index.html
Last active December 12, 2021 19:28
A11y basics - 8. Hide duplicate content
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1"
aria-labelledby="abc">
▼
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:49
A11y basics - 7. Labels & descriptions
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:48
A11y basics - 6. Screen reader intro
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:41
A11y basics - 5. Missing hover context
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:32
A11y basics - 4. Keyboard events
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:29
A11y basics - 2. Color Contrast
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>
@bpmckee
bpmckee / index.html
Last active December 12, 2021 18:30
A11y basics - 3. Focusable
<h1>Golf Scorecard</h1>
<p class="score">
You are at par
</p>
<div class="button-container">
<button data-offset="-1">▼</button>
<span class="tooltip">Lower score</span>
</div>