How to use Aural CSS?


Tags: css,stylesheet,accessibility

Problem :

  1. I've read one place that aural stylesheets are no longer in use? Is there something that has replaced them? I'm sure something is being used to make things easier for those who are visually impaired?

  2. If aural CSS is in use still, is there a way to specify what should be said in a specific place, similar to using "alt" for images? For instance, I'm using an iconfont for my logo. I'd like to be able to have the user hear the name of my company, but because it's just done with a span, there's no place in that particular span that indicates the words (I'm assuming here that the system reads the words displayed on the screen, and not all the code with it, so obviously this works better if there's actual text to read). Maybe include a content: 'whatever text you want' is added somehow?

The gist is that I'm working on a site about opera for a client, and the client would like for the content to be accessible to everyone. And obviously someone with visual impairment is going to be especially wanting to hear things.



Solution :

1. Is there a replacement for aural?

Aural stylesheets have indeed been deprecated as of CSS3. Major browsers such as Firefox removed the implementation a while ago. There is still a speech media included, but I haven't seen any implementations so far (it just seems to be a proposal at this point).

Many people with visual impairments use screen readers and to a lesser degree refreshable braille displays to view the content, so you usually don't have to worry about a direct implementation of speech. Important points for that to work are:

2. How can you make icon fonts (and other non-legible items) accessible?

In this article on bulletproof accessible font icons they propose a pretty good solution:

Since the characters don't have any direct semantic meaning, you could include them in the :before pseudoclass of your span:

.logo:before {
    font-family: YourIconFontFamily;
    content: "★";
}

And then include the company name directly in the span:

<span class="logo">Your company<span>

    CSS Howto..

    How to change the background-color of jumbrotron?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How to minify css files with RequireJS

    How do I center the body text div?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    How to animate border transition expand with CSS?

    How do I vertically align my wrapper so it will be centered on a (mobile) screen?

    continue with same Show and hide divs when we change page

    How to rotate an image with CSS style transform by an variable of degree?

    How to remove excess space added with \n

    How to serve different size SVG graphic in css background image?

    How to center three DIVS with other HTML tags inside one parent DIV [duplicate]

    How to add a css class to jquery selectable

    How to position this using only CSS and no tables

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How to Pause ALL CSS animations?

    How to keep an element :active even after clicking

    How to change css property of content:url in jquery?

    How do front end devs bundle and minify files?

    How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

    Pagination: How to display a long text as book pages?

    How can i put two divs and one nav into the header at the top-left, top-center and top- right with css

    How to customize bootstrap fixed navbar-default so that li elements align downward?

    How to add color to text in my div with code

    How to close this menu clicking outside?

    How to resize button without cutting the text inside

    How do I code CSS to “change” when I load/pull content using ajax?

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    Responsive menu show and hide on click

    How can you remove the table-tags in CreateUserWizard control