markup.tips
| 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 |
#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:
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>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>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.
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.
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.
Disqus This