Discuss: A More Accessible Map
by Seth Duffey
- Editorial Comments
2 JavaScript?
I’m not seeing the need for JavaScript in this situation, if anything it makes the map less accessible (I know JavaScript and Accessibility are not mutually exclusive, but still).
There has been lots of examples of pure CSS image maps, which render mostly the same as the one shown here in addition to sharing similar markup. They also solve the CSS on/JavaScript off problem.
Be careful with the ‘this’ keyword in object literals, they are never instantiated (nor can they be) so ‘this’ isn’t exactly meaningful in an object oriented sort of way. Relying on it may lead to unexpected results.
posted at 12:37 am on April 18, 2006 by Justin Perkins
3 Markup first
Great example of the concept of always starting with the meaningful markup then style it and add it’s behaviour.
Nice one ;)
posted at 06:17 am on April 18, 2006 by Abdelrahman Osama
4 Great Alternative
Another great article. I did not think it would be this easy to create custom map applications. This will be a good starting point for alot of developers.
posted at 06:58 am on April 18, 2006 by Seth Bertalotto
5 Screen Readers ignore display:none ?
Can anyone confirm the comment that “screen readers will ignore an HTML element with a style of display: none”
Can this really be true? And if so, why would a screen reader pay any attention to the purely presentation layer of CSS?
posted at 07:10 am on April 18, 2006 by David Beale
6 CSS is not enough?
I’ve reread three times, peered at the examples, but I fail to see why javascript is needed for tooltips.
the CSS :hover pseudoclass would give you the same results, and for the sake of Internet Explorer there is this wonderful little javascript from Peter Nederlof: http://www.xs4all.nl/~peterned/csshover.html
I’m not sure if the map is always the added information to the tooltip text; in this example it maybe is as an indication of the place of a city added to the city information, but I guess there are many examples where the map itself plays a more central role. I think imagemaps would be better in that case. The technique is nice, the added benefits are clear, but only for appropriate needs.
posted at 07:13 am on April 18, 2006 by Martijn ten Napel
7 re: Screen Readers ignore display:none ?
David wrote:
Can anyone confirm the comment that “screen readers will ignore an HTML element with a style of display: none”
Yes, indeed. See Joe Clark’s Facts and Opinion About Fahrner Image Replacement in the October 20, 2003 issue of this magazine.
Can this really be true? And if so, why would a screen reader pay any attention to the purely presentation layer of CSS?
Because they don’t talk to standards-based designers?
posted at 08:07 am on April 18, 2006 by Jeffrey Zeldman
8 Re: CSS is not enough?
Martijn wrote:
I’ve reread three times, peered at the examples, but I fail to see why javascript is needed for tooltips.
At first I thought so too. I experimented with pure CSS options and, sure, you could use a selector like dt:hover + dd to trigger the tooltip, but you lose the ability to add the “sticky” option. More importantly though, you lose the ability to turn the map “on” and “off.” I think turning the map “on” is a key feature and you could pretty easily enhance this script by creating a method to disable the map-based views en masse or individually, which is a great usability enhancement.
posted at 08:40 am on April 18, 2006 by Aaron Gustafson
9 re: re: Screen Readers ignore display:none ?
Yes, indeed. See Joe Clark’s Facts and Opinion About Fahrner Image Replacement in the October 20, 2003 issue of this magazine.
Wow – Great artical. Can’t belive I missed that one when crawling the ALA back catalog. However, surly the concusion that not reading display: none; is wrong? afterall it is not read: none; :-)
posted at 08:51 am on April 18, 2006 by David Beale
10 What about Google/Yahoo?
To be realistic here, more people are going to use the Google/Yahoo map APIs than roll their own, so we also need a script to parse the DOM and place the locations and bubble content on a G/Y map. This of course won’t be as accessible as your pure CSS map, but it’s a lot better than pure Javascript map implementations.
posted at 09:34 am on April 18, 2006 by Steve Clay
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
1 Interesting Article
I’m all for accessibility, and this article is a nice example of how bloated applications can be made friendly towards those with impairments.
On another note, is it really safe to start using CSS 3 attributes?
posted at 12:31 am on April 18, 2006 by Damien Wilson