-
Notifications
You must be signed in to change notification settings - Fork 1
Provide a polyfill to CSS Speech and CSS Aural properties
The intent of this resource is provide a polyfill to CSS Speech and CSS Aural properties, because the most of browsers still not support them properties.
The ‘speak’ property determines whether or not to render text aurally.
This value causes an element (including pauses, cues, rests and actual content) to not be rendered (i.e., the element has no effect in the aural dimension).
To support this, the library hide the text from screen-reader, setting the attributes aria-hidden with true value and role with presentation value.
The element is rendered aurally (regardless of its ‘display’ value and the ‘display’ and ‘speak’ values of its ancestors).
To support this, the library remove the attributes aria-hidden and role with presentation value.
Spells the text one letter at a time (useful for acronyms and abbreviations).
To support this, the library add a space between each letter, isolating all letter in span and adding a span with space after it. To not show the spaces added by library in screen, load the stylesheet css/hide_changes.css in page.
This property specifies how punctuation is spoken.
Punctuation such as semicolons, braces, and so on are to be spoken literally.
To support this, the library add the name of punctuation symbol, isolating all punctuations symbols in span, hiding it setting the attributes aria-hidden with true value and role with presentation and adding a span with the name of punctuation symbol after it. To not show the name of punctuation symbol in screen, load the stylesheet css/hide_changes.css in page.
Punctuation is not to be spoken, but instead rendered naturally as various pauses.
To support this, the library hide the punctuation symbols from screen-reader, isolating all punctuations symbols in span and hiding it setting the attributes aria-hidden with true value and role with presentation.
This property controls how numerals are spoken.
Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven".
To support this, the library add a space between each digit, isolating all digits in span and adding a span with space after it. To not show the spaces added by library in screen, load the stylesheet css/hide_changes.css in page.
Speak the numeral as a full number. Thus, "237" is spoken "Two hundred thirty seven". Word representations are language-dependent.
To support this, the library redo the changes of the digits value, removing all span between digits and joining all digits isolated in span.
This property specifies whether table headers are spoken before every cell, or only before a cell when that cell is associated with a different header than the previous cell.
The header is spoken before every pertinent cell.
To support this, the library prepend the content of header cell in data cell, prepending in td with headers attribute a span with the content of the elements of list of ids of headers atribute.
The header is spoken one time, before a series of cells.
To supporte this, the library redo the changes of the always value, removing all span with the content of it header cell.
The speak-as property determines in what manner text gets rendered aurally, based upon a predefined list of possibilities.
Uses language-dependent pronunciation rules for rendering the element's content. For example, punctuation is not spoken as-is, but instead rendered naturally as appropriate pauses.
To support this the library redo the changes of the spell-out value, the literal-punctuation value, the no-punctuation value and the digits value.
Spells the text one letter at a time (useful for acronyms and abbreviations). In languages where accented characters are rare, it is permitted to drop accents in favor of alternative unaccented spellings. As as example, in English, the word "rôle" can also be written as "role". A conforming implementation would thus be able to spell-out "rôle" as "R O L E".
To support this, the library add a space between each letter, isolating all letter in span and adding a span with space after it. To not show the spaces added by library in screen, load the stylesheet css/hide_changes.css in page.
Punctuation such as semicolons, braces, and so on is named aloud (i.e. spoken literally) rather than rendered naturally as appropriate pauses.
To support this, the library add the name of punctuation symbol, isolating all punctuations symbols in span, hiding it setting the attributes aria-hidden with true value and role with presentation and adding a span with the name of punctuation symbol after it. To not show the name of punctuation symbol in screen, load the stylesheet css/hide_changes.css in page.
Punctuation is not rendered: neither spoken nor rendered as pauses.
To support this, the library hide the punctuation symbols from screen-reader, isolating all punctuations symbols in span and hiding it setting the attributes aria-hidden with true value and role with presentation.
Speak numbers one digit at a time, for instance, "twelve" would be spoken as "one two", and "31" as "three one".
To support this, the library add a space between each digit, isolating all digits in span and adding a span with space after it. To not show the spaces added by library in screen, load the stylesheet css/hide_changes.css in page.
- Add JavaScript files js/common.js and js/eventlistener.js, before any JavaScript code;
- Add JavaScript files _locales/en_US/js/symbols.js, js/hatemile/util/CommonFunctions.js, js/hatemile/util/html/vanilla/VanillaHTMLDOMParser.js (or js/hatemile/util/html/jquery/JQueryHTMLDOMParser.js), js/hatemile/util/html/vanilla/VanillaHTMLDOMTextNode.js, js/hatemile/util/html/vanilla/VanillaHTMLDOMElement.js, js/hatemile/util/css/jscssp/JSCSSPParser.js, js/hatemile/util/css/jscssp/JSCSSPRule.js, js/hatemile/util/css/jscssp/JSCSSPDeclaration.js and js/hatemile/implementation/AccessibleCSSImplementation.js;
- Add a JavaScript file or include the following code before the end of body(
</body>):
// Instaciate the HTML Parser.
var htmlParser = new hatemile.util.html.vanilla.VanillaHTMLDOMParser(document);
// Instaciate the CSS Parser.
var cssParser = new hatemile.util.css.jscssp.JSCSSPParser(document, location.href);
// ...
// Instaciate the hatemile.implementation.AccessibleCSSImplementation class.
var accessibleCSS = new hatemile.implementation.AccessibleCSSImplementation(htmlParser, cssParser, hatemile_configuration_symbols);
// Provide a polyfill to CSS Speech and CSS Aural of speak, speak-as, speak-numeral, speak-punctuation, speak-header.
accessibleCSS.provideAllSpeakProperties();