1. <object type="application/x-shockwave-flash" data="http://www.youtube.com/ v/ VideoID" width="480" height="360">
2. <param name="movie" value="http://www.youtube.com/ v/ VideoID" />
3. <param name="quality" value="high" />
4. <param name="allowFullScreen" value="true" />
5. <!-- Fallback content -->
6. <a href="http://www.youtube.com/ watch? v=VideoID">
7. <img src="http://img.youtube.com/ vi/ VideoID/0.jpg" width="480" height="360" alt="[Video title]" />
YouTube Video
8. </a>
9. </object>

Here is an example:

1. What are the issues of accessibility in HTML 5?
2. What is the canvas element?
3. What is the difference between video built in natively in the browser or provided through a Flash plugin?
4. Why are people in the HTML 5 working group so nasty to each other?
5. Why is accessibility important in an emerging standard?
6. Can’t accessibility be added later?
7. What is the state of support of HTML 5 in browsers?
8. When can we start to use HTML 5?
9. What can geolocation do for accessibility?
10. Does assistive technology support HTML 5 features?

So please vote for it now, and while you’re at it, show your love to some other accessibility and web standards proposals as well. </thxkbay>

What you need to do is:

• Update to version 3.0 of the plugin.
• If you didn’t adapt any files just overwrite them. If you customized the CSS or XSL files, take care that you don’t overwrite yours. Also the XSL namespace must reflect the API version used in the plugin (2009-07-01), i.e. xmlns:aws= "http://webservices.amazon.com/ AWSECommerceService/ 2009-07-01"
• Get your Secret Access Key in addition to your existing Access Key ID. Your future requests will be signed using the secret key.
• Go to the plugin’s admin interface and enter the secret key.
• Some people experienced a few minutes where the items didn’t show up, instead they got the untransformed XML code. After a few minutes the problem resolved itself. My guess is that Amazon cached the XSL files, the versions mismatched, therefore the XML wasn’t transformed. That’s why I renamed the XSL files so that the new ones will be used. If you want to be sure, also delete the cached files amtap-aws-items-for-post-*.html in your wp-content/cache directory.

If you encounter any problems with the update, re-install the old version and let me know what went wrong so that we can fix it together until August 15th.

You can also support the plugin by translating it. There’s an empty PO file in the package. With a tool such as Poedit it’s fairly easy to translate everything. Thanks.

The rules: a haiku “is a form of Japanese poetry, consisting of 17 moras, in three metrical phrases of 5, 7, and 5 moras respectively.” I think it’s legitimate for the sake of simplicity to translate “moras” with “syllables.” A reference to a season or nature is a bonus.

A crude example, my Japanese readers may forgive me:

Show us the studies /
says hixie, experts shout fail. /
It’s about people.

And another:

For assistive tech /
canvas is invisible /
like tears in the rain.

So here is my challenge: twitter a haiku about HTML 5 and tag it with #html5haiku. There aren’t any prizes yet apart from the innocent fun of participation, but perhaps somebody would like to donate something?

• A link to Google Maps when JavaScript is disabled.
• Support for the Google AJAX API Loader.
• Using the small map control.
• Keyboard accessibility for all control elements within the map.

As a fallback without JavaScript — because people disable it, because their mobile device doesn’t support it, or because it gets filtered by corporate proxies — Patrick used the little known Google Static Maps API, but for some reason he missed adding the link to Google. Here is the fix:

1. <div id="map">
2. <a href="http://maps.google.com/maps ?f=q&amp;output=html &amp;q=50.110950+8.684666" title="Google Maps">
3. <img src="http://maps.google.com/staticmap?hl=en &amp;center=50.112267,8.678384 &amp;markers=50.110950,8.684666,red &amp;zoom=15&amp;size=500x300 &amp;key=[Your API Key]" alt="City map of Frankfurt" width="500" height="300" />
4. </a>
5. </div>

Then I changed how the map is embedded. As it seems that the API loader is more current, I preferred that way:

1. <script type="text/javascript" src="http://www.google.com/jsapi?key=[Your API Key]"></script>
2. <script type="text/javascript" src="/js/accgmap.js"></script>
3. <script type="text/javascript">
4. google.load( 'maps', '2', { 'language' : 'en' } );
5. google.setOnLoadCallback( GMAP.initMap );
6. </script>

Using the small control elements is trivial: SmallMapControl(). The next thing I wanted to change was keyboard access to all controls, in particular for the map type, i.e. Map | Satellite | Hybrid. Patrick refers to an id, but I found that all relevant controls have a title, so I just checked for that attribute. I also dropped setting the style attribute in JavaScript as that belongs in the CSS file. His original function GKeyboardPatch() now looks like this (note the while loop for a slightly better performance):

1. GKeyboardPatch: function( map ) {
2. var button, divs = map.getContainer().getElementsByTagName( 'div' );
3. var i = 0;
4. while ( divs[i] ) {
5. if ( divs[i].getAttribute( 'log' ) || ( divs[i].getAttribute( 'title' ) && divs[i].getAttribute( 'title' ) != '' ) ) {
6. button = document.createElement( 'button' );
7. button.setAttribute( 'value', divs[i].getAttribute( 'title' ));
8. divs[i].appendChild( button );
9. if ( divs[i].getAttribute( 'log' )) { // only control buttons
10. // override the IE opacity filter that Google annoyingly sets
11. divs[i].style.filter = '';
12. // should really set to 'transparent'
13. divs[i].style.background = 'url( http://www.google.com/ intl/en_ALL/mapfiles/transparent.png )';
14. }
15. }
16. i++;
17. }
18. }

Now remember I said I’d rather separate style and behaviour, so here are a some lines of CSS with the setting of width and height for the #map being most relevant, otherwise it will collapse:

1. #map {
2. height: 300px;
3. overflow: hidden;
4. position: relative;
5. width: 500px;
6. }
7. #maps-static, #maps-static img {
8. display: block;
9. }
10. #map span.note {
11. display: none;
12. }
13. #map button {
14. background: transparent;
15. border-style: solid;
16. border-width: 0;
17. cursor: pointer;
18. height: 100%;
19. left: -2px;
20. margin: 2px;
21. overflow: hidden;
22. padding: 2px;
23. position: absolute;
24. text-indent: -100em;
25. top: -2px;
26. width: 100%;
27. }
28. #map a:focus, #map a:active, #map button:focus, #map button:active {
29. outline: 2px dashed #61bf1a;
30. }

And that’s it, thanks again to Patrick for the solid foundation I built upon. Now download the JavaScript code and try to tab through the map below.

Actually on the other website I extracted hCard microformats from the page as well and displayed the addresses on the map, but I was lazy and used jQuery. I thought it doesn’t look well here mixed with Patrick’s clean DOM scripting, but feel free to take it from the original website.

I was responsible for most of the programming beneath the navigation bar on the home page, and every time when I book a ticket there’s a small feature I enjoy so much I want to tell you about it: the buttons on the date selector are really, really tiny (16 × 8px). As you know thanks to Fitt‘s Law, there are even formulas to calculate how much better big buttons can be hit.

So I just added some padding. And that makes a huge difference: try to click on the same buttons later on in the booking process where the padding is missing.

If I could make one improvement I would add keyboard functionality to those buttons. Alas as the datepicker itself came from a third party, the assembled code was beyond my control. But I know that the Deutsche Bahn is listening to the needs of people with disabilities and their disability advisory board members are highly competent, so I trust these and other issues will be fixed soon …

The main idea is to present leading innovators and their perspectives on eAccessibility from the technical, political, and economic side. Experts on seven panels will briefly describe their own work and their view of accessibility and then discuss the issues.

There’s an illustrious line-up of speakers including Deutsche Bahn, the European Commission, France Télécom, the German Federal Ministry of Labour and Social Affairs, Google, IBM, Microsoft, Mozilla, Opera, the W3C, the Web Standards Project, and Yahoo! talking about these topics:

• Accessible Web Applications
• Mobile Access — Device-independent or Accessible?
• Comparison of National Accessibility Guidelines
• Accessible Rich Internet Applications (ARIA)
• Web Standards and Accessibility in Higher Education
• Harmonising European Accessibility Guidelines
• The Business Value of Accessibility

If you have been following my posts in the last two years this will sound slightly familiar. Furthermore I’m honored to have Linda Mauperon, Member of Cabinet of the European Commissioner for Information Society and Media (Viviane Reding) as our keynote speaker. Please see the detailed description of the panels in the conference program.

We would like to take a look on accessibility from different perspectives presenting pioneering thinkers whose organizations have established accessibility in their business and communication long since — and making serious money with it. There should be something of interest for everybody among the topics: for techies, consultants, employees from universities and companies. The conference is limited to a maximum of 200 attendees. Registration opens next week.

Of course there are various gems under the hood of the website, too. Naturally it is extensively accessible (check the cool skip links), but it is also incredibly fast because Yahoo!’s best practices for frontend performance are regarded. There are separate style sheets for printing, for iPhones, and for handhelds. The CMS is WordPress µ, having the advantage of administrating both the English and the German version with the same installation.

You can see and download the slides at Slideshare (German). As I promised to write a detailed post about ARIA enhanced tab navigation for the Webkrauts web standards advent calendar (think of a German version of 24 ways) you will be able to enjoy an English tutorial soon. Never mind the references to Chris in the slides — I had to choose an example from my flickr pictures, and I believe there are too many presentations already with kittens.

The conference was surprisingly innovative: I half expected a crowd of suits as the event was co-organized by the Austrian Ministry of Health, Family and Youth, instead there were many young faces and a fair percentage of women. Things I have learned (and tweeted about) include:

• As of January 2009, websites sponsored by the Austrian Ministry of Health will only receive funding when they are accessible. That doesn’t come as a surprise as a European Ministerial Declaration in 2006 announced that accessibility and best practices could become mandatory in public procurement in 2010.
• Artur Ortega showed examples of Dirk Ginader’s accessibility features for Yahoo! Finance, including two input fields where the labels were dynamically updated after a currency was chosen. So a screenreader read “convert pound sterling to euros” instead of “convert currency to currency.”
• One reason for JavaScript enhanced HTML controls for Flash objects like Yahoo! video is that the Flash object cannot get tab focus when the wmode param is set to opaque or transparent. Still without that param it is impossible to tab into a Flash object in Firefox 3. Or did I overlook something?
• Designer Maria Putzhuber quoted an interesting delusion: 70% of designers believe that visitors are almost always able to maintain orientation while in fact just 10% of the visitors are able to achieve this. What do you think is the reason?

Deutsche Fassung

I mention it here because the ultimate geek literature is written by geeks, and Cory Doctorow is as geeky as one can get: he is co-editor of the blog Boing Boing, worked for the Electronic Frontier Foundation and publishes his books under a Creative Commons license, hence the availability as an e-book. Like the work of former programmers such as Iain Banks or Ken MacLeod (whose science fiction novel Learning the World inspired me in naming this blog) his books share the cultural background and mindset of readers who grew up with computer games, LARP, the free party movement, not to mention the inevitable Star Wars.

Although Little Brother is an awesome and entertaining read, there are frequent interspersians as part of the plot about encryption, hacking the Xbox, gentrification, RFID, TOR, or setting up your own underground movement. Marcus Yallow is a 17 year old h4ckr in San Francisco who gets caught in the middle of a terrorist attack. As a reaction the paranoid government turns the place into a police state, not catching any terrorists, but harassing ordinary people and cutting their civil rights.

If that sounds familiar you wouldn’t be surprised to learn that all this is lead by a (fictional) Department of Homeland Security, the guys who do not hesitate to steal your privacy and intellectual property by disassembling your gadgets when entering the US — unfortunately this is not fiction anymore. Probably that’s the most disturbing thing about this book: not only are most of the hacks actually working, but also state troopers with machine guns against ravers are a reality in Bush Country (and not only there), among other things.

Which brings me to another reason why I posted about the book: download it for free in almost any format you can imagine, get the audio book, buy it, donate it to schools. But read it. And if you live in the United States, go vote!

Now there’s light at the end of the tunnel: a few days ago Apple filed a patent for multi-touch in combination with features such as voice commands and speech recognition, facial recognition, gestures, fingerprint input, body temperature, heart rate, skin impedance, and pupil size.

With that range of input possibilities, accessibility on the iPhone (and on other devices) could be significantly improved. Also other visionary devices come into range, like the Charmr for diabetes management.

The Charmr was a great design study by Adaptive Path, although a touch screen is a problem for people with diabetes who are more likely to develop vision impairments and lose tactile sensitivity. Speech recognition is an obvious solution.