[Skip navigation links]
Login

CSS stylesheet media queries with `@media speech` Screen reader compatibility

Last updated: April 7, 2019

Expected Result: causes problems in some screen readers

Actual Result: causes problems in 17 screen reader / browser combinations

For expected failures, the results show which AT combos the failures affect. Results are recorded from the user's viewpoint, so describe the user impact of authoring errors.

There has been conflicting information in various CSS specifications on the 'speech' and 'aural' media types.

Code used for this test:


        <style>
            div.speech-query-fail
            {
                display: block;
                color: black;
                background-color: red;
            }

            div.speech-query-pass
            {
                display: none;
                color: black;
                background-color: green;
            }

            /* change display state using aural media type */
            @media speech
            {
            div.speech-query-fail { display: none; }
            div.speech-query-pass { display: block; }
            }
        </style>

        <div class='speech-query-fail'>
            Speech Media Query - Fail
        </div>
        <div class='speech-query-pass'>
            Speech Media Query - Pass
        </div>        
    

Change History

Last updated: April 7, 2019

Screen readerBrowserModeNotesWhat the user hears
Fail NVDA 2018.4FF60 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail NVDA 2018.4IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail NVDA 2018.4Chrome 73 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail NVDA 2017.3FF49 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail NVDA 2017.3IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail NVDA 2017.3Chrome 66 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 2018.1811.2FF60 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 2018.1811.2IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 18.0.5038FF52 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 18.0.5038IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 17.0.2619FF49 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail JAWS 17.0.2619IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail WindowEyes 8.4IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail VoiceOver macOS 10.13Safari 11.1 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail VoiceOver iOS 11.4Safari iOS 11.4TouchDoes not match 'speech' media type. Speech Media Query - Fail.
Fail Dolphin SR 16.06IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.
Fail SaToGo 3.4.96.0IE11 ReadingDoes not match 'speech' media type. Speech Media Query - Fail.

Test notes

All tests were carried out with screen reader factory settings. JAWS in particular has a wide variety of settings controlling exactly what gets spoken.

Screen readers allow users to interact in different modes, and can produce very different results in each mode. The modes used in these tests are:

In the «What the user hears» column: