The American National Federation for the Blind brought a class action lawsuit against target.com for inaccessibility of its website (which is, interestingly, “powered by Amazon.com”).
After lots of to-and-fro, news came today that Target have settled, paying $6million into a fund from which those affected by its inaccessiiblity (blind people in California) can claim.
Presumably (I am not a lawyer, but am I gorgeous) this sets a precedent in the USA that many businesses will find unwelcome, but which will presumably lead to more accessible websites.
So why only two cheers?
Well, $6million is lots of money, but given that Target gives away $3million every week “to its local communities through grants and special programs”, it isn’t such a great investment by Target. The terms of the settlement also means that the only people being catered for by this settlement are blind screenreader users:
NFB will run an automated monitoring tool called Worldspace on Target.com every quarter…
Target shall ensure that the Target.com website meets the Target Online Assistive Technology Guidelines, attached as Exhibit C [not on website], and that blind guests using screen-reader software may acquire the same information and engage in the same transactions as are available to sighted guests with substantially equivalent ease of use.
Upon completion of the changes to Target.com pursuant to Section 6.2 herein, the NFB shall certify the Target.com website through its NFB Nonvisual Accessibility Certification program using the standard techniques and criteria of that program.
NFB will annually report to Target the results of user testing by 5 to 15 blind persons with varying skill levels and using JAWS…
Target shall ensure that complaints received from guests regarding the accessibility of Target.com by those using screen-reader technology are reported to a Target employee responsible for ensuring that Target.com is accessible.
Target shall provide to the NFB a quarterly summary of any complaints received from guests regarding the accessibility or usability of Target.com by those using screen-reader technology…
NFB Nonvisual Accessibility Certification. Upon completion of the changes to Target.com pursuant to Section 6.2 herein, the NFB shall certify the Target.com website through its NFB Nonvisual Accessibility Certification program using the standard techniques and criteria of that program.
Working with members of the technology community, the National Federation of the Blind has developed a rigorous procedure by which Web sites and applications that have made special efforts to be accessible to the blind can be identified and recognized.
Accessibility is more than just blind people who use screenreaders. It’s a pity (but it’s understandable) that the NFB didn’t think of other groups with accessibility problems and require development to standards laid down in the internationally-recognised, open WCAG guidelines rather than their own proprietary process.
The danger is that corporations and developers will start developing for the assistive technologies and monitoring tools (machines) rather than people, and that would be a very retrograde step.
Recently, Opera sponsored Geek in The Park 2008 by picking up the tab for audio transcription of the talks. It’s one thing that often gets overlooked by conferences and it’s something that Opera takes very seriously. Equally, you can’t expect speakers and organisers of a grassroots event to pay for it when they’re giving their time for free.
The company I used is called Casting Words, and I want to recommend them to you. After cleaning up the audio, I uploaded it to their site and selected their six-day turnaround service at $1.50 per minute. Four days later the transcripts were returned, with very few errors, particularly when you consider the technical nature of the content. You get them returned as text, RTF and HTML, and the markup is not bad: it’s set out as blockquotes with speakers’ names in cite elements.
The only problem is that multiple paragraphs inside blockquotes are marked up with double br elements rather than wrapped in p elements, so I emailed their support to ask them if it would be possible to amend their publishing system accordingly. Rachel wrote back “Thanks for letting us know about this, we will make that change.”
Now that’s service.
And when a 45 minute conference talk only costs £30 to transcribe, it’s difficult to imagine why organisers of for-profit conferences wouldn’t provide a transcript of their events.
(The transcriptions are being checked by the speakers and will be published when they’re proofed.)
It’s quite a nice machine, but the software that powers it is abominable. On a brand new Vista install, it regularly loses knowledge of the network and has to be reinstalled (a process which takes at least 15 minutes of whirring).
On a clean XP install, the software for one some unwanted Photo Gallery package regularly pops up an error message. The modules aren’t installed a separate programs, so I can’t just delete that module in Control Panel. So now I have to continually get the task manager to nuke the process that pops up this consumer-friendly error message:
System.NullReferenceException: Object reference not set to an instance
of an object.
at HP.CUE.Video.PlaybackControl.UpdateProgressBar()
at HP.CUE.Video.PlaybackControl._ProgressTimer_Tick(Object sender,
EventArgs e)
at System.Windows.Forms.Timer.OnTick(EventArgs e)
at System.Windows.Forms.Timer.Callback(IntPtr hWnd, Int32 msg,
IntPtr idEvent, IntPtr dwTime)
For all I know, every HP printer uses this software. Buyer beware.
Life’s too short for crap software—particularly dull utility software like printer drivers.
Yesterday, Microsoft gave me a free lunch. Not to say sorry about Vista, but because I went to Cambridge to observe the CSS working group’s face-to-face meeting. I was geekily excited to hear them discuss the topic “what is a br element”, and to meet fantasai, with whom I’d worked to gather web designers’ wishes for CSS 3 (and who promises faithfully that the feedback on those wishes is imminent).
The “what is a break” didn’t disappoint. Is it, as Håkon suggested, {content:'\A'; white-space:pre;}? But what about the fact that a single break has no height, but two (or multiple) breaks do? So should we add the rule br+br {content:'\A'; white-space:pre; height:1 em;}?
Someone else pointed out that the break element was more than just a presentational effect, and it has semantics – for example, when used to mark up poetry or code. So is it best described by defining a new value display:break;?
This idea was parked; whereas in CSS 3, a new value for the display property is theoretically possible (but hugely complex), but it can’t be done for CSS 2.1. As you might know, the CSS 2.1 spec is
a “snapshot” of CSS usage: it consists of all CSS features that are implemented interoperably at the date of publication of the Recommendation.
Amongst other things, the CSS 2.1 specification doesn’t allow an author or implementer to learn how an HTML br should be styled. For example, Microsoft and Mozilla both allow page-break-* to be set on the break element, and all the big four allow br style="clear:left;" to be specified. The problem is that the CSS 2 spec only allows these properties to be set on block level elements, and br is an inline element. (Or is it? There was some debate about whether it was its own kind of element).
It would be wrong to blame the browsers for all allowing clear to be set; the br element has been in the language since dinosaurs roamed the earth, and CSS 1 allowed clear on all elements, not just the block-levels:
Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.1 the ‘clear’ property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline’s line box to below the respective floating box(es).
There was no question whether the exceptional behaviour of br should be specified, only that of how. Anne wanted to make it a special case, by saying html:br may have page-break-* applied, but others objected because CSS is not just for styling HTML:
CSS is the Web’s primary style sheet language for specifying the rendering of text documents, in particular those expressed in HTML and XML-based formats. It can also be used to specify portions of the rendering of certain non-text formats, such as SMIL (multimedia) and SVG (vector graphics).
Eventually, consensus was reached, expressing it in a way that nobody liked but everyone can live with: page-break applies to block-level elements and may also be applied to “other elements”. Whether this means that I could develop my brand new Bruce-browser by reading the amended CSS 2.1 spec and interoperably implement br is doubtful (so I’ll abandon that plan and carry on with Opera, after all!).
The whole conversation is minuted on the IRC logs. One thing that that impressed me, and which doesn’t come over in the minutes, is how much the participants care about users, web authors and designers. On issues where there are several solutions and none is technically superior, the group asked Molly and Jason Cranford Teague (the designers in attendance that day) to make the call. My thanks to all of them for agreeing to my request to observe.
Fantasai is even groovier in real life than online. There are even photos to prove they’re all real people!
On 11 and 12 September in Amsterdam, I shall be delighting the crowned heads of Europe and other high class sophisticates by talking about accessibility and Search Engine Optimisation. Chris Mills will also be there from Opera. Also travelling from Blighty are Stuart Langridge, Andy Clarke, Dean Edwards and Christian Heilmann.
After a question about image replacement on accessify forums, I began to explore the image replacement options that CSS 3 will offer us. There is a potentially a mechanism using the content property that requires no extra markup and which degrades well even with CSS on and images off, because it doesn’t hide the text it replaces.
I discuss it on the new Opera Developer Relations team blog (part of the forthcoming ODiN, the Opera Developers Network), so comments there please.
(You might consider subscribing to the ODiN blog, as it’s a group blog for the Developer Relations team to discuss all things Web; it’s not a place for pimping Opera and slagging off the opposition.)
CSS 3 image replacement
Since before the dawn of time, designers have wanted sexy fonts or images for headings, links and buttons on web pages. The adoption of @font-face for CSS to use any font a designer specifies will take away some of the use cases. The time-honoured method of using img in the source code, and using the alt attribute to as a text alternative still works, of course, and very nice it is too, but some designers prefer to use CSS to replace text with an image.
There is a variety of image replacement techniques, but they all add a background image and then hide the text, usually by moving off the screen. They all suffer from restrictions: they can only be used with opaque images, or against flat colour, or they need extra spans for style hooks. There’s also the problem of people who surf with images off, which is quite common for those using phones whose web use is metered. They don’t see the image, but don’t see the text either.
It’s interesting to note how the browsers style this differently. To centre the logo, you need to style the h1 with text-align:center, as if Opera centres the real text and then replaces it with the image. Safari will only centre the logo with margins, as if it replaces the text with an virtual img tag, which is then impervious to text-align.
What should browsers do if the image can’t be shown?
I think, in any circumstance that a browser can’t show an image, it should show the content of the element in the natural position for that text. That would ensure that this CSS 3 image replacement technique degrades well when CSS and images are off.
This behaviour would be similar to iframe: “The information to be inserted inline is designated by the src attribute of this element. The contents of the iframe element, on the other hand, should only be displayed by user agents that do not support frames or are configured not to display frames.” In a similar way, html has a fallback mechanism for images and objects: when it can’t show the image, it shows the alternate text.
Here’s where the support for this image replacement mechanism gets experimental, even in the highly standards-compliant browsers. This is because the specification changed between CSS 2.1 and CSS 3.
CSS 2.1 said
If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed. CSS2 spec
So the current "standard" says that it should either show the contents of the element (the actual text between the tags), which makes sense to me, or some sort of “image not found” icon, which seems to me to be the worst of all worlds. If a screenreader or a search robot gets the plain text, why not a user who has images switched off?
The CSS 3 spec allows you to set a series of fallbacks, much like when you set font-family. So here, the browser will try to replace the header with a movie, then an animated gif if it can’t find or display the movie, or a standard jpg if it can’t find or display that gif, and if it can’t render any of those, it will just show the contents of the element:
If no alternatives exist, then ‘none’ is used as a final fallback…Thus to make an element fallback on its contents, you have to explicitly give ‘contents’ as a fallback. CSS 3 spec
To me, it’s odd that anyone should want to display nothing instead of the content, let alone make it the default, but at least the new specification allows you to unambiguously tell the browser to display the contents of the element: it’s not allowed to "choose" between the text and a "image not found" icon.
What do browsers do?
However, browser support is still experimental as the generated and replaced content module of CSS 3 is still susceptible to change. My no-images test page shows that Opera and Safari still have problems following the CSS 3 spec fully.
Conclusion
Once the CSS 3 spec is finalised and the browser support is solid, a foolproof way of doing image replacement will be available to us that is accessible to screenreaders and which degrades gracefully with CSS off and with images off.
Although the weather made the picnic impossible, 40 alpha geeks and an 11 year old girl congregated in a Leamington Spa bar for 2008’s Geek in the Park. The talks were really good: Jon Hicks on icon design was fun, because it’s always fascinating to see people talking about stuff they’re passionate about. Drew Mclellan was inspiredly wierd when linking Brian Cant to microformats.
I thoroughly enjoyed meeting up with old chums and local heroes like Owen from fullcreammilk and Mark “fam fam fam” James. One Black Bear bought a round of drinks for everybody (yay!). The event was organised by Trovster. It’s totally free and 100% grass-roots. A brilliant job; I take my hat off to him.
I used four minutes to talk about Opera as we were sponsoring. A few people asked me for links to some of the things I said, so here they are and a rough record of what I remember saying.
The four-minute Opera pimp: test with Opera, please
Opera works best with good, valid code. If your boss tells you it’s not worth cleaning the code to allow Opera users in because they’re not numerous enough, point out that Opera on 135 million mobile phones. Most bosses are very interested in the mobile market—even ultra-conservative organisations like banks. (Barclays, for example, recommends Opera for mobile banking.)
Opera on a phone is the same as Opera on the desktop; we use the same core (called “Presto”) for all the browsers, so if your site works in Opera desktop (and it will, if the code is clean) then it’ll work on Opera phones. Should you need to test a phone application, our developer tool, Opera Dragonfly, allows you to remotely debug a phone from your desktop (typing in test data via a phone keyboard fast becomes tedious!).
I mentioned Web Standards: Opera is the most standards-compliant browser. Some people claim that Web Standards are now the norm. We wish it were so, but it isn’t. We’ve done some research (which we’ll publish in the next couple of weeks): on a large sample, only 0.71% validated in 2001. By 2006 that was up to 2.6%. By January 2008, that was a dizzying 4.13%. Of the Alexa top 500 6.6% validate. Amusingly, of sites that display a w3c “valid” badge, only 50% validate.
So we’re very active in Standards promotion. We help make them: our Head of Standards was involved in the Mobile Web Best Practices guidelines which became a w3c recommendation last month. We’re involved in HTML 5 and CSS (which was invented by our Chief Technology Officer).
We also educate people about Standards; we’ve produced the Web Standards Curriculum which is free, open and available to anyone. If you hire a new developer and you want a crash-course that will teach them the right way, give them that. We do university tours; a UK one is scheduled 13-16 October.
Although I lived in East Asia for four years, I never visited China. Although I’d love to see it, my conscience won’t allow me to give a penny to its corrupt and immoral leadership, particularly after my experience with Tibetan refugees in India.
So I find myself in the slightly odd position of agreeing wholeheartedly with President Bush (!) when he said yesterday,
The United States believes the people of China deserve the fundamental liberty that is the natural right of all human beings. So America stands in firm opposition to China’s detention of political dissidents and human rights advocates and religious activists…
Ultimately, only China can decide what course it will follow. America and our partners are realistic, and we’re prepared for any possibility. I’m optimistic about China’s future. Young people who grow up with the freedom to trade goods will ultimately demand the freedom to trade ideas, especially on an unrestricted Internet. Change in China will arrive on its own terms and in keeping with its own history and its own traditions. Yet change will arrive. And it will be clear for all to see that those who aspire to speak their conscience and worship their God are no threat to the future of China.
As a member of Amnesty International, I entirely support this view, and applaud his speaking out.
In entirely unrelated news, another superpower has finally tried someone whom it imprisoned for five years with no habeas corpus. The jury disregarded the ruling regime’s request for a 30 year prison sentence, instead choosing to imprison him until early next year. The judge said, “I hope the day comes when you return to your wife and your daughters and your country.”
When my daughter is doing her homework using Google, I always impress upon her that the Web is not an information medium, it’s a communication medium. Just as in the real world, the web is full of misinformed idiots with big gobs. Unfortunately, you can’t see their staring eyes and crazed grins on the web.
I was checking out an excellent YouTube video by a screenreader user called Importance of HTML Headings for Accessibility that shows how screenreaders navigate the heading tags, and investigated some of the “related” videos. Oh dear.
There’s an XHTML tutorial called “Changing colors and adding paragraphs” that sets bgcolor on the body tag, and only ever previews the page in IE. “Formatting paragraphs” uses align atttributes. The “using tables for layout” tutorials made me wish I still smoke, and then (more productively) wonder how to do screen grabs and make my own tutorials.
So I left a comment
I’m sorry, but this video seriously misinforms the audience. The bgcolor attribute is old-fashioned because it mixes style with the content.
The way to do this is with CSS: body {background-color:red; color:white;} or whatever color you want.
If you’re looking to learn web design, please use books recommended by the web standards project http://www.webstandards.org/learn/reference/books/ or use Opera’s free Web Standards Curriculum (www.opera.com/wsc). (Disclaimer: Opera is my employer.)
The Web Accessibility Initiative’s ARIA specification is a useful way of adding additional information to Ajax applications to allow them to pass information to assistive technologies to make them accessible.
I agree with criticism that it’s a bit of a hack, and it doesn’t stop sloppy authors using the wrong element for the job, but I think that’s unavoidable—emultaing desktop applications in a browser using creaky ol’HTML 4 is itself a bit of a hack. It’s also the only show in town when it comes to accessible “web 2.0” until HTML 5 comes along in a decade, especially now that all the major browsers and screenreaders have some degree of support. There’s now extra ARIA goodness in Gmail and WordPress 2.6.
But what actually is it, I found myself asking while researching it, and so commissioned Gez Lemon to write an article for the Opera Developers community.