Skip to content

Instantly share code, notes, and snippets.

@philsherry

philsherry/details.html

Created April 23, 2020 09:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save philsherry/1d618aad7f1569a4600be4592629bbc2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save philsherry/1d618aad7f1569a4600be4592629bbc2 to your computer and use it in GitHub Desktop.
Download ZIP
How browsers handle the details element with screen readers.
Raw
details.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Details element VoiceOver test</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"
media="(prefers-color-scheme: dark)"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"
media="(prefers-color-scheme: light)"
/>
<style>
.user-agent {
border: 2px solid #bada55;
font-family: 'Courier New', Courier, monospace;
margin: 2em 0;
padding: 20px;
}
.browser-matrix {
max-width: 90vw;
overflow-x: scroll;
}
.browser-matrix__span {
font-size: 1.25em;
}
@media (prefers-color-scheme: dark) {
thead td {
border-bottom: 1px solid #dbdbdb;
}
tbody th {
border-bottom: transparent;
}
}
</style>
</head>
<body>
<main>
<h1>Details element VoiceOver test</h1>
<p>
VoiceOver is completely ignoring the <code>details</code> element in
Safari, but announces it in Chrome. Ehh.
</p>
<details>
<summary>
Why is WebKit ruining my life?
</summary>
<p>
Get over it, Sherry.
</p>
</details>
<h2>VoiceOver will announce a button</h2>
<button>WebKit is a dick</button>
<h2>User agent details</h2>
<div class="user-agent">
<output id="UserAgent"></output>
</div>
<h2>Version details</h2>
<div class="browser-matrix">
<table>
<caption>
How browsers handle the details element with screen readers.
</caption>
<thead>
<tr>
<td></td>
<th id="version" scope="col">
Version
</th>
<th id="user-agent" scope="col">
User agent
</th>
<th id="assistive-tech" scope="col">
AT
</th>
<th id="visible" scope="col">
Visible
</th>
</tr>
</thead>
<tbody>
<tr>
<th
id="macos-10.15.4"
class="browser-matrix__span"
colspan="5"
scope="colgroup"
>
macOS 10.15.4 (19E287)
</th>
</tr>
<tr>
<th headers="macos-10.15.4" id="19E287-1">
Safari
</th>
<td
headers="19E287-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
Version 13.1 (15609.1.20.111.8)
</td>
<td
headers="19E287-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="19E287-1 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="19E287-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
<tr>
<th headers="macos-10.15.4" id="19E287-2">
Safari Technology Preview
</th>
<td
headers="19E287-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
Release 104 (Safari 13.2, WebKit 15610.1.8.3)
</td>
<td
headers="19E287-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="19E287-2 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="19E287-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
<tr>
<th headers="macos-10.15.4" id="19E287-3">
Chrome
</th>
<td
headers="19E287-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
Version 81.0.4044.113
</td>
<td
headers="19E287-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122
</td>
<td
headers="19E287-3 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="19E287-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😻
</td>
</tr>
<tr>
<th
id="ios-13.4.1"
class="browser-matrix__span"
colspan="5"
scope="colgroup"
>
iOS 13.4.1 (17E262)
</th>
</tr>
<tr>
<th id="17E262-1" headers="ios-13.4.1">
Safari
</th>
<td
headers="17E262-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
13.1 Mobile
</td>
<td
headers="17E262-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="17E262-1 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="17E262-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
<tr>
<th id="17E262-2" headers="ios-13.4.1">
Google Chrome
</th>
<td
headers="17E262-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
CriOS/81.0.4044.124
</td>
<td
headers="17E262-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="17E262-2 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="17E262-2 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
<tr>
<th id="17E262-3" headers="ios-13.4.1">
Microsoft Edge
</th>
<td
headers="17E262-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
45.3.8
</td>
<td
headers="17E262-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="17E262-3 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="17E262-3 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
<tr>
<th
id="ios-13.4.5"
class="browser-matrix__span"
colspan="5"
scope="colgroup"
>
iOS 13.4.5 (17F5044d)
</th>
</tr>
<tr>
<th id="17F5044d-1" headers="ios-13.4.5">
Safari
</th>
<td
headers="17F5044d-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 version"
>
13.1.1 Mobile
</td>
<td
headers="17F5044d-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 user-agent"
>
AppleWebKit/605.1.15 (KHTML, like Gecko)
</td>
<td
headers="17F5044d-1 assistive-tech ios-13.4.1 ios-13.4.5 macos-10.15.4"
>
VO
</td>
<td
headers="17F5044d-1 ios-13.4.1 ios-13.4.5 macos-10.15.4 visible"
>
😾
</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
<script>
document.getElementById('UserAgent').value = navigator.userAgent
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment