Latest Accessibility News on Accessify

It might be the done thing for web developers in certain corners to routinely have a dig at Microsoft – certainly, they’ve given us enough ammo/cause in the past to make this easy (Songsmith, I’m particularly looking at you at the moment!) – but while many of these people will be having a moan about the release of IE8 for one reason or another, I’m finding myself overlooking that and instead getting excited about a different (but related) product: Expression Web SuperPreview.

Let’s start by saying this: what a truly awful product name! It just sounds so bad, which is a shame because the application is actually very good, or at least it appears to be based on my initial playing around.

What does SuperPreview do?

SuperPreview is a standalone application that lets you preview (or just view?) what your web page/site/app will render as in IE6, IE8 or IE8 in IE7 compatibility mode. The intention is to do away with the multi-IE hacks that developers have had to use in the past to test page layouts by placing it all in one tool.

The application lets you view a given web page on different browsers in a number of different ways – single window, split pane view (horizontal and vertical split) or as onion skin overlays (imagine each screen like it were drawn on tracing paper, allowing you to see all levels at once and spot differences). As you click and drag to move around the page, the associated windows with the other browser views move accordingly; it’s very easy to spot any layout differences. Here it is in split pane view, showing an IE8 and IE8 (IE7 compatibility view) together:

And here’s the overlay view, showing that some of the text is not quite vertically aligned (hence the fuzzy view):

I really like the way that this tool works, and it will really come into its own once other browser are thrown into the mix – ultimately, it will be possible to add in Firefox, Safari, Opera and others into SuperPreview (assuming that you have the browser installed on your system, of course).

What this tool will not do, however, is let you see how these different browsers cope with JavaScript/interaction (or at least that’s my understanding based on this early beta version); for that you would still need to test in the browser itself. I’m happy – very happy – to be proven wrong on this.

There is another downside to this tool that I should mention – the whopping 250mb download (I cannot understand why a one-trick pony application like this needs such a huge installer!) and the requirement for .Net 3.5 framework to be installed. It seemed to take a looooong time to install for me (I tried it on XP SP3 and on Vista), but it’s still beta so maybe some of this will be fixed. Also, I was installing on a virtual machine (running on Parallels on Mac with 4gb ram) which may have affected performance on that front.

So I’m really excited about the potential of this tool – more than I have been about any Microsoft product in a long time – but I want to openly plea to the people in the Expression team to do something: make this tool a free download!

Update: when I first wrote this post, I hadn’t seen anywhere to suggest this would be a free application and I assumed that it would be, like other Expression tools, be a paid-for app, but this is not true! It will be free for all. So you can skip the rest of this now - the reasons for asking are irrelevant now. Joy! Still, if they could get the download size down, that would be very much appreciated

Why SuperPreview should be free:

1. Developers have had to work around the problems of multiple IE versions for long enough without help from Microsoft. Providing a tool that you can vouch for and support means a tool that people can place more trust in (and also know that they are not loading modified DLLs that may have all manner of nasties lurking in)
2. IE’s different rendering problems have been the bane of standards-aware developers for too long – providing this for free goes some way to making reparations.
3. Many people are already spending hours of their own time producing excellent tools to help make the web a better, more interoperable place, all of which are free. I’m thinking of the likes of Web Developer Toolbar, Firebug, IETester and many more. If these fine folks can do it for free, surely Microsoft can give this away for free too?
4. Finally, it’s a marketing opportunity for the Expression Suite – a way of getting the brand in front of a lot of developers who may decide that they like the way the tool works, like the interface, look-and-feel and generally feel more inclined to try out some of the other Expression tools. That’s not to be sniffed at.

So, that’s what I’m hoping for – SuperPreview to be made even more super by making it completely free. Come on Expression team, you know it makes sense.

[Heading inspired by The Monks' "Nice legs, Shame About the Face". Now there's a blast from the past]

OK, before I start, let me just emphasise that this tool is not meant to be anything complicated and I’m not suggesting that it in any way replaces other existing ‘Swiss Army knife’ style captioning tools - this is a one-trick pony! And the trick this pony does is help to caption YouTube videos. If you’re expecting something mind-blowing, prepare to be disappointed (cue smiley face icon moment).

What it does

