Page Description Published On
 Silence Your CSS Footprint With Sass Silent… Efficiently group your common styles together to reduce your CSS footprint in this Thinkful project..
 Sticking Components above the Fold Get stuck riding the bleeding edge with this unstable CSS3 feature
 Creating an Accessible to-do list powered by… Enhance a simple to–do list with React.js
 Adopting Orphans with   Up your typography game with the use of this single HTML entity
 Making your Markup Speak Using speakable.jquery.js you too can make your markup talk
 Loading Modernizr from a CDN Get the best of both worlds by loading Modernizr from a CDN near you
 Creating an Accessible Settings Table Create an accessible settings table using HTML5, CSS3, and a sprinkle of jQuery

Making your Markup Speak#HTML #JS

When designing for touch devices the familiar title attribute is of little use. Hovering over an element requires a mouse but all we have is these greasy fingers and that free U2 Album we don't want on our phones. So what is there to do?

As digital creatives we have two senses to work with:

  1. Sight
  2. Sound

Let's you and I give the later a try with the new JavaScript Speech Synthesis API. Actually, scratch that we aren't going to get into that. We'll let speakable.jquery.js handle that. All we need to do is add a speakable-tip class to our element like so:

<h3 title="Hello World" class="speakable-title">Click me. I'll read my title.</h3>

 Click me. I'll read my title.

We can also set the voice, pitch, rate and volume using data attributes:

   <h4 title="I'm Radioactive            Rrrrrrrrraaaaaaaaaaaaaaddddddddiiiiiioooooactive!" class="speakable-tip" data-voice="ralph" data-pitch="2" data-rate="0.5">I'm Radioactive.</h4>

 I'm Radioactive.

Thanks to speakable.jquery.js you can even listen to this component read aloud. This is done by making use of the .speakable, .speaker-btn, and data-transcript properties documented here.

Making things Unspeakable

 We understand that there may be parts of your code that simply can never be spoken of; to anyone. Anything we wrap in the .unspeakable class will never be spoken of by speakable.jquery.js; that much we can pretty much assure you.

Create your own Voice

Polite Forms

Just like when bringing candy to the schoolroom, we don't want anyone to feel left out. We want to inform users what they can and cannot do with our interface based on how they arrive. That is why the above component is built within semantic markup authored to be politely enhanced. This means that users without JavaScript get a politely requested to enable JavaScript. We even give them a link with instructions; how thoughtful of us. We do this by initially disabling our input fields that require asynchronous interaction. Also, we place a aside.alert messeage with a <noscript> tag. You may see where this is going; we finally use scripts to enable our inputs and detect the speechSynthesis feature. See below.

Create your own Voice (no-js)

Disqus This