Question

Do screen readers just read content without paying attention to CSS?

My reason for asking is that I would like to use LESS.js for some of my CSS (so not all of it). As far as I’m concerned, users with JS disabled will get a basic experience anyway so they won’t miss some of my presentational CSS.

However, what about Screen Readers… will they miss my extra CSS that’s served via Javascript?

P.S. no compiler suggestions please, I’m not interested – they slow down my workflow.

Thanks

Answer 1

They’re supposed to take cues from the CSS properties defined in the voice module when figuring out how read CSS styled text.

The aural rendering of a document combines speech synthesis (also known as "TTS", the acronym for "Text to Speech") and auditory icons (which we refer to as "audio cues" in this specification). The aural presentation of information is common amongst communities of users who are blind or visually-impaired. For instance, "screen readers" enable control of visual user-interfaces that would otherwise be inaccessible. There are other cases whereby listening to textual information (as opposed to reading it) is a necessity. Typical examples include in-car use of an e-book reader, industrial and medical documentation systems, home entertainment, helping users to learn reading, or supporting users who have reading difficulties (print disabilities).

When it comes to documents, the quality of the speech rendition depends on the structure and semantics authored within the content itself. The CSS Speech module provides properties that enable authors to declaratively control presentational aspects of the aural dimension (e.g. TTS voice, pitch, rate, and volume levels). These style sheet properties can be used together with visual properties (mixed media), or as a complete aural alternative to a visual presentation.

Content creators can conditionally include CSS properties dedicated to user-agents with text to speech synthesis capabilities, by specifying the "speech" media type via the media attribute of the link element, or with the @media at-rule, or within an @import statement. When doing so, the styles authored within the scope of such conditional statements are ignored by user-agents that do not support this module.