I’ve put together a little tool that lets me create a caption file - suitable for YouTube - in what I think is a quite easy manner. You need to have a transcript done first (that’s the hardest part!), but if you have that, the aim is to make it a case of listening to the narrative in the YouTube video and then pressing the ‘a’ key button when each line in the transcript appears which then time-stamps that line for you.

What it doesn’t do

Pressing the play button on the embedded YouTube video does not automatically start the timer required for time-stamping the caption text (because pressing play is not tha same as the bideo starting due to connection speed and how long it takes to buffer video, so there is s separate timer control. This is far from perfect. What I would like is:

• for a control on the page to start the YouTube video loading/buffering
• listen/wait for the video to actually start playing
• trigger off the timer so the two are in sync

This sounds do-able, but I’ll confess I’ve never tinkered with YouTube API at all. What I would appreciate is any advice on that front, even if it’s just to say "Yes, that’s possible, take a look here" … and I’ll give it a look when I get a moment free

All feedback appreciated:

• Easy YouTube Caption Creator
• Easy YouTube Caption Creator Screencast

Thanks to some nifty work from JavaScript guru and SitePoint techie James Edwards, The Ultimate HTML Reference (which I wrote last year) is also available as a reference within the ever-popular Firebug extension for Firefox. It’s called Firescope and adds a new "Reference" panel which includes a search tool. In there you can look up HTML elements and attributes, CSS properties, and it also gives you a summary of the element or attribute’s useage, browser support, and a code example.

As well as the information panel, you can also bring up contextual menus within other panels. For example, when viewing the DOM of the page in the HTML panel, you can right-click on any element or attribute, to look it up in the reference search, or view a code example for it.

I know James is keen to hear any feedback on Firescope (feel free to add comments on this blog post if you want - I’ll be sure to pass them on).

The extension is in the mozilla add-ons directory which is the best place to download it (because then it will subscribe to updates). However, you’ll need a Mozilla login to get it from there because it’s still in the sandbox (in other words, not quite yet approved for mass public distribution). Alternatively, you can download and install it directly from the page on sitepoint.com (but without the auto-updates facility).

As well as having a new reference tool within Firefox/Firebug, the online reference has, itself, also had a make-over which gives it just that extra bit of polish. So even if you don’t feel like installing the tool, you can still check out the reference for yourself.

I’ve given Markup Maker a small update today. Nothing too earth-shattering, but with all the talk of HTML5 in recent weeks, I thought I should take a look and see how it copes with this flavour of HTML and decided to add a few more features.

If you’ve not heard of Markup Maker before, it’s a tool that lets you enter a series of structural identifiers for a new page that you want to code up, and it then converts it to a valid XHTML/HTML document. Effectively it creates the necessary scaffolding, with empty div elements and the associated CSS selectors. So,for example, for a basic page layout you might type the following (with each space indent indicating that it is a child of the previous, less indented section), e.g.

header
 logo
 search
main-content
 main-article
 page-navigation
footer
 copyright
 contact-points

… gets converted to (if HTML4 strict chosen):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Page title goes here</title>
<style type="text/css">
/* Edit the styles as you see fit */
#header {}
#logo {}
#search {}
#main-content {}
#main-article {}
#page-navigation {}
#footer {}
#copyright {}
#contact-points {}
</style>

</head>

<body>
<div id="header">
 <div id="logo"></div>
 <div id="search"></div>
</div>
<div id="main-content">
 <div id="main-article"></div>
 <div id="page-navigation"></div>
</div>
<div id="footer">
 <div id="copyright"></div>
 <div id="contact-points"></div>

</body>
</html>

So, I’ve added proper HTML5 support to this now. First, select the HTML5 doctype:

The tool recognises HTML5 elements entered - such as header and footer - and converts those to <header></header> and <footer></footer> rather than <div id="header"></div>. Also, if HTML5 is chosen, the output automatically includes Remy Sharp’s JavaScript fix which enables Internet Explorer to style these elements correctly.

So, using the example above, it would output the following as HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Page title goes here</title>
<style type="text/css">
/* Edit the styles as you see fit */
header {}
#logo {}
#search {}
#main-content {}
#main-article {}
#page-navigation {}
footer {}
#copyright {}
#contact-points {}
</style>

<!--[if IE]>
<script type="text/javascript">
// Script by Remy Sharp. More info: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas, →
datagrid,datalist,details,dialog,eventsource, →
figure,footer,header,mark,menu,meter,nav, →
output,progress,section,time,video" →
.split(','),i=e.length;while (i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>

<body>
<header>
 <div id="logo"></div>
 <div id="search"></div>
</header>
<div id="main-content">
 <div id="main-article"></div>
 <div id="page-navigation"></div>
</div>
<footer>
 <div id="copyright"></div>
 <div id="contact-points"></div>
</footer>
</body>
</html>

Finally, one minor tweak is the option to output closing div comments - which helps identifying and fixing layout/styling problems when you have a lot of content on the page and the opening and closing tags are separated by some distance.

So, please give it a go, and if you find any problems or have a suggestion for this simple tool, please drop an email to toolsandwizardsbugs@accessify.com.

The RNIB (Royal National Institute of Blind People), in conjunction with The Paciello Group (pronounced ‘pass-ee-ello’, not ‘patchy yellow’ as I’d always assumed!), has announced a beta release of the Surf Right toolbar, an addition for Internet Explorer that reveals numerous settings that are tucked away in various options in the browser and places them right there, right in your face, big button style.

The Surf Right Toolbar is really for anyone who wants to adjust the way they view content on the web to make it easier to read. This could include people with mild disabilities, the elderly, people with reading problems, cognitive problems, using dial-up, photosensitivity and so on.

It will certainly find some receptive fans, although I’m still dubious whether someone who does not know where to change the settings in the browser as-is will be likely to download and install a toolbar like this (on the basis that if they don’t normally tinker with settings, they’re not likely to install this kind of thing) but I am happy to be proven wrong; besides, the RNIB are in an ideal position to promote a tool like this.

You can download the Surf Right toolbar here; more details about the toolbar on RNIB’s blog here.

But now it’s history. The Perfect Popup is dead, long live The Perfect Pop-up.

After many years of sitting there advising about how to create accessible pop-up windows using inline event handlers (onclick), I have finally got around to updating this article using unopbtrusive JavaScript and also the accompanying Popup Window Generator (the two go very much hand in hand).

Please do take a look. If you can spot anything wrong with it, or perhaps you want to make a suggestion or two on how you can improve it, then please feel free to add something to the comments on this post.

• The Perfect Pop-up (article)
• Pop-up window generator (in the Tools and Wizards section)

This little dev tool seems to have gone down quite well, so I thought I should let you know about a small update to it. As it has been requested a few times, I’ve added in the following options:

1. Choose the doctype for the generated markup
2. Choose wether indents in the generated markup use a space or tab

I’m resisting the urge to add too much more in - it was deliberately kept simple - but one other feature that’s been requested is an option to include comments after each closing div to state which div is being closed down. I actually tried to do this but got in a bit of a pickle trying to get it to work. The good news is that I’ve had an offer to ‘have a poke around and get that working’ for me, so this may be added very soon.

You can find the Markup Maker here. As before, please add all comments here.

This is another of those little tools that I put together primarily for my own use but you may find it of great use, hence it’s gone into the Accessify toolbox.

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML document. It also creates the shell of the CSS that you need so you can start to apply styles/layout etc.

If you like the tool, please do link to it, Digg it or add to del.icio.us

If you have any comments or questions, please add them to my personal blog (just trying to keep comments in one place)

Enjoy!

Due to various writing commitments (none of which, rather evidently, include this site right now!) I have a backlog of emails to respond to which just keeps on growing. I managed to work through a few of them today and noticed a couple of requests for plugs on the site that, while overdue, I though I should share anyway (just in case you hadn’t heard):

• Web Accessibility Toolbar for Opera - the link pretty much says it all. The teams from Web Accessibility Tools Consortium, Vision Australia and The Paciello Group have ported the useful toolbar that they built for windows/IE. (Congratulations to Steven, also, who’s making the move over to The Paciello Group - and London - in the near future. Any chance of an exchange deal, Steven?)
• Ability panels goes live - The site blurb reads “ABILITY is a group of online panels for people with disabilities, their family members. advocates, and other stakeholders. Participants in our research have the opportunity to make their voices heard by participating in groundbreaking Market Research, Mystery Shopping, Surveys, and other specialized studies.” The company behind this venture are looking to recruit people with disabilities nationwide in the US. Want to get involved?