<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://doublegreat.dev/listen/feed.xml" rel="self" type="application/atom+xml" /><link href="https://doublegreat.dev/listen/" rel="alternate" type="text/html" /><updated>2026-05-08T22:12:33+00:00</updated><id>https://doublegreat.dev/listen/feed.xml</id><title type="html">Listen</title><subtitle>Testing punctuation and markup for audible variances in screen readers.</subtitle><author><name>@double-great</name></author><entry><title type="html">How to record audio from screen readers</title><link href="https://doublegreat.dev/listen/how-to-record/" rel="alternate" type="text/html" title="How to record audio from screen readers" /><published>2020-08-08T00:00:00+00:00</published><updated>2020-08-08T00:00:00+00:00</updated><id>https://doublegreat.dev/listen/how-to-record</id><content type="html" xml:base="https://doublegreat.dev/listen/how-to-record/"><![CDATA[<p>This project captures the audio output from several screen readers. The process to capture each recording is a bit of a challenge as it requires different operating systems and platforms. You can capture these recordings in many ways. Here is one workflow.</p>

<h2 id="software">Software</h2>

<ul>
  <li><a href="https://www.audacityteam.org/">Audacity</a> - multi-track audio editor and recorder</li>
  <li><a href="https://www.virtualbox.org/">VirtualBox</a> - virtualization platform that can run Microsoft Windows as a virtual machine on macOS</li>
  <li><a href="https://www.nvaccess.org/download/">NVDA</a> - screen reader for Windows</li>
  <li><a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> - screen reader for Windows that provides speech and Braille output for computer applications</li>
  <li><a href="https://github.com/mattingalls/Soundflower">Soundflower</a> - record system audio output directly without sending it into the air to record</li>
  <li><a href="https://support.apple.com/quicktime">QuickTime</a> - play and record audio and video files on macOS</li>
</ul>

<h2 id="hardware-and-platforms">Hardware and platforms</h2>

<ul>
  <li>Macbook (macOS 10.15 and Windows 8.1 using VirtualBox) - while setting up Windows in VirtualBox is beyond the scope of these notes, be sure that audio from Windows is playing properly</li>
  <li>iPhone (iOS 13) - using the built-in screen recording function of iOS handles the capture on the iPhone</li>
</ul>

<h2 id="configure-macos-to-pass-audio-to-an-application">Configure macOS to pass audio to an application</h2>

<p>These steps will show you how to use Soundflower to pass audio to QuickTime to create a recording.</p>

<p>Start by following the <a href="https://github.com/mattingalls/Soundflower/releases/tag/2.0b2">installation instructions</a> from these (now several years old) Soundflower release notes:</p>

<ol>
  <li>Download and install the <a href="https://github.com/mattingalls/Soundflower/releases/download/2.0b2/Soundflower-2.0b2.dmg">signed Soundflower 2.0b2 installer</a></li>
  <li>Start playing music through the built-in audio</li>
  <li>Open Applications &gt; Utilities &gt; Audio MIDI Setup</li>
  <li>Click ‘+’ to add a new ‘Create Multi Output Device’
<img src="/listen/assets/audio-midi-setup-01.png" alt="Multi Output audio setup" /></li>
  <li>Select both “Soundflower 2ch” and “Built-in Output”</li>
  <li>Click gear button and select “use this device for sound output”
<img src="/listen/assets/audio-midi-setup-02.png" alt="Configure audio output" /></li>
</ol>

<p>The music you started playing in step 2 should continue to play. Now the audio is going to your built-in audio and is being passed to Soundflower for recording elsewhere. With the music continuing to play:</p>

<ol>
  <li>Open up QuickTime</li>
  <li>File &gt; New Audio Recording</li>
  <li>Click the down arrow (next to record button) and choose “Soundflower (2ch)” as the input
<img src="/listen/assets/quicktime-test.png" alt="Select audio output for QuickTime test" /></li>
  <li>You should now see audio levels changing</li>
  <li>Press record to capture the music output</li>
  <li>Play back the recording for confirmation</li>
</ol>

<h2 id="record-audio-from-screen-readers-with-audacity">Record audio from screen readers with Audacity</h2>

<p>For heavier recording and editing capabilities, use Audacity. After confirming a working internal audio recording setup, <a href="https://www.audacityteam.org/">install and launch Audacity</a>. Choose Soundflower (2ch) as the microphone and your new Multi-Output Device as your speaker.</p>

<p>With audio playing, hit “Click to Start Monitoring” in Audacity. The visualizer should start to move.</p>

<p><img src="/listen/assets/audacity-output.png" alt="Audacity output visualizer" /></p>

<h3 id="record-voiceover-on-macos">Record VoiceOver on macOS</h3>

<ol>
  <li>Begin recording in Audacity</li>
  <li>Press <kbd>⌘</kbd> + <kbd>F5</kbd> to start VoiceOver</li>
  <li>Use VoiceOver to navigate</li>
  <li>When finished, stop the recording in Audacity</li>
  <li>Press <kbd>⌘</kbd> + <kbd>F5</kbd> to stop VoiceOver</li>
</ol>

<h3 id="record-nvda-and-jaws-on-macos">Record NVDA and JAWS on macOS</h3>

<ol>
  <li>Open VirtualBox and launch Windows</li>
  <li><a href="https://www.nvaccess.org/download/">Install NVDA</a> (free) and <a href="https://www.freedomscientific.com/products/software/jaws/">install JAWS</a> (40-minute demo mode) in Windows</li>
  <li>Open NVDA or JAWS in Windows</li>
  <li>Open Audacity on macOS</li>
  <li>Confirm audio output from NVDA or JAWS is reflected in Audacity</li>
  <li>Record the audio as you navigate</li>
</ol>

<h3 id="record-voiceover-on-ios">Record VoiceOver on iOS</h3>

<ol>
  <li>General &gt; Control Center &gt; Add Screen Recording</li>
  <li>Pull down Control Center &gt; Start recording
<img src="/listen/assets/ios-screen-recording.png" alt="Screen recording icon in Control Center" /></li>
  <li>General &gt; Accessibility &gt; VoiceOver &gt; turn On</li>
  <li>The screen recording will capture as you navigate</li>
  <li>Stop the screen recording when finished</li>
  <li>Move MP4 screen recording to macOS for editing</li>
</ol>

<p>For quick editing you can re-record the audio using Audacity while playing back portions of the screen recording in QuickTime. Converting the MP4 screen recording to MP3 is doable, too.</p>

<h2 id="editing">Editing</h2>

<p>Using Audacity, open the full screen reader recording and begin to add labels, using <kbd>⌘</kbd> + <kbd>B</kbd>. Marking and labeling the audio file makes the clip export process easier to manage.</p>

<p>With a marked audio timeline, highlight the section of the timeline to export. To export the highlighted audio: Export &gt; Export Selected Audio &gt; Save as MP3</p>]]></content><author><name>@double-great</name></author><summary type="html"><![CDATA[This project captures the audio output from several screen readers. The process to capture each recording is a bit of a challenge as it requires different operating systems and platforms. You can capture these recordings in many ways. Here is one workflow.]]></summary></entry><entry><title type="html">Bold and italics</title><link href="https://doublegreat.dev/listen/bold-and-italics/" rel="alternate" type="text/html" title="Bold and italics" /><published>2020-07-05T00:00:00+00:00</published><updated>2020-07-05T00:00:00+00:00</updated><id>https://doublegreat.dev/listen/bold-and-italics</id><content type="html" xml:base="https://doublegreat.dev/listen/bold-and-italics/"><![CDATA[<p>This test details the audible effects of bold and italic markup when read by different screen readers. Default settings are used in screen reader tests.</p>

<h2 id="findings">Findings</h2>

<p>In all screen readers tested, <strong>no audible distinction</strong> is present between unstyled text, <code class="language-plaintext highlighter-rouge">&lt;b&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>, <code class="language-plaintext highlighter-rouge">&lt;i&gt;</code>, and <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</p>

