Here is an HTML newsletter by Play.com in my Gmail inbox, as you can see the blank spaces are where images are going to be once I download or show the images. I generally trust Play.com’s leading messages or subject line, which in this case is ‘Sizzling Offers – All You Need For Summer!’, however I would also like to know what these ‘Sizzling Offers’ are! Where is my call to action?

On a website, this would be an accessibility fail and would break an important WCAG checkpoint (1.1.1 None-text Content).

Play.com Newsletter

The next e-newsletter is from Cloggs and Ticketmaster, who are also missing descriptive alt text for their images, however they have standard text in the body of the newsletter to support the images. This is pretty useful as the user has an indication as to what the newsletter is about and more importantly, what they are selling!

Cloggs Newsletter

Ticketmaster Newsletter

While I was writing this post, I had another newsletter come through, this time it was from Discount Vouchers and I was pleasantly surprised to see that they have included standard text in the newsletter and have also added alt text on the images. Although some images were missing alt text, the prominent ones have them, such as ‘Travelodge Voucher’, which immediately indicates what the image is and it is also more likely to prompt a call to action.

Discount Vouchers Newsletter

So are designers becoming lazy to include alternative text on images in HTML newsletter or the importance is no longer there as text alternative newsletters are available? I would like to see more alt text in my newsletters, it helps me decide whether I want to download the images or not and whether or not to click on anything. Is that not the main purpose of an e-newsletter? Call to action.

Check out Webcredible’s article for more information about writing effect alt text for images.

Firstly a huge well done to Accessible Twitter on winning the Web 2.0 ACCESS IT Award at a ceremony held at Microsoft London. I accepted the award on behalf of my Twitter friend Dennis Lembrée, I was very honoured when he asked me to also give a presentation at the award ceremony.

There was a great turn out and some wonderful presentations by Nikolaos Floratos (e-ISOTIS), Sarah Foxall and Matt Lambert (Microsoft) before the award ceremony began. Here are the categories and winners:

ACCESS-IT@Web2.0: project, product or service that advances accessibility on web 2.0. – Winner: Accessible Twitter
ACCESS-IT@Home: project, product or service that advances independent living for people with disabilities or elderly. – Winner: BBC iPlayer
ACCESS-IT @Work: project, product or service that facilitates persons with disability to work independently. – Winner: ECDL Hallas
ACCESS-IT@Learning: project, product or service that facilitates persons with disability or elderly to get educated in an affordable, accessible, usable and efficient manner. - Winner: RoboBraille

The presentation is available on SlideShare and I will post some pictures up of the wonderful glass cube award, there should be photos to follow on the Access IT website.

Thanks to Dennis Lembrée for a mention in the Webaxe podcast – A great podcast and blog on practical web design accessibility tips.

When I first heard about this project, 2 things sprung to mind:

1. Govenment related project – must be AA accessible
2. Educational project – must be AA accessible

So either way it was essential that Defence Dynamics was AA accessible and I had to make sure I had enough time to do all the XHTML and CSS and ensure accessibility was always in mind. I used the WAI website to ensure I ticked off the AA priority list and used the NVDA screen reader to ensure blind users can easily navigate around the website, along with an awesome colour blindness colour contrast tool called ‘Check My Colours‘.

I took the little downtime I had during this project to get my head around HTML 5 and it really wasnt too bad, taking full advantage of the new tags available:

• section:  A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
• header:  The page header shown on the page; not the same as the head element
• footer:  The page footer where the fine print goes; the signature in an e-mail message
• nav:  A collection of links to other pages
• article:  An independent entry in a blog, magazine, compendium, and so forth

The markup is so much more cleaner and easy to workout what belongs where, for example you don’t need to create a <div id=”nav”> tag for the navigation. I ran into some issues with IE (who doesn’t!) with enabling the new tags, but quickly found a work around via Snipplr.

Also consistently refered to Bruce Lawson’s articles on HTML 5 (which are excellent!) and the random Tweet here and there for great advice (@brucel) – Thanks for that Bruce!

I really enjoyed working with HTML 5 and looking forward to integrating ARIA with HTML 5 too and the consistent improvement for web accessibility.

A big thank you to HTML5 Gallery to listing Cockpit Arts on their website.

• Web pages with tables, forms, or dynamically generated results
• Web pages with informative images such as diagrams or graphs
• Web pages with scripts or applications that perform functionality

1. Turn off images, and check whether appropriate alternative text for the images is available.

2. Turn off the sound, and check whether audio content is still available through text equivalents.

3. Use browser controls to vary font-size: verify that the font size changes on the screen accordingly; and that the page is still usable at larger font sizes.

4. Test with different screen resolution, and/or by resizing the application window to less than maximum, to verify that horizontal scrolling is not required (caution: test with different browsers, or examine code for absolute sizing, to ensure that it is a content problem not a browser problem).

5. Change the display color to gray scale (or print out page in gray scale or black and white) and observe whether the color contrast is adequate.

6. Without using the mouse, use the keyboard to navigate through the links and form controls on a page (for example, using the “Tab” key), making sure that you can access all links and form controls, and that the links clearly indicate what they lead to.

Although there are other tools available and after trying out many of them Wave, by Web Aim seems to hit all the right spots. Instead of giving you a whole load of jargon and line numbers, Wave shows you a snapshot of the web page you are analysing and highlights any issues with icons. Red icons for accessibility errors, yellow icons for alerts and green ones where there are accessibility features, which also may need checking for accuracy.

Wave, by Web Aim

Another useful online tool is Cynthia Says.