JavaScript enhancements
Translations
This is a page to test out usability enhancements by JavaScript, whilst leaving the source HTML pure and re-usable. So far, this covers highlighting different link types, concatenating long links, changing the appearance of quote elements, and fixing abbr in IE.
The files used by this page are:
- enhancements.js, the main script file that applies the DOM changes.
- enhancements.css, a few additions that make the appearance of the changes better.
- enhancements_ie.js, a couple more scripts to overcome Internet Explorers lack of support for some HTML.
- enhancements_ie.css, to deal with a couple of variations in IE.
- jQuery.js, the JavaScript library that the scripts depend on.
(Or download the handy zip archive.)
Highlighting links
I find it annoying when you can't tell if a link will take you to another page on the same site, a document, or an external site. I used the Silk icons and jQuery to add little icons inline (as they might require alternative text). To do: within page links?
Internal link without domain: home page (should not have icon).
Internal link with domain: about this site (should not have icon).
The image-link to the left should not have an icon. However, this external link: W3C should.
- PDF link: UKWA articles of association.
- PDF uppercase link: UKWA articles of association.
- Within this page link: Tranforming blockquotes.
- Within another page link: Transforming blockquotes.
- Document link: test.
- External Document link: W3C.
- Long link: http://alastairc.ac/2007/07/office-2007-pdfs-not-accessible/.
- Long doc link: http://alastairc.ac/2007/07/office-2007-pdfs-not-accessible/.
- Long external link: http://accessify.com/news/2007/08/making-powerpoint-presentations-accessible/.
- ZIP link: zip archive.
Transforming (block)quotes
I first saw this done by Simon Willison, which really kicked off the idea of progressive enhancement for me. In this case, using the cite attribute to provide direct access to the quotation source, where possible.
Blockquote with cite and title:
this Ajax application is usable by screen-reader users some of the time. They aren’t totally shut out, but it isn’t totally easy for them, either.
Blockquote with cite:
this Ajax application is usable by screen-reader users some of the time. They aren’t totally shut out, but it isn’t totally easy for them, either.
Blockquote without cite:
this Ajax application is usable by screen-reader users some of the time. They aren’t totally shut out, but it isn’t totally easy for them, either.
Inline quotes (IE only)
Juicy Studio is the originator of the script to add quotation marks in IE, from the article Fixing IE quotes. I also use the same script as the blockquote one to add an onclick for any cite attributes.
Inline quote without cite: To be, or not to be.
Inline quote with cite: To be, or not to be.
(should have onclick and title with the URL.)
Inline quote with cite & title: To be, or not to be.
(should have onclick and title.)
Nested quote to test IE: My friend said:
, but no onclick or title.what a day!
, which seemed apt.
Abbreviations (IE only)
IE doesn't support abbreviations properly, so Sovavsiti came up with a little script to add in a little markup (in IE only) to compensate. The script isn't jQueryfied, because as far as I can tell, IE would be required to support abbr for it to work that way. The script uses regex instead. This one should be brought in by a conditional comment to target IE < 7, as IE 7 seems to have fixed it.
- Acronymn: NASA (should work anyway)
- Abbr: W3C