<h2 id="test-cases" class="table-heading">Test cases</h2>
<div class="table"><div class="table-grid" id="unstyled">
    <div class="table-grid-title">
      <a href="#unstyled"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Unstyled</a>
      <pre><code>The quick brown fox jumps over the lazy dog.</code></pre>
    </div>
    <div class="table-grid-audio" id="unstyled-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-unstyled-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="unstyled-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-unstyled-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="unstyled-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-unstyled-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="unstyled-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-unstyled-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="using-lt-b-gt-element">
    <div class="table-grid-title">
      <a href="#using-lt-b-gt-element"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Using &lt;b&gt; element</a>
      <pre><code>The <b>quick brown fox</b> jumps over the lazy dog.</code></pre>
    </div>
    <div class="table-grid-audio" id="using-lt-b-gt-element-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-b-tag-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-b-gt-element-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-b-tag-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-b-gt-element-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-b-tag-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-b-gt-element-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-b-tag-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="using-lt-strong-gt-element">
    <div class="table-grid-title">
      <a href="#using-lt-strong-gt-element"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Using &lt;strong&gt; element</a>
      <pre><code>The <strong>quick brown fox</strong> jumps over the lazy dog.</code></pre>
    </div>
    <div class="table-grid-audio" id="using-lt-strong-gt-element-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-strong-tag-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-strong-gt-element-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-strong-tag-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-strong-gt-element-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-strong-tag-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-strong-gt-element-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-strong-tag-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="using-lt-i-gt-element">
    <div class="table-grid-title">
      <a href="#using-lt-i-gt-element"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Using &lt;i&gt; element</a>
      <pre><code>The <i>quick brown fox</i> jumps over the lazy dog.</code></pre>
    </div>
    <div class="table-grid-audio" id="using-lt-i-gt-element-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-i-tag-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-i-gt-element-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-i-tag-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-i-gt-element-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-i-tag-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-i-gt-element-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-i-tag-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="using-lt-em-gt-element">
    <div class="table-grid-title">
      <a href="#using-lt-em-gt-element"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Using &lt;em&gt; element</a>
      <pre><code>The <em>quick brown fox</em> jumps over the lazy dog.</code></pre>
    </div>
    <div class="table-grid-audio" id="using-lt-em-gt-element-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-em-tag-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-em-gt-element-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-em-tag-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-em-gt-element-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-em-tag-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="using-lt-em-gt-element-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/bold-italics-em-tag-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div></div>
<p><a class="button" href="test">View test case page</a></p>

<script async="" src="/listen/js/plyr.js"></script>

<h2 id="related-reading">Related reading</h2>

<ul>
  <li><a href="https://www.tempertemper.net/blog/bold-and-italics-arent-read-by-screen-readers">Bold and italics aren’t read by screen readers – tempertemper</a></li>
  <li><a href="https://brucelawson.co.uk/2018/screenreader-support-for-text-level-semantics/">Bruce Lawson’s personal site: Screen reader support for text-level semantics</a></li>
</ul>]]></content><author><name>@double-great</name></author><summary type="html"><![CDATA[This test details the audible effects of bold and italic markup when read by different screen readers. Default settings are used in screen reader tests.]]></summary></entry><entry><title type="html">Emoji in alt text</title><link href="https://doublegreat.dev/listen/emoji/" rel="alternate" type="text/html" title="Emoji in alt text" /><published>2020-07-05T00:00:00+00:00</published><updated>2020-07-05T00:00:00+00:00</updated><id>https://doublegreat.dev/listen/emoji</id><content type="html" xml:base="https://doublegreat.dev/listen/emoji/"><![CDATA[<p>This test details audible effects of emoji (in alternative text) when read by different screen readers. Inspired by <a href="https://dl.acm.org/doi/10.1145/3313831.3376267">Emoji Accessibility for Visually Impaired People</a>. See <a href="https://youtu.be/uIbPcZq6izk?t=480">the specific test case from the research article on YouTube</a>.</p>

<h2 id="findings">Findings</h2>

<p>Emoji descriptions can vary between operating systems and software. This test case shows how spoken description of the emoji may not match visual intention.</p>

<p>VoiceOver on macOS and VoiceOver on iOS describes the emoji as angry — “<a href="#face-example-ios">looking, huffing with anger face</a>”. JAWS describes the emoji as triumphant — “<a href="#face-example-jaws">looking face with look of triumph</a>”. NVDA describes the emoji more objectively — “<a href="#face-example-nvda">looking face with steam from nose</a>”.</p>

<h2 id="test-cases" class="table-heading">Test cases</h2>
<div class="table"><div class="table-grid" id="face-example">
    <div class="table-grid-title">
      <a href="#face-example"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Face example</a>
      <pre><code>Runner at finish line, looking 😤</code></pre>
    </div>
    <div class="table-grid-audio" id="face-example-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/emoji-01-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="face-example-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/emoji-01-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="face-example-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/emoji-01-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="face-example-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/emoji-01-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div></div>
<p><a class="button" href="test">View test case page</a></p>

<script async="" src="/listen/js/plyr.js"></script>

<h2 id="related-reading">Related reading</h2>

<ul>
  <li><a href="https://html5accessibility.com/stuff/2022/01/17/short-note-on-emoji-text-alternative-variations/">short note on emoji text alternative variations – HTML Accessibility</a></li>
