Every now and then you come across an example of code that slaps you around the face and demonstrates that you really do have to make sure you use valid code.
In my company’s recent (manual) accessibility testing of the FTSE 100 home pages, a site failed one a checkpoint for having links that didn’t work without JavaScript. (For the purpose of this article, I’m ignoring the pop-up aspect.)
Someone from the company in question queried this, they thought the links in question did work. The code went something like this:
<a href="javascript:openwin('http://www.example.com/page.html')">
<noscript><a href="http://www.example.com/page.html" target="_blank"></noscript>
Link text</a>
The obvious problem is that the first link isn’t written in with JavaScript, so in the situation where the user doesn’t have JavaScript, it is two opening links:
<a href="javascript:openwin('http://www.example.com/page.html')">
<a href="http://www.example.com/page.html" target="_blank">
Link text</a>
If you also take into account that the <noscript> tag is a block element (like paragraphs, headings etc.), you shouldn’t be able to wrap a link around it in the manner the author must have been expecting.
So, should it work? Should the second link be used when JavaScript isn’t enabled? It’s impossible to tell, as it’s invalid according to the HTML specification, there is no knowing what a browser will do with it.
As it happens, most browsers (including IE6, Opera & Safari) do use the second link. However, Firefox doesn’t, effectively closing the second link within the <noscript>, so there is no content to the link.
This may be a minor example, but it does show you’ve got to use valid code to be confident how it is dealt with. Major examples would probably cause visual issues in cross-browser checking, and are less likely in the days of a reasonable Firefox market share.
The logical solution to do what the auther wanted would be to write out the first link with JavaScript, and have a completely separate link within the <noscript>. However, as any standards aware developer would have been able to say: use a progressive enhancement method. There are even tools to create accessible pop-ups for you!
Tags:
I don’t find yrou code examples, partially hidden and with both horizontal and vertical scroll bars, very accessible.
That depends on your setup, I don’t get vertical scroll bars.
The underlying markup is good, and accuracy is important. (It is important that you can cut and paste straight into something else).
I set the
overflowtoautoso that scroll bars are added if there isn’t space for the content. That stops IE dropping the layout, and stops others from overlapping content, also not very appetising options.