<h3>Table key</h3>
<ul>
<li>Green + star = no restrictions</li>
<li>Yellow + caution sign = use with caution</li>
<li>Red + hand = not recommended</li>
</ul>
<table id="results">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th scope="col">Testing Parameters</th>
<th scope="col">Pattern 1<br><img></th>
<th scope="col">Pattern 2<br><img></th>
<th scope="col">Pattern 3<br><img></th>
<th scope="col">Pattern 4<br><img></th>
<th scope="col">Pattern 5<br><svg></th>
<th scope="col">Pattern 6<br><svg></th>
<th scope="col">Pattern 7<br><svg></th>
<th scope="col">Pattern 8<br><svg></th>
<th scope="col">Pattern 9<br><svg></th>
<th scope="col">Pattern 10<br><svg></th>
<th scope="col">Pattern 11<br><svg></th>
<th scope="col">Pattern 12<br><svg></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="odd-row">
<h4>Desktop: <br>macOS + Safari + VoiceOver</h4><br><em>(macOS v10 + Safari v14)<br><br>*recommended combination for VO on desktop*</em>
</th>
<td class="stop" aria-label="not recommended">
<em>not focusable</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing an alt description</em><br><br><i class="fas fa-hand-paper"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="even-row">
<h4>Desktop: <br>macOS + Chrome + VoiceOver</h4><br><em>(macOS v10 + Chrome v90)</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
To get missing image descriptions, open the context menu<br><br><em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="odd-row">
<h4>Desktop: <br>macOS + Firefox + VoiceOver</h4><br><em>(macOS v10 + Firefox v88)</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="even-row">
<h4>Desktop: <br>macOS + Edge + VoiceOver</h4><br><em>(macOS v10 + Edge v90)</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="odd-row">
<h4>Desktop: <br>Windows + Chrome + NVDA</h4><br><em>(Windows 10 + Chrome v71 + NVDA v2019)<br><br>*recommended combination for NVDA on desktop*</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
To get missing image descriptions, open the context menu.<br><br><em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="even-row">
<h4>Desktop: <br>Windows + Firefox + NVDA</h4><br><em>(Windows 10 + Firefox v63 + NVDA v2019)<br><br>*recommended combination for NVDA on desktop*</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>not focusable</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="odd-row">
<h4>Desktop: <br>Windows + Edge + NVDA</h4><br><em>(Windows 10 + Edge v90 + NVDA v2019)</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>not focusable</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="even-row">
<h4>Mobile: <br>iOS + Safari + VoiceOver</h4><br><em>(iOS v14 + Safari v14 + VoiceOver on an iPhone XR)<br><br>*recommended combination for VO on mobile*</em>
</th>
<td class="stop" aria-label="not recommended">
<em>not focusable</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="odd-row">
<h4>Mobile: <br>iOS + Chrome + VoiceOver</h4><br><em>(iOS v14 + Chrome v87 + VoiceOver on an iPhone XR)</em>
</th>
<td class="stop" aria-label="not recommended">
<em>not focusable</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="even-row">
<h4>Mobile: <br>Android + Chrome + Talkback</h4><br><em>(Android v12 + Chrome v90 + TalkBack v9 on a Samsung Galaxy S9 and Google Pixel 10)<br><br>*recommended combination for TalkBack on mobile*</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="stop" aria-label="not recommended">
<em>image detected, but missing an alt description</em><br><br><i class="fas fa-hand-paper">
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><text> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em><desc> ignored</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
<tr>
<th scope="row" class="odd-row">
<h4>Mobile: <br>Android + Firefox + Talkback</h4><br><em>(Android v12 + Firefox v88 + TalkBack v9 on a Samsung Galaxy S9 and Google Pixel 10)</em>
</th>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say?<br><br><em>image not fully discoverable</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="go" aria-label="no restrictions">
What does the fox say? Will we ever know?<br><br><i class="fas fa-star"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? Will we ever know? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
<td class="caution" aria-label="use with caution">
What does the fox say? What does the fox say? Will we ever know?<br><br><em>repeated alt description</em><br><br><i class="fas fa-exclamation-triangle"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
body {
font-family: "Open Sans", sans-serif;
margin: 2rem;
}
h4 {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
color: red;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
max-width: 90%;
margin: 0 auto;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 2rem;
text-align: center;
}
code {
background-color: #444444;
color: #ffffff;
border-radius: 0.3rem;
padding: 4px 5px 5px;
white-space: nowrap;
line-height: 2;
}
.fas {
text-align: center;
width: 100%;
font-size: 30px;
}
p {
clear: both;
}
table {
border-collapse: collapse;
margin: 1rem;
}
col {
border: 1px solid #444444;
}
tr {
border-bottom: 1px solid #444444;
}
thead th {
padding: 1rem;
background-color: #444444;
border-right: 1px solid #ffffff;
color: #ffffff;
min-width: 80px;
}
thead th:last-child {
border-right: none;
}
td,
tbody th {
padding: 1rem;
text-align: left;
vertical-align: top;
}
.odd-row {
background: #c1c1c1;
}
.even-row {
background: #eeeeee;
}
.go {
background: #008000;
color: #ffffff;
}
.caution {
background: #f6d100;
}
.stop {
background: #d40000;
color: #ffffff;
}
/* Lightbulb colors */
.fox {
width: 100%;
}
.lightblue {
fill: CornflowerBlue;
}
.darkblue {
fill: RoyalBlue;
}
.lightgreen {
fill: LightGreen;
}
.darkgreen {
fill: MediumSeaGreen;
}
.lightpurple {
fill: MediumSlateBlue;
}
.darkpurple {
fill: DarkSlateBlue;
}
.lightpink {
fill: LightPink;
}
.darkpink {
fill: PaleVioletRed;
}
.lightturq {
fill: PaleTurquoise;
}
.darkturq {
fill: MediumTurquoise;
}
.lightorchid {
fill: Orchid;
}
.darkorchid {
fill: MediumOrchid;
}
.lightorange {
fill: LightSalmon;
}
.darkorange {
fill: Tomato;
}
.lightred {
fill: Crimson;
}
.darkred {
fill: DarkRed;
}
This Pen doesn't use any external JavaScript resources.