</ul>]]></content><author><name>@double-great</name></author><summary type="html"><![CDATA[This test details audible effects of emoji (in alternative text) when read by different screen readers. Inspired by Emoji Accessibility for Visually Impaired People. See the specific test case from the research article on YouTube.]]></summary></entry><entry><title type="html">Punctuation in alt text</title><link href="https://doublegreat.dev/listen/punctuation-in-alt-text/" rel="alternate" type="text/html" title="Punctuation in alt text" /><published>2020-07-04T00:00:00+00:00</published><updated>2020-07-04T00:00:00+00:00</updated><id>https://doublegreat.dev/listen/punctuation-in-alt-text</id><content type="html" xml:base="https://doublegreat.dev/listen/punctuation-in-alt-text/"><![CDATA[<p>This test details audible effects of punctuation in alternative text when read by different screen readers. Default settings are used in screen reader tests.</p>

<h2 id="findings">Findings</h2>

<p>In VoiceOver on macOS 10.15 and JAWS 2020, alt text ending with punctuation added a brief pause at the end, when read aloud. NVDA 2019.2.1 and VoiceOver on iOS 13 did not change pacing with or without punctuation.</p>

<p>Alt text ending in a question mark caused an audible inflection change, when read aloud in VoiceOver on macOS 10.15, VoiceOver on iOS 13, and JAWS 2020. NVDA 2019.2.1 adds a subtle inflection change when using an exclamation point.</p>

<p>A comma in alt text adds a brief pause in all screen readers.</p>

<p>JAWS announces most punctuation explicitly, including hyphen (dash), en dash, em dash, false ellipsis (three dots), colon, semicolon, dumb quotes, and smart quotes. The exception is ellipsis. In JAWS, an <a href="#contains-an-ellipsis-jaws">ellipsis</a> adds a pause.</p>

<p>VoiceOver on macOS consistently adds a pause when encountering punctuation, but does not explicitly name the punctuation used.</p>

<p>VoiceOver on iOS adds a pause when encountering a hyphen, en dash, em dash, colon, or semicolon. Ellipsis, dumb quotes, and smart quotes do not cause a pause. One outlier is a <a href="#contains-three-periods-ios">false ellipsis</a>, where VoiceOver on iOS announces it as an ellipsis, explicitly.</p>

<p>NVDA adds a pause when encountering an en dash, false ellipsis, ellipsis, colon, or semicolon. Hyphen, em dash, dumb quotes, and smart quotes do not cause a pause.</p>

<h2 id="test-cases" class="table-heading">Test cases</h2>
<div class="table"><div class="table-grid" id="no-punctuation">
    <div class="table-grid-title">
      <a href="#no-punctuation"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
No punctuation</a>
      <pre><code>A shape with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="no-punctuation-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-01-no-punctuation-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="no-punctuation-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-01-no-punctuation-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="no-punctuation-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-01-no-punctuation-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="no-punctuation-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-01-no-punctuation-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="ends-in-a-period">
    <div class="table-grid-title">
      <a href="#ends-in-a-period"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Ends in a period</a>
      <pre><code>A shape with eight sides.</code></pre>
    </div>
    <div class="table-grid-audio" id="ends-in-a-period-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-02-period-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-period-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-02-period-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-period-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-02-period-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-period-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-02-period-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="ends-in-an-exclamation-point">
    <div class="table-grid-title">
      <a href="#ends-in-an-exclamation-point"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Ends in an exclamation point</a>
      <pre><code>A shape with eight sides!</code></pre>
    </div>
    <div class="table-grid-audio" id="ends-in-an-exclamation-point-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-03-exclamation-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-an-exclamation-point-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-03-exclamation-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-an-exclamation-point-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-03-exclamation-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-an-exclamation-point-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-03-exclamation-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="ends-in-a-question-mark">
    <div class="table-grid-title">
      <a href="#ends-in-a-question-mark"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Ends in a question mark</a>
      <pre><code>A shape with eight sides?</code></pre>
    </div>
    <div class="table-grid-audio" id="ends-in-a-question-mark-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-04-question-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-question-mark-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-04-question-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-question-mark-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-04-question-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="ends-in-a-question-mark-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-04-question-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-a-comma">
    <div class="table-grid-title">
      <a href="#contains-a-comma"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains a comma</a>
      <pre><code>A shape, with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-a-comma-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-05-comma-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-comma-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-05-comma-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-comma-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-05-comma-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-comma-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-05-comma-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-a-hyphen">
    <div class="table-grid-title">
      <a href="#contains-a-hyphen"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains a hyphen</a>
      <pre><code>A shape - with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-a-hyphen-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-06-hyphen-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-hyphen-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-06-hyphen-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-hyphen-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-06-hyphen-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-hyphen-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-06-hyphen-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-an-en-dash">
    <div class="table-grid-title">
      <a href="#contains-an-en-dash"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains an en dash</a>
      <pre><code>A shape – with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-an-en-dash-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-07-en-dash-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-en-dash-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-07-en-dash-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-en-dash-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-07-en-dash-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-en-dash-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-07-en-dash-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-an-em-dash">
    <div class="table-grid-title">
      <a href="#contains-an-em-dash"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains an em dash</a>
      <pre><code>A shape — with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-an-em-dash-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-08-em-dash-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-em-dash-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-08-em-dash-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-em-dash-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-08-em-dash-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-em-dash-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-08-em-dash-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-three-periods">
    <div class="table-grid-title">
      <a href="#contains-three-periods"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains three periods</a>
      <pre><code>A shape... with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-three-periods-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-09-dotdotdot-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-three-periods-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-09-dotdotdot-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-three-periods-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-09-dotdotdot-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-three-periods-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-09-dotdotdot-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-an-ellipsis">
    <div class="table-grid-title">
      <a href="#contains-an-ellipsis"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains an ellipsis</a>
      <pre><code>A shape… with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-an-ellipsis-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-10-ellipsis-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-ellipsis-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-10-ellipsis-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-ellipsis-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-10-ellipsis-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-an-ellipsis-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-10-ellipsis-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-a-colon">
    <div class="table-grid-title">
      <a href="#contains-a-colon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains a colon</a>
      <pre><code>A shape: with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-a-colon-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-11-colon-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-colon-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-11-colon-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-colon-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-11-colon-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-colon-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-11-colon-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-a-semicolon">
    <div class="table-grid-title">
      <a href="#contains-a-semicolon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains a semicolon</a>
      <pre><code>A shape; with eight sides</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-a-semicolon-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-12-semicolon-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-semicolon-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-12-semicolon-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-semicolon-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-12-semicolon-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-a-semicolon-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-12-semicolon-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-dumb-quotes">
    <div class="table-grid-title">
      <a href="#contains-dumb-quotes"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains dumb quotes</a>
      <pre><code>A shape "with eight sides"</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-dumb-quotes-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-13-dumb-quotes-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-dumb-quotes-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-13-dumb-quotes-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-dumb-quotes-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-13-dumb-quotes-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-dumb-quotes-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-13-dumb-quotes-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div><div class="table-grid" id="contains-smart-quotes">
    <div class="table-grid-title">
      <a href="#contains-smart-quotes"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
Contains smart quotes</a>
      <pre><code>A shape “with eight sides”</code></pre>
    </div>
    <div class="table-grid-audio" id="contains-smart-quotes-macos">
      <div class="table-grid-audio-title">VoiceOver macOS&nbsp;10.15</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-14-smart-quotes-macos-voiceover-10-15.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-smart-quotes-jaws">
      <div class="table-grid-audio-title">JAWS&nbsp;2020 Windows&nbsp;8.1</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-14-smart-quotes-windows-jaws-2020.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-smart-quotes-nvda">
      <div class="table-grid-audio-title">
        NVDA&nbsp;2019.2.1 Windows&nbsp;8.1
      </div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-14-smart-quotes-windows-nvda-2019-2-1.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
    <div class="table-grid-audio" id="contains-smart-quotes-ios">
      <div class="table-grid-audio-title">VoiceOver iOS&nbsp;13</div>
      <figure>
  <audio controls="" src="/listen/audio/punctuation-14-smart-quotes-ios-voiceover-13.mp3" class="js-player" preload="none">
    Your browser does not support the
    <code>audio</code> element.
  </audio>
</figure>

    </div>
  </div></div>
<p><a class="button" href="test">View test case page</a></p>

<script async="" src="/listen/js/plyr.js"></script>

<h2 id="related-reading">Related reading</h2>

<ul>
  <li><a href="https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">Screen Readers: A Guide to Punctuation and Typographic Symbols</a></li>
</ul>]]></content><author><name>@double-great</name></author><summary type="html"><![CDATA[This test details audible effects of punctuation in alternative text when read by different screen readers. Default settings are used in screen reader tests.]]></summary></entry></feed>