Skip to content

Instantly share code, notes, and snippets.

View fstorr's full-sized avatar

Francis Storr fstorr

7 followers · 2 following
View GitHub Profile
@fstorr
fstorr / how-to-get-speech-output-as-text-from-screen-readers.md
Last active May 12, 2025 12:43
How to get speech output as text from screen readers

How to get speech output as text from screen readers

Sometimes you need text, rather than voice, output from screen readers. Why? It's really useful for bug reports ("this disclosure icon is announced as 'black dash triangle dash filled dash x2 underscore final dot png' and needs alt text"). Luckily, getting this text is easy to do.

VoiceOver on MacOS

In VoiceOver you press Option + Control + Shift + C to have the last item that was announced copied to the clipboard. Bonus feature: pressing Option + Control + Shift + Z to save the last phrase to the desktop as an audio file.

VoiceOver on iOS

A three-finger quadruple tap copies the last announcement to the clipboard.

@fstorr
fstorr / greyscale
Created October 11, 2024 17:29
:root{
filter:grayscale(1)
}
@fstorr
fstorr / github-source-code-wrapping
Created May 2, 2022 20:31
Stylus style to get source code to wrap on GitHub. Set the "applies to" to "URLs on the domain" and then use github.com
.blob-code-inner{
white-space:pre-wrap;
}
@fstorr
fstorr / aria-widget-roles
Last active February 11, 2022 18:30
ARIA widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
[role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"],
[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"],
[role="switch"],[role="tab"],[role="tabpanel"],[role="textbox"],[role="treeitem"]{
outline:2px solid #000f8a;
outline-offset: -2px;
outline-style: dashed;
}
:is([role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"],
[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"],
@fstorr
fstorr / aria-composite-widget-roles
Last active February 11, 2022 18:12
ARIA composite widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
[role="combobox"],[role="grid"],[role="listbox"],[role="menu"],[role="menubar"],[role="radiogroup"],[role="tablist"],[role="tree"],[role="treegrid"]{
outline:2px solid #1e2eb8;
}
@fstorr
fstorr / text-spacing
Created February 11, 2022 17:11
*{
letter-spacing: 0.12em !important;
line-height: 1.5 !important;
word-spacing: 0.16em !important;
}
p{
margin-bottom: 2em !important;
}
@fstorr
fstorr / headings-highlight
Last active February 9, 2022 22:51
highlight headings (HTML and ARIA)
:is(h1,h2,h3,h4,h5,h6)::after,
:is(h1,h2,h3,h4,h5,h6):empty::after,
[role="heading"]::after,
[role="heading"]:is([aria-level="1"],[aria-level="2"],[aria-level="3"],[aria-level="4"],[aria-level="5"],[aria-level="6"])::after{
background: #ff8f51;
border:1px solid #e96115;
border-radius:4px;
color:#000;
display: inline-block;
margin:0 0.2em;
@fstorr
fstorr / focus-visible-highlight
Created February 9, 2022 19:45
*:focus-visible{
outline:2px solid hsl(120,100%,50%) !important;
box-shadow: 0 0 0.25em 3px hsla(0,0%,0%,.60) !important;
}
@fstorr
fstorr / highlight-buttons-links-listbox-tabs
Created February 9, 2022 19:20
@fstorr
fstorr / Accessible radio buttons with aria-labelledby
Last active January 10, 2022 11:48
How to make the question related to radio button answers accessible to screen reader users by using the aria-labelledby attribute.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible radio buttons using aria-labelledby</title>
</head>
<body>
<main role="main">
<h1>Accessible radio buttons using aria-labelledby</h1>