For the last several years, we have been using the Amazon.com web site to demonstrate functionality of WAVE. We do this because it is a complex site that has some accessibility features, many accessibility problems, and frankly, because the accessibility of the site seems to change almost daily. We’re never quite sure what Amazon developers are going to fix and/or break each time the site changes, but it’s always some new accessibility disaster and/or success that we can find, analyze, and discuss.
Today in a training, I noticed that their link to the “accessible” version of their site was being hidden off-screen using CSS. In the past, they’ve used an invisible 1 pixel X 1 pixel image at the top of the page to alert screen reader users to this version of their site. But what was most interesting is that the CSS used to hide the link (
position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;) is the exact code recommended by us in this WebAIM article.
Well, they say that imitation is the best flattery and I’m pleased to see that someone at Amazon.com is reading our site. I hope they continue to read and implement accessibility – how wonderful it would be if a high-profile online store stepped up and truly implemented accessibility.