We're nice people, really, we are. But let me tell you, there's nothing that makes you feel crummier than having to explain to someone who's visually impaired that your shopping cart works with screen readers... except for the key Download Ebook button on the final screen.

We aren't, by any means, experts in Web accessibility, so it was utterly maddening that our custom shopping cart with eSellerate worked perfectly, except for the download buttons. I made sure the graphic had an ALT tag, but that wasn't enough. Next, I added a TITLE tag to the link itself, but eSellerate's system stripped that out when rendering the actual page. I was stumped, but hoped that the TITLE tag would make a difference when eSellerate tweaked their system to allow it through.

Unfortunately, when they made that change for me, it made no difference at all. But discovering that the TITLE tag wasn't helpful sent us into a paroxysm of testing, and after much trial and error (I'll remember Command-F5 as the shortcut for toggling VoiceOver for a long time now), we finally figured it out. I have no idea if this problem is at all common, or merely an artifact of customizing code that a separate shopping cart application then must render, but here's our solution.

The code that I entered into eSellerate's custom layout editor, when rendered as HTML on our actual receipt page, turned into this (slightly edited to avoid confusing our content management system):

nbsp;nbsp;nbsp;nbsp;
<a title="Click here to download ebook!" href="http://store1.esellerate.net/isapi/tcobacktomymac11.zip?dl=GR3HR4rydqd4XBOdFfV4&sessionid=1235&file=\tcobacktomymac11.zip">
<img src="/store/i/pub186525909/lay301527449/p/tc-download-ebook.gif" Width="130" Height="25" border="0" alt="Click here to download book!" /></a><br>

The image's ALT tag was necessary, but it wasn't sufficient. I had to make two seemingly unrelated changes to enable VoiceOver to read the "Click here to download book!" ALT text.

• The image's SRC tag had to become absolute, rather than relative. That was easily done by linking to the graphic on our site with a full URL.
• The entire chunk had to be wrapped in an HTML block tag like P or DIV. I opted for DIV, but interestingly, VoiceOver failed if the DIV enclosed the four non-breaking spaces that were there previously. That was also easily handled by replacing the non-breaking spaces with a bit of CSS to indent the button.

Here's what my new code looks like, with those important changes made.

<div style="padding-left: 30px; padding-bottom: 5px;">
<a title="Click here to download ebook!" href="http://store1.esellerate.net/isapi/tcobacktomymac11.zip?dl=07CsOupdUps8Sukc3Y04&sessionid=1406&file=\tcobacktomymac11.zip">
<img src="http://www.takecontrolbooks.com/tc-graphics/tc-download-ebook.gif" Width="130" Height="25" border="0" alt="Click here to download book!" /></a>
</div>

To give you an idea of how we figured this out, we took chunks of HTML that worked fine from other areas and inserted bits of them in place of the code that didn't work. We first stumbled on the need for an absolute URL while some temporary text accidentally provided the block element that was also required. After realizing that temporary text was important, we narrowed down our tests until we realized that enclosing the chunk in HTML block tags would do the job.

We know there are other aspects of our Web site and PDF approach that aren't ideal from the perspective of the visually impaired, but at least people using VoiceOver should now be able to navigate the entire Take Control site.