<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title>Juicy Studio</title>
	<subtitle>No artificial additives</subtitle>
	<link href="http://juicystudio.com/"/>
	<updated>2008-05-01T17:00:00Z</updated>
	<author>
		<name>Gez Lemon</name>
		<uri>http://juicystudio.com/</uri>
	</author>
	<id>tag:juicystudio.com,2008:1</id>
	<link rel="self" type="application/atom+xml" href="http://juicystudio.com/syndicate/juicyatom.xml"/>
	<rights>Copyright 2008, Juicy Studio</rights>
	<entry>
		<title>HTML5 Alternative Text, and Authoring Tools</title>
		<link href="http://juicystudio.com/article/html5-alt-text-authoring-tools.php" rel="alternate"/>
		<id>tag:juicystudio.com,2008-05-01:/html5-alt-text-authoring-tools.php</id>
		<updated>2008-05-01T00:29:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/html5-alt-text-authoring-tools.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
There is still strong debate about whether or not the <code>alt</code> attribute should be a required attribute for the <a href="http://www.w3.org/html/wg/html5/#the-img"><code>img</code> element in the HTML5 draft</a> on the <a href="http://lists.w3.org/Archives/Public/wai-xtech/">W3C's XTECH mailing list</a>. The argument is currently focused around what authoring tools should do when the author doesn't provide alt text.
</p>

<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#integrity">Integrity of the Data Structure</a></li>
	<li><a href="#authtool">Authoring Tool Quandary</a></li>
	<li><a href="#atresearch">Researching the Problem</a></li>
</ul>

<h2 id="integrity">Integrity of the Data Structure</h2>
<p>
When images are delivered without a text alternative, the image will not be perceivable by some users, such as blind screen reader users. Without a mandatory mechanism to provide a text alternative, the structure is incomplete, as it cannot be perceived by some users. The mechanism for providing alternative text in <abbr title="HyperText Markup Language">HTML</abbr> at the moment is through the <code>alt</code> attribute.
</p>
<p>
Al Gilman, Chair of the <a href="http://www.w3.org/WAI/PF/">Protocols and Formats Working Group</a>, pointed out that in general, <a href="http://lists.w3.org/Archives/Public/wai-xtech/2008Apr/0402.html">content intended for the end user should be in element form</a>, rather than specified in attributes. This is, of course, correct, as it's possible to structure data in elements so that the user has some control in how they interact with that content, whereas delivering the content in a text string has obvious limitations. But there are no plans to rework the structure of <abbr title="HyperText Markup Language">HTML</abbr> for a more robust mechanism of providing alternative text for images, so we're stuck with the current system of using an <code>alt</code> attribute, with a few edge-case where it is possible and desirable to use a labelling system instead of using the <code>alt</code> attribute. 
</p>
<p>
Whether we stick to the current system of using an <code>alt</code> attribute, or re-engineer <abbr title="HyperText Markup Language">HTML</abbr> so that it uses a more appropriate mechanism for providing alternative text, the one thing that is clear is that alternative text must be mandatory, or some people will not have access to information. The current thinking is that we should use an <code>alt</code> attribute for specifying alternative text in HTML5. At this point in time, the <code>alt</code> attribute is still not a required attribute in HTML5, meaning that the structure may not be perceivable to some users, yet the structure can be considered valid; surely, that is an oxymoron?
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="authtool">Authoring Tool Quandary</h2>
<p>
The argument put forward by most members of the HTML5 working group for making the <code>alt</code> attribute optional is for when an authoring tool doesn't have anything useful to use for the alternative text. The concern is that the authoring tool will populate the alt attribute with junk in order to conform to HTML5. This argument is fundamentally flawed for one simple reason: assuming the authoring tool allows authors to provide alternative text, it would be the author that has failed to conform &#8212; not the authoring tool.
</p>
<p>
When an authoring tool doesn't have anything useful to put in for the alt text, the tool shouldn't put anything in. A good authoring tool will check for missing alt text and offer to assist the user in repairing the content. If an author is adamant they're not going to provide alt text, there is no requirement that says the authoring tool should provide it in place of the author. In fact, it's just the opposite, as the authoring tool could not possibly know the author's intent. In this scenario, the authoring tool should not include the <code>alt</code> attribute at all, and the resulting markup should be considered invalid. It should be considered invalid because it is inaccessible, and not perceivable by some people. If the tool allows alt text to be provided, then the tool would be considered compliant (on this particular issue), even though the resulting markup would not be compliant, as the user chose not to make the content compliant.
</p>
<p>
It doesn't make sense to break the integrity requirements of the structure in order to cater for broken authoring tools or authors that don't care about accessibility. The only obvious benefit of making the <code>alt</code> attribute optional with the <code>img</code> element is that authoring tools that don't allow people to provide alt text, or authors that don't care about accessibility, will be conformant without having to do anything.
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="atresearch">Researching the Problem</h2>
<p>
Some members of the HTML5 working group suggest <a href="http://lists.w3.org/Archives/Public/wai-xtech/2008Apr/0399.html">researching the importance authoring tools place on conformance</a>, so that this argument can be settled rationally. The rationale being research the <em>real issue</em>, and then discuss whether or not the <code>alt</code> attribute should be mandatory or optional.
</p>
<p>
I'm all for research, but in this particular instance, the research is more misdirection and a delay tactic. Why is research needed? A compliant authoring tool already allows the user to provide alt text. Without research, we know that compliant authoring tools care about standards (or at least providing an <code>alt</code> attribute for the <code>img</code> element). We also know that if an authoring tool doesn't allow the author to provide alt text that they don't conform to any known standard at the moment. If these authoring tools don't conform to any standards now, where is the requirement for research? No one needs to contact the vendors of non-conforming authoring tools and ask them how important standards are to them, as the answer is obvious by the fact they make it impossible to adhere to <abbr title="HyperText Markup Language">HTML</abbr> 4.01, <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.x, <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>, and so on. It's painfully obvious that non-compliant authoring tools just don't care. There is no need for research on this particular issue, other than an excuse to indefinitely put the issue on hold.
</p>
<p>
I suspect the <em>real issue</em> is that some members of the HTML5 working group want authoring tools to conform to HTML5 so they can demonstrate how successful HTML5 is, or they have a vested interest in an authoring tool that doesn't conform to <abbr title="Web Contnt Accessibility Guidelines">WCAG</abbr> &#8212; not the other way around.
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>Safari Gets Support for ARIA</title>
		<link href="http://juicystudio.com/article/safari-support-aria.php" rel="alternate"/>
		<id>tag:juicystudio.com,2008-05-01:/safari-support-aria.php</id>
		<updated>2008-05-01T17:05:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/safari-support-aria.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
Safari starts to get support for <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym>.
</p>

<h2>WebKit Implements ARIA</h2>
<p>
WebKit, the open source application framework behind Safari and other browsers, announced that they have <a href="http://mail.gnome.org/archives/desktop-devel-list/2008-April/msg00225.html">started to add support for WAI-ARIA</a> on the Gnome mailing list yesterday. They have added global support for the <code>tabindex</code> attribute, and have added support for basic <acronym title="Accessible Rich Internet Applications">ARIA</acronym> roles.
</p>
<p>
This is great news, as all four of the major browsers, Firefox, Opera, IE8, and Safari now have support for <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym> to some extent.
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>WCAG 2.0 Becomes Candidate Recommendation</title>
		<link href="http://juicystudio.com/article/wcag2-candidate-recommendation.php" rel="alternate"/>
		<id>tag:juicystudio.com,2008-04-30:/wcag2-candidate-recommendation.php</id>
		<updated>2008-04-30T23:53:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/wcag2-candidate-recommendation.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
The Web Content Accessibility Guidelines (<abbr>WCAG</abbr>) 2.0 has progressed to a <abbr title="World Wide Web Consortium">W3C</abbr> candidate recommendation. The <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> Working Group are now looking for implementers from a cross-range of websites to help them determine whether or not organisations that have not worked closely with the development of <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> 2.0 can follow the guidelines.
</p>

<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#candrec">What is Candidate Recommendation</a></li>
	<li><a href="#impfeedback">Implementation Feedback</a></li>
	<li><a href="#thankeditors">Thank You to the Editors</a></li>
</ul>

<h2 id="candrec">What is Candidate Recommendation</h2>
<p>
<a href="http://www.w3.org/2005/10/Process-20051014/tr.html#RecsCR">Candidate recommendation</a> means that the <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> working group and public reviewers have reached broad consensus that <a href="http://www.w3.org/TR/2008/CR-WCAG20-20080430/">WCAG 2.0</a> satisfies the working group's technical requirements, and is ready to gather implementation experience. In order to do that, the working group must gather <a href="http://www.w3.org/WAI/WCAG20/CR/">feedback from independent implementations</a>.
</p>
<p>
In order to demonstrate that all the Success Criteria for a given conformance level can be satisfied within the same site, the <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> Working Group require at least two independent implementations of every success criterion in the guidelines. They also require at least another four websites that conform at level A, at least another four websites that conform at Level AA, and at least another two websites that conform at level AAA. Implementations should be from organisations that have not been working closely with <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> 2.0, and from a broad cross-section of websites (web applications, government websites, and so on). The working group are particularly interested in implementation details from websites that include <a href="http://www.w3.org/TR/2008/CR-WCAG20-20080430/#status_risk">items at risk</a>.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="impfeedback">Implementation Feedback</h2>
<p>
See the <a href="http://www.w3.org/WAI/WCAG20/CR/implementer_instructions">intrsuctions for implementors</a> if you intend to submit a website that conforms to <abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> 2.0 at any level. Once you have read the instructions, you should register your intent to submit an implementation through the <a href="http://www.w3.org/WAI/WCAG20/CR/implementation_information">implementation registration form</a> so that the working group can select a core set of implementations with maximum coverage of the criteria. Questions about the implementation can be sent to <a href="mailto:team-wcag2-implementations@w3.org">team-wcag2-implementations@w3.org</a>.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="thankeditors">Thank You to the Editors</h2>
<p>
<abbr title="Web Conent Accessibility Guidelines">WCAG</abbr> 2.0 has been the collaborative effort of many participants working under difficult circumstances. A special thank you should go to the current editors; Gregg Vanderheiden, Loretta Guarino Reid, Michael Cooper, and Ben Caldwell. A special thank you should also go to the previous editors; Wendy Chisholm, John Slatin, and Jason White.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>The John Slatin Fund</title>
		<link href="http://juicystudio.com/article/john-slatin-fund.php" rel="alternate"/>
		<id>tag:juicystudio.com,2008-04-03:/john-slatin-fund.php</id>
		<updated>2008-04-03T00:56:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/john-slatin-fund.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
The <a href="http://www.knowbility.org/business/john-slatin/">John Slatin Fund Accessibility Project</a> matches accessibility experts with companies wanting a brief accessibility audit of their websites. In return for the audit, site owners will contribute a minimum of $500 to help fund the medical expenses incurred by John's family during his long illness.
</p>

<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#jslatin">John Slatin</a></li>
	<li><a href="#accessproj">The Accessibility Project</a></li>
</ul>

<h2 id="jslatin">John Slatin</h2>
<p>
As most readers of this website will know, <a href="http://leukemialetters.blogspot.com/">John Slatin</a> passed away last week after a three-year battle with leukaemia. I've corresponded with John a few times over the years, but sadly, I have never met him. I came close, as I was invited to dinner with John, <a href="http://www.knowbility.org/about/?content=sRush">Sharron Rush</a>, and <a href="http://www.knowbility.org/conference/?content=jAllan">Jim Allan</a> by <a href="http://www.jimthatcher.com/">Jim Thatcher</a> at last year's CSun conference, but my flight was cancelled because of bad weather.
</p>
<p>
Despite having never met John, and only corresponding with him a few times, I regard him as a friend. He was patient, courteous, and a brilliant mentor. I learnt a lot from John in just a few email correspondences, for which I will always be grateful. I feel I've lost a friend, and if I feel this way after a few correspondences with John, I can't begin to imagine how painful it must be for John's family, and many close friends. My thoughts are with them.
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="accessproj">The Accessibility Project</h2>
<p>
The <a href="http://www.knowbility.org/business/john-slatin/">John Slatin Fund Accessibility Project</a> has been set up to help fund the medical expenses incurred by John's family during his long illness. The idea is that accessibility experts volunteer a few hours of their time to review websites for companies that contribute a minimum of $500 to the John Slatin fund. Not only does the project help John's family; it helps spread the word about accessibility.
</p>
<p>
As most visitors to this website have a keen interest in accessibility, I hope you're able to volunteer to this worthy project. If not, please consider signing up for an accessibility review.
</p>

<ul>
<li><a href="http://www.knowbility.org/business/john-slatin/volunteer.php">Volunteer as an accessibility expert</a></li>
<li><a href="http://www.knowbility.org/business/john-slatin/sign-up.php">Sign up for an accessibility review</a></li>
</ul>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>SXSW Core Conversation</title>
		<link href="http://juicystudio.com/article/sxsw-core-conversation.php" rel="alternate"/>
		<id>tag:juicystudio.com,2008-04-01:/sxsw-core-conversation.php</id>
		<updated>2008-04-01T10:53:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/sxsw-core-conversation.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
<a href="http://learningtheworld.eu/">Martin Kliehm</a> and I were both very pleased with our core conversation about <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym> at <abbr title="South by southwest">SXSW</abbr>. The idea behind core conversations is to formalise conversations that take place in the corridors. 
</p>

<h2>Core Conversation</h2>
<p>
We were very fortunate to have some very knowledgeable people participate, such as <a href="http://www-03.ibm.com/able/resources/ajaxaccessibility.html">Becky Gibson</a>, <a href="http://www.w3.org/People/Shawn/">Shawn Henry</a>, <a href="http://www.sas.com/">Lisa Pappas</a>, <a href="http://www.knowbility.org/about/?content=sRush">Sharron Rush</a>, <a href="http://niquimerret.com/">Niqui Merret</a>, <a href="http://blog.wienfluss.net/" hreflang="de">Michael Stenitzer</a>, <a href="http://www.accessify.com/">Ian Lloyd</a>, and many others (apologies for not mentioning everyone by name). Becky was one of the original architects that developed <acronym title="Accessible Rich Internet Applications">ARIA</acronym> at IBM before it was donated to the <abbr title="World Wide Web Consortium">W3C</abbr>. Since then, Becky has been working on incorporating <acronym title="Accessible Rich Internet Applications">ARIA</acronym> into the <a href="http://dojotoolkit.org/">Dojo javascript toolkit</a>. Sharron, Lisa, Becky and <a href="http://www.apodder.org/">Susan Gerhart</a> did a panel on Accessible Rich Media the day before, and Becky demonstrated an email client built with Dojo and the accessibility features afforded by <acronym title="Accessible Rich Internet Applications">ARIA</acronym>.
</p>
<p>
After Martin gave a brief overview of <acronym title="Accessible Rich Internet Applications">ARIA</acronym>, Becky started the conversation by outlining some of her experiences, which prompted lots of good questions. Nobody, apart from Becky, had actually implemented <acronym title="Accessible Rich Internet Applications">ARIA</acronym> in their projects, but we were encouraged that most of the participants were making plans to implement it.
</p>
<p>
All in all, we had a great time, and it was great to meet so many people with a passion for the web. This was my first time at <abbr title="South by southwest">SXSW</abbr>, but I hope I'm able to go again. Austin is an amazing city, and the whole festival has a great vibe. Unfortunately, I caught a cold at the end, which turned heavy and has only just started to clear.
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>ARIA Core Conversation</title>
		<link href="http://juicystudio.com/article/ariacoreconversation" rel="alternate"/>
		<id>tag:juicystudio.com,2008-03-02:/ariacoreconversation</id>
		<updated>2008-03-02T22:05:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/ariacoreconversation">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
<a href="http://learningtheworld.eu/">Martin Kliehm</a> and I will be holding a core conversation on <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym> at next week's SXSW called, <a href="http://2008.sxsw.com/interactive/programming/panels_schedule/?action=show&amp;id=IAP060400">Get Rich, Remain Accessible</a>. The conversation will take place at the <a href="http://www.austinconventioncenter.com/MainPage/index.htm">Austin Convention Center</a> on Sunday 9th March between 3:30 pm and 4:30 pm. What aspects of <acronym title="Accessible Rich Internet Applications">ARIA</acronym> would you like to talk to us about?
</p>

<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#popcontest">Popularity Contest</a></li>
	<li><a href="#coreconversation">Core Conversation</a></li>
</ul>

<h2 id="popcontest">Popularity Contest</h2>
<p>
The panels at this year's <abbr title="South by Southwest">SXSW</abbr> Interactive Conference and Festival were decided from the number of weighted votes using a panel picker. Martin and I submitted an <a href="/article/sxsw-get-rich-remain-accessible.php">idea for a panel</a>, but unfortunately, there wasn't enough interest for our panel idea to be selected. There was, however, enough interest for us to be invited to hold a core conversation. 
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="coreconversation">Core Conversation</h2>
<p>
This is the first year that core conversations have been held at <abbr title="South by Southwest">SXSW</abbr>, so we're after as much advice as we can get on how to prepare for it. The organisers suggest a format of a 5-7 minute introductory presentation that will hopefully stimulate conversation from the attendees. To that end, it would be great if we could have a good cross range of people at the core conversation - from people who have never heard of <acronym title="Accessible Rich Internet Applications">ARIA</acronym>, but want to ensure their work is as accessible as it can be, to people that are working on the specifications and early implementers. If you fall into any of these categories, we would really appreciate your help.
</p>
<p>
The organisers at <abbr title="South by Southwest">SXSW</abbr> also suggest that people holding a core conversation should gather a list of frequently asked questions. <acronym title="Web Accessibility Initiative">WAI</acronym> maintain a list of <a href="http://www.w3.org/WAI/aria/faq">Frequently Asked Questions on ARIA</a>, but I was wondering what you would be interested in asking or talking about. Even if you're not going to be at the core conversation, it would be great to hear the type of things you would like to talk about, or what questions you have about <acronym title="Accessible Rich Internet Applications">ARIA</acronym>. Hopefully, we'll see you there.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

			</div>
		</content>
	</entry>
	<entry>
		<title>The AxsJAX Framework for ARIA</title>
		<link href="http://juicystudio.com/article/axsjax-framework-aria.php" rel="alternate"/>
		<id>tag:juicystudio.com,2007-11-15:/axsjax-framework-aria.php</id>
		<updated>2007-11-15T21:18:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/axsjax-framework-aria.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
<a href="http://www.clcworld.net/">Charles L. Chen</a> and <a href="http://emacspeak.sourceforge.net/raman/">T. V Raman</a> announced an <a href="http://google-code-updates.blogspot.com/2007/11/introducing-axsjax-access-enabling-ajax.html">open source framework called AxsJAX</a>. The framework inserts <acronym title="Accessible Rich Internet Applications">ARIA</acronym> properties into web applications to make them accessible to assistive technologies. 
</p>
<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#axsjaxframework">The AxsJAX Framework</a></li>
	<li><a href="#ajaxaccess">Accessibility of AJAX</a></li>
	<li><a href="#injectaria">Injecting ARIA Properties</a></li>
	<li><a href="#usingframework">Using the AxsJAX Framework</a></li>
</ul>

<h2 id="axsjaxframework">The AxsJAX Framework</h2>
<p>
Charles L. Chen  and T. V Raman have developed a common JavaScript framework to enhance the accessibility of <acronym title="Asynchronous JavaScript and XML">AJAX</acronym>-based applications. The framework is called AxsJAX, pronounced, "Access JAX". Charles came up with the idea after adding <acronym title="Accessible Rich Internet Applications">ARIA</acronym> support for <a href="/article/wai-aria-live-regions.php">Live Regions</a> to <a href="http://www.google.com/reader/view/">Google Reader</a>, which already had very good keyboard support.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="ajaxaccess">Accessibility of AJAX</h2>
<p>
Broadly speaking, there are two problems with Web 2.0 applications:
</p>
<ul>
	<li>Role, state, and other properties that might visually be obvious are often not conveyed to assistive technologies.</li>
	<li>They often fail to provide feedback to users of assistive technology, leaving the user wondering what has happened.</li>
</ul>

<p>
Both of these problems are solved with the <abbr title="World Wide Web Consortium">W3C</abbr>'s <a href="http://www.w3.org/WAI/intro/aria">Web Accessibility Initiative - Accessible Rich Internet Applications</a> (<abbr>WAI-ARIA</abbr>). Feedback on what has happened is provide through WAI-ARIA's <a href="/article/wai-aria-live-regions.php">Live Regions</a>, which includes properties that determine the politeness of feedback, and exactly what is reported to the user. Both <acronym title="Job Access with Speech">JAWS</acronym> and Window-Eyes, the two most popular screen readers, are working on implementing live regions. <a href="http://firevox.clcworld.net/">Fire Vox</a>, the open source talking browser extension for Firefox, already supports live regions.
</p>
<p>
The AxsJAX framework works by automatically inserting <acronym title="Accessible Rich Internet Applications">ARIA</acronym> properties into the <acronym title="Document Object model">DOM</acronym>, based on design patterns. At the moment, the only Web 2.0 applications that support AxsJAX are <a href="http://www.google.com/reader/view/">Google Reader</a> and <a href="http://www.google.com/">Google Search</a>.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="injectaria">Injecting ARIA Properties</h2>
<p>
There are several ways that the AxsJAX framework can inject <acronym title="Accessible Rich Internet Applications">ARIA</acronym> properties into Web 2.0 applications. The cross-browser approach would be to use the <a href="http://google-axsjax.googlecode.com/svn/trunk/bookmarklet/bookmarklet.html">AxsJAX bookmarklet</a>. This approach means that the user needs to activate the bookmarklet each time they visit a page that supports the AxsJAX framework.
</p>
<p>
There is also a <a href="http://google-axsjax.googlecode.com/svn/trunk/googleScriptLoader.user.js">GreaseMonkey Mozilla/Firefox script</a>. GreaseMonkey scripts are executed automatically when a page is visited, which means that the <acronym title="Accessible Rich Internet Applications">ARIA</acronym> properties are inserted automatically when the page is loaded if the user is using the AxsJAX GreaseMonkey script.
</p>
<p>
Fire Vox will automatically inject <acronym title="Accessible Rich Internet Applications">ARIA</acronym> properties using the AxsJAX framework if the "Use site specific enhancements" option is enabled, regardless of bookmarklets and GreaseMonkey scripts. Charles and Raman are looking to the open source community for coming up with other innovative means of providing enhancements using the AxsJAX framework.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="usingframework">Using the AxsJAX Framework</h2>
<p>
To make use of the framework, you will need a user agent that supports <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym>, such as <a href="http://en.www.mozilla.com/en/firefox/">Firefox</a> 2.0 or later. You will also require an assistive technology that supports <acronym title="Web Accessibility Initiative">WAI</acronym>-<acronym title="Accessible Rich Internet Applications">ARIA</acronym>. If the assistive technology you are using has a virtual buffer, you will need to ensure that the virtual buffer is disabled - for example, using PC-Cursor mode in <acronym title="Job Access with Speech">JAWS</acronym>.
</p>
<p>
<a href="http://www.google.com/reader/view/">Google Reader</a> and <a href="http://www.google.com/">Google Search</a> have a set of keystrokes than enhance the experience for assistive technology and regular users alike. For example, <kbd>n</kbd> and <kbd>p</kbd> may be used to cycle forwards and backwards through the items in the result-set respectively. The AxsJAX framework ensures that the updates are reported correctly to assistive technologies that support <acronym title="Accessible Rich Internet Applications">ARIA</acronym>'s live regions.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>
			</div>
		</content>
	</entry>
	<entry>
		<title>Screen Readers and display: none</title>
		<link href="http://juicystudio.com/article/screen-readers-display-none.php" rel="alternate"/>
		<id>tag:juicystudio.com,2007-10-12:/screen-readers-display-none.php</id>
		<updated>2007-10-12T19:18:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/screen-readers-display-none.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
<a href="http://jimthatcher.com">Jim Thatcher</a> noticed some interesting behaviour whereby screen readers announced content in an anchor element that is hidden with <code>display: none</code>. Content hidden with <code>display: none</code> is not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings. 
</p>
<p>
Looking into it further, there are certain circumstances where content hidden with <code>display: none</code> is announced by JAWS and Window-Eyes. The circumstances are explained in this article, but it is always better to position content aimed at providing context for screen reader users off-screen, as content hidden with <code>display: none</code> should remain hidden.
</p>
<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#hidingcontent">Hiding Content with <code>display: none</code></a></li>
	<li><a href="#providecontext">Hiding Content that Provides Context</a></li>
	<li><a href="#jawsdisplaynone">JAWS and <code>display: none</code></a></li>
	<li><a href="#wedisplaynone">Window-Eyes and <code>display: none</code></a></li>
</ul>

<h2 id="hidingcontent">Hiding Content with <code>display: none</code></h2>
<p>
When an element is hidden with <code>display: none</code>, the browser doesn't generate a box for the element; the element is not visible on the screen, and the layout of the page isn't effected by the element. As screen readers are supposed to read the screen, it makes sense that they do not announce content that is hidden with <code>display: none</code>.
</p>
<p>
Becky Gibson noted a few years back that <a href="/article/invisible-form-prompts.php">labels for form controls hidden with <code>display: none</code> were announced by JAWS and Window-Eyes</a>. I had noticed recently that JAWS announces <code>span</code> elements hidden with <code>display: none</code> in anchor elements, but that the <code>span</code> was not announced by Window-Eyes. When I mentioned this to Jim, he sent me files that he was using; sure enough, the content was being announced in Window-Eyes, which was a mystery to both of us.
</p>
<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="providecontext">Hiding Content that Provides Context</h2>
<p>
There are situations where developers might want content to be hidden visually, but revealed to screen reader users. For example, a design might call for ambiguous link phrases, such as "More", where the context is visually evident, but might be lost to screen reader users. To get around this, a developer might do the following:
</p>

<h3>CSS</h3>
<pre><code>.context
{
    display: none;
}</code></pre>

<h3>Markup</h3>
<pre><code>&lt;a href="..."&gt;More&lt;span class="context"&gt; about XYZ&lt;/span&gt;&lt;/a&gt;
</code></pre>
<p>
The problem is that hiding the content with <code>display: none</code> also hides the content from screen readers (more about this later). To get around this, developers position the content off the screen, such as using the following technique:
</p>

<h3>CSS</h3>
<pre><code>.context
{
    position: absolute;
    left: -999em;
    width: 1em;
    overflow: hidden;
}</code></pre>

<p>
Using the same markup as above, the contextual information isn't displayed on the screen, but is announced to screen reader users.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="jawsdisplaynone">JAWS and <code>display: none</code></h2>
<p>
As stated earlier, JAWS announces content in a <code>span</code> element hidden with <code>display: none</code> if it is in an anchor element. This only works with a <code>span</code> element; other inline elements used in an anchor element, such as <code>em</code>, <code>strong</code>, <code>abbr</code>, <code>code</code>, and so on, are not announced in JAWS.
</p>
<p>
<a href="http://paciellogroup.com/">Steve Faulkner</a> ran some tests, and determined that this behaviour was introduced in JAWS version 7.1 and only for Internet Explorer.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="wedisplaynone">Window-Eyes and <code>display: none</code></h2>
<p>
The content of the span in the markup snippet below is announced in JAWS 7.1 and later with Internet Explorer, but it is not announced in Window-Eyes.
</p>

<h3>CSS</h3>
<pre><code>.context
{
    display: none;
}</code></pre>

<h3>Markup</h3>
<pre><code>&lt;a href="..."&gt;More&lt;span class="context"&gt; about XYZ&lt;/span&gt;&lt;/a&gt;
</code></pre>

<p>
Jim Thatcher had come across a couple of websites where content was hidden with <code>display: none</code>, but was being announced by Window-Eyes 5.5. Playing around with the <abbr title="Cascading Style Sheets">CSS</abbr> in Jim's examples, it turned out that the reason why content hidden with <code>display: none</code> was being announced in Window-Eyes was because an ancestor element had a <abbr title="Uniform Resource Locator">URL</abbr> set for the <code>background-image</code> CSS property. So if the CSS for the above example included the following rule-sets, the content hidden with <code>display: none</code> would also be announced in Window-Eyes.
</p>

<pre><code>a
{
    background: url(hidden.gif);
}

.context
{
    display: none;
}</code></pre>

<p>
I suspect that the reason why this works when the <abbr title="Cascading Style Sheets">CSS</abbr> <code>background-image</code> property has a value on an ancestor is to cater for inaccessible image replacement techniques, such as the <a href="http://www.stopdesign.com/articles/replace_text/">Fahrner Image Replacement technique</a> explained by Doug Bowman (but not recommended by Doug).
</p>

<p>
There are a couple of extra interesting points.
</p>
<ol>
<li>It doesn't matter whether the ancestor is the immediate parent, or whether the ancestor is much higher in the hierarchy &#8212; if a container has a value specified for the <code>background-image</code> property, content hidden with <code>display: none</code> will be announced in Window-Eyes.</li>
<li>If a value is specified for the <code>background-image</code> property on the <code>body</code> element, content hidden with <code>display: none</code> is not announced, unless there is another ancestor after the <code>body</code> element with the <code>background-image</code> property set.</li>
<li>Unlike JAWS, the element hidden with <code>display: none</code> does not have to be a <code>span</code> within an anchor element; it doesn't even have to be contained within an anchor element. Complete <code>div</code> elements or anything else will be announced in Window-Eyes if they're hidden with <code>display: none</code>, but have an ancestor that has a value specified for the <code>background-image</code> property.</li>
<li>If an anchor element itself is hidden with <code>display: none</code>, and has an ancestor with a value specified for the <code>background-image</code> property, it is visible to Window-Eyes, even though it isn't in the browser's natural tab order.</li>
</ol>

<p>
This is very strange behaviour, where points 3 and 4 can cause serious problems for Window-Eyes users. If content has been deliberately hidden from everyone, including screen reader users, Window-Eyes users will be exposed to that content if the <code>background-image</code> property has been set on an ancestor. I can understand JAWS' behaviour of announcing content that really shouldn't be announced when a <code>span</code> element is used within a link phrase, as they're just using heuristics to help their users. The Window-Eyes approach seems a little more reckless, although probably just as well-intentioned. The <code>background-image</code> property is used extensively, and far more popular than inaccessible image replacement techniques. Pages that deliberately hide content from everyone with <code>display: none</code> are broken in Window-Eyes if a value is provided for the <code>background-image</code> property.
</p>

<h3>Update - towards a solution</h3>
<p>
<a href="http://webaim.org/">Jared Smith</a> asked in the comments whether the <a href="#comment3">results are any different if both <code>display: none</code> and <code>visibility: hidden</code> are used</a>.
</p>

<p>
JAWS behaves exactly the same when a <code>span</code> element is hidden with <code>visibility: hidden</code> in an anchor element as it does with a <code>span</code> element hidden with <code>display: none</code>.
</p>
<p>
Window-Eyes doesn't do the same thing if <code>visibility: hidden</code> is used. Content hidden with <code>visibility: hidden</code> is not announced in Window-Eyes, even when an ancestor has a value specified for the <code>background-image</code> property. On its own, <code>visibility: hidden</code> might not be desirable, as it generates a box that effects the layout. Fortunately, using <code>visibility: hidden</code> also works with <code>display: none</code>, which doesn't generate a box, and therefore has no effect on the layout. So issues introduced by Window-Eyes' strange behaviour can be avoided using the two properties together:
</p>
<pre><code>.hide
{
    display: none;
    visibility: hidden;
}</code></pre>

<p>
Thanks to Jared for coming up with a solution to the problem.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>
			</div>
		</content>
	</entry>
	<entry>
		<title>WAI-ARIA in HTML</title>
		<link href="http://juicystudio.com/article/wai-aria-in-html.php" rel="alternate"/>
		<id>tag:juicystudio.com,2007-09-02:/wai-aria-in-html.php</id>
		<updated>2007-09-02T01:43:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/wai-aria-in-html.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<h3>Update</h3>
<p>
Please note: this article is now out of date. See the following for more details.
</p>
<ul>
    <li><a href="http://developer.mozilla.org/en/docs/ARIA:_Accessible_Rich_Internet_Applications/Relationship_to_HTML_FAQ#Does_ARIA_require_the_use_of_namespaces.2C_which_are_not_available_in_text.2Fhtml.3F">Does ARIA require the use of namespaces, which are not available in text/html?</a></li>
    <li><a href="http://simon.html5.org/specs/aria-proposal">ARIA Proposal</a></li>
</ul>
<p>
The Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA) roadmap includes a plan for developing the roles and states necessary to make rich internet applications accessible. The accessible properties are added using the namespacing capabilities of user agents that support <abbr title="Extensible HyperText Markup Language">XHTML</abbr> delivered as <code>application/xhtml+xml</code>. As Internet Explorer doesn't support this <acronym title="Multipurpose Internet Mail Extensions">MIME</acronym> type, it cannot make use of namespacing in the markup. To make up for this, <abbr title="Web Accessibility Initiative">WAI</abbr>'s protocols and formats working group have a document outlining how to add <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and states to <abbr title="HyperText Markup Language">HTML</abbr> content delivered as <code>text/html</code>.
</p>
<p>
The technique essentially serialises the role and state information in the <code>class</code> attribute. <abbr title="HyperText Markup Language">HTML</abbr> user agents don't parse namespace information, but as the <acronym title="Document Object Model">DOM</acronym> <abbr title="application programming interface">API</abbr> supports namespaces, the role and state information can be inserted with the namespace directly in the <acronym title="Document Object Model">DOM</acronym> so that <abbr title="HyperText Markup Language">HTML</abbr> documents delivered as <code>text/html</code> can use <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and states. The protocols and formats working group provide an ECMAScript library to insert the information specified in the <code>class</code> atttibute into the <acronym title="Document Object Model">DOM</acronym>. 
</p>
<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#docsemantics">Document Semantics</a></li>
	<li><a href="#classappr">A Touch of Class</a></li>
	<li><a href="#namesphtml">Using Namespaced Attributes in HTML</a></li>
	<li><a href="#classvalues">Specifying the <code>class</code> Values</a></li>
	<li><a href="#multipleroles">Multiple Roles</a></li>
	<li><a href="#progenhance">Progressive Enhancement</a></li>
	<li><a href="#waiariasupport">WAI-ARIA Support</a></li>
</ul>

<h2 id="docsemantics">Document Semantics</h2>
<p>
The problem with developing rich internet applications in <abbr title="HyperText Markup Language">HTML</abbr> for the web is that <abbr title="HyperText Markup Language">HTML</abbr> (and <abbr title="Extensible HyperText Markup Language">XHTML</abbr> 1.x) only has a small set of semantic elements. Assistive technologies communicate information to the user based on document semantics. When developers create custom controls, accessibility problems can be introduced if the controls do not have the correct semantics to inform assistive technology what the control is and what values it has.
</p>
<p>
<abbr title="Web Accessibility Initiative">WAI</abbr>'s Accessible Rich Internet Applications (<abbr>WAI-ARIA</abbr>) roadmap includes a plan for developing the <a href="http://www.w3.org/TR/aria-role/">roles</a>, and <a href="http://www.w3.org/TR/aria-state/">states and properties</a> necessary to make <abbr title="Rich Internet Applications">RIA</abbr>s accessible. <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> does this using the namespace capabilities of <abbr title="Extensible HyperText Markup Language">XHTML</abbr>, which isn't supported in <abbr title="HyperText Markup Language">HTML</abbr>. Also, <abbr title="Extensible HyperText Markup Language">XHTML</abbr> documents must be served as <code>application/xhtml+xml</code> in order to use <abbr title="Extensible HyperText Markup Language">XHTML</abbr>'s namespace capabilities; if <abbr title="Extensible HyperText Markup Language">XHTML</abbr> documents are delivered as <code>text/html</code>, the user agent will treat it as <abbr title="HyperText Markup Language">HTML</abbr>, and the namespace information will be lost. This means that user agents that don't understand content delivered as <code>application/xhtml+xml</code>, such as Internet Explorer, can't make use of the roles and states defined in the <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> roadmap.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="classappr">A Touch of Class</h2>
<p>
A note on <abbr title="Web Accessibility Initiative">WAI</abbr>'s protocols and formats website explains an approach for <a href="http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20061212.html">embedding accessibility role and state metadata in HTML documents</a> (editor's draft). The technique allows content to be served as <code>text/html</code>, which means <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> role and state information can be provided for user agents that can't handle content delivered as <code>application/xhtml+xml</code>.
</p>

<p>
The technique works by specifying role and state information in the <code>class</code> attribute, as the <code>class</code> attribute applies to all elements in the strict doctype, except the <code>base</code>, <code>head</code>, <code>html</code>, <code>meta</code>, <code>param</code>, <code>script</code>, <code>style</code>, and <code>title</code> elements. An ECMAScript library, <a href="http://www.mozilla.org/access/dhtml/class/enable.js">enable.js</a>, can then used to insert the accessibility information in the appropriate role and state namespaces.
</p>


<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="namesphtml">Using Namespaced Attributes in HTML</h2>
<p>
User agents that parse <abbr title="HyperText Markup Language">HTML</abbr> don't parse namespace information, but the namespace information can be inserted into the <acronym title="Document Object Model">DOM</acronym>, as the <acronym title="Document Object Model">DOM</acronym> <abbr title="application programming interface">API</abbr> does support namespaces. <abbr title="Extensible HyperText Markup Language">XHTML</abbr> served as application/xhtml+xml, can use namespace aware methods from the <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/">Document Object Model (DOM) Level 2 Core Specification</a>, such as <code>setAttributeNS</code>. Some browsers don't support the namespace methods, and must instead use the methods from <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/">Document Object Model (DOM) Level 1 Specification</a>, such as <code>setAttribute</code>, which isn't namespace aware. When using the non-namespace aware methods, the namespace value must be prefixed to the attribute name. So developers could do something like the following to use namespace <acronym title="Document Object Model">DOM</acronym> methods when they are supported, or use the HTML hack to prefix the namespace value to the attribute name:
</p>

<pre><code>if (typeof document.documentElement.setAttributeNS != 'undefined')
{
  oElm.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow', 3);
}
else
{
  oElm.setAttribute('aaa:valuenow', 3);
}</code></pre>

<p>
Fortunately, the logic is taken care of in <a href="http://www.mozilla.org/access/dhtml/class/enable.js">enable.js</a> &#8212; all the developer has to do is specify the role and state information in the <code>class</code> attribute, and call the <code>initApp</code> method when the page is loaded, and the <code>initContent</code> method if rich content is added after the <code>initApp</code> method has executed.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="classvalues">Specifying the <code>class</code> Values</h2>
<p>
The <code>class</code> attribute accepts a space separated list of class names. To specify role and state information in the <code>class</code> attribute, a class name of <code>axs</code> is used &#8212; the values that follow the class name <code>axs</code> are the role and states for the control. This means that a class name of <code>axs</code> should be avoided for general styling by developers using this technique to add <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> accessibility information, as it has a specific meaning in the ECMAScript library. The first class name following the class name <code>axs</code> is the role; the rest of the class names are the state information. This means that developers must ensure that all classes used as hooks for <abbr title="Cascading Style Sheets">CSS</abbr> selectors, or other programmatic hooks, are placed before the <code>axs</code> class name.
</p>
<p>
The state information is a key/value pair, separated by a hyphen. The following example shows how the <code>class</code> attribute might be used to set <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> role and state information for a slider control:
</p>

<pre><code>&lt;input type="image"
       src="thumb.gif"
       alt="Effectiveness"
       id="thumb"
       title="Effectiveness, between 0 and 500"
       <strong>class="axs slider valuemin-0 valuemax-500 valuenow-3</strong>"&gt;</code></pre>

<p>
For states that accept a value of <code>true</code>, the value can be omitted if the state is <code>true</code>, as this is the default value for these states. For example, the following two classes have equivalent values:
</p>

<pre><code>class="axs checkbox checked-true"


class="axs checkbox checked"</code></pre>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="multipleroles">Multiple Roles</h2>
<p>
As the first value specified as a class name following the <code>axs</code> class name is the role, and the rest of the class names describe the state, this means that only one role can be specified using this technique. Using <abbr title="Extensible HyperText Markup Language">XHTML</abbr> namespaces, more than one role may be specified. <a href="http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20061212.html">Embedding accessibility role and state metadata in HTML documents</a> states that whilst it is common for there to be more than one state, it's very rare to require more than one role. If more than one role is required, it would be possible by reworking <a href="http://www.mozilla.org/access/dhtml/class/enable.js">enable.js</a> so that the roles were specified with a separator, such as a colon:
</p>

<pre><code>class="axs table:tree ..."</code></pre>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="progenhance">Progressive Enhancement</h2>
<p>
<a href="http://www.mozilla.org/access/dhtml/class/enable.js">enable.js</a> is a clever solution for creating rich internet applications, but I prefer to use content negotiation and progressive enhancement. For example, instead of starting off trying to define a slider control in markup, start with an element that is semantically as close to the control you're trying to make richer; in this case, a drop-down list: Use <a href="http://juicystudio.com/article/content-negotiation.php">content negotiation</a> to determine if the user agent can handle content delivered as <code>application/xhtml+xml</code>: If the user has a script enabled browser, use progressive enhancement to update the drop-down list to a slider control, and use the same keystrokes required to interact with the slider that the drop-down list would use. See the <a href="http://juicystudio.com/experiments/slider/index.php">slider control</a> for an example of how this is done in practice.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="waiariasupport">WAI-ARIA Support</h2>
<p>
At this time, the only user agent that supports <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr> is Firefox (1.5 and higher). Assistive technology, such as JAWS and Window-Eyes, are able to communicate role and state information specified with ARIA, and the situation will get better as more work is put into the specification, and other user agent start to support ARIA. Charles Chen's excellent <a href="http://www.firevox.clcworld.net/">Fire Vox plugin</a> has added support for ARIA, and <a href="http://my.opera.com/desktopteam/blog/2007/08/31/focus-areas-during-kestrel-development">Opera are also working on adding support for ARIA</a>. Hopefully, Internet Explorer, Safari, and other user agents also have WAI-ARIA on their radars.
</p>
<p>
The <a href="http://juicystudio.com/experiments/slider/index.php">slider control</a> works as expected in Internet Explorer with JAWS and Window-Eyes because the custom control has an explicit label, and the role is exposed through the <code>alt</code> attribute of the <code>input</code> element.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>
			</div>
		</content>
	</entry>
	<entry>
		<title>The HTML 5 Image Element</title>
		<link href="http://juicystudio.com/article/html5-image-element-no-alt.php" rel="alternate"/>
		<id>tag:juicystudio.com,2007-08-29:/html5-image-element-no-alt.php</id>
		<updated>2007-08-29T17:38:00Z</updated>
		<content type="xhtml" xml:lang="en-gb" xml:base="http://juicystudio.com/article/html5-image-element-no-alt.php">
			<div xmlns="http://www.w3.org/1999/xhtml">
<p>
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#the-img">The <code>img</code> element in the current HTML 5 draft</a> doesn't include the <code>longdesc</code> attribute, and the <code>alt</code> attribute will no longer be a required attribute.
</p>

<h2 id="toc">Contents</h2>
<ul>
	<li><a href="#longdesc">The <code>longdesc</code> Attribute</a></li>
	<li><a href="#altattribute">The <code>alt</code> Attribute</a></li>
	<li><a href="#further">Further Reading</a></li>
	<li><a href="#translations">Translations</a></li>
</ul>

<h2 id="longdesc">The <code>longdesc</code> Attribute</h2>
<p>
One of the great things about the current HTML 5 draft is that they give plenty of examples of how to specify alternate text for images, although a few of them are misguided. Alternate text should be concise, and a longer description provided with a <code>longdesc</code> attribute if necessary. The incomplete techniques document for the current <abbr title="Web content Accessibility Guidelines">WCAG</abbr> 2.0 draft contains the following <a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#H37">advice for specifying alternate text on images</a>:
</p>
<blockquote cite="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#H37">
<p>
When using the <code>img</code> element, specify a short text alternative with the <code>alt</code> attribute. Note. The value of this attribute is referred to as "alt text".
</p>
<p>
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image. If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a <code>longdesc</code> should be provided as well with the complete text.
</p>
</blockquote>
<p>
As the current specification for the <code>img</code> element in HTML 5 doesn't include a <code>longdesc</code> attribute, the alternate text in their very first example is too verbose at 43 words (216 characters). The example would be better if the image was described more succinctly, and the extra information included in the main body text; if text in the main body is undesirable, because it's duplicating the content in the image, for example, then a better technique would be to specify a <abbr title="Uniform Resource Identifier">URI</abbr> to a longer description using the <code>longdesc</code> attribute. If the final HTML 5 specification doesn't include a <code>longdesc</code> attribute, then authors of accessible material will have to resort to the infamous <a href="http://www.w3.org/TR/WCAG10-HTML-TECHS/#img-dlink-invis">D-link</a>, deprecated in <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 1.0 techniques in favour of the <code>longdesc</code> attribute.
</p>
<p>
As the <code>longdesc</code> attribute's value is a <abbr title="Uniform Resource Identifier">URI</abbr>, the resulting page containing the longer description can be marked up with rich structural elements (lists, tables, and so on) to aid understanding, which isn't possible with plain text in an image's <code>alt</code> attribute. The <code>longdesc</code> attribute is useful for creating accessible content without having to resort to D-links, which can detract from the design of a page.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="altattribute">The <code>alt</code> Attribute</h2>
<p>
Another contentious issue with the current HTML 5 draft is that the <code>alt</code> attribute for an image may be omitted completely. The reasoning is along the lines that there are examples of applications where users don't know how to provide alternate text, such as Flickr, and it has been observed that systems make up for this by generating alternate text from the image's meta data. The perceived benefit of not providing alternate text supposedly makes it easier to distinguish between images that have no alternate text, or are part of the critical content. From an article by Lachlan Hunt about <a href="http://blog.whatwg.org/omit-alt">why the alt attribute may be omitted</a>:
</p>

<blockquote cite="http://blog.whatwg.org/omit-alt">
<p>
The benefit of requiring the <code>alt</code> attribute to be omitted, rather than simply requiring the empty value, is that it makes a clear distinction between an image that has no alternate text (such as an iconic or graphical representation of the surrounding text) and an image that is a critical part of the content, but for which not [sic] alt text is available.
</p>
</blockquote>

<p>
I don't understand how a user agent is supposed to differentiate between an image with deliberately missing alternate text, or alternate text that is missing because the author didn't know how to specify alternate text. We all agree that alternate text is essential for accessibility; it's not accidental that the very first requirement from any set of accessibility guidelines is that alternate text is provided for non-text objects.
</p>

<p>
Providing blank alternate text is something that must be done deliberately, and helps user agents determine whether or not the <a href="http://www.w3.org/TR/UAAG10/guidelines.html#tech-missing-alt">alternate text is in need of repair</a>, as opposed to just omitting the attribute; of course, there will be scenarios whereby assistive technology will rely on heuristics when alternate text is missing, regardless of the markup - for example, when an image alone is used as the link phrase in an anchor element or part of an image map and empty alternate text is provided. In this case, assistive technology has to present something to the user so that they know what the link is, so will attempt to get the information elsewhere; such as from the title attribute, or in extreme cases, from the <code>src</code> attribute of the image. At least specifying null text for the <code>alt</code> attribute is a definite decision on the part of the author, and not the ambiguous situation of not knowing whether the alternate text was accidentally or intentionally omitted. 
</p>

<p>
Alternate text contains important information about an image that must be included in the structure, even if that information is blank because the image is purely decorative. It is better that purely decorative images are not included in the structure in the first place, but included with CSS. However, there should also be a markup solution to indicate whether or not the alternate text of an image is critical to understand the content - omitting such an important attribute is ambiguous, and doesn't help anyone. Systems that generate poor quality alternate text need fixing, and <strong>all</strong> authors should be encouraged to provide high quality alternate text.
</p>

<p class="skiplink">
[<a href="#toc">Back to the contents</a>]
</p>

<h2 id="further">Further Reading</h2>
<ul>
	<li><a href="http://blog.whatwg.org/omit-alt">Why the Alt Attribute May Be Omitted</a></li>
	<li><a href="http://www.paciellogroup.com/resources/articles/altinhtml5.html">Investigating the proposed alt attribute recommendations in HTML 5</a></li>
</ul>

<h2 id="translations">Translations</h2>
<ul>
	<li><a href="http://www.webaccessibile.org/argomenti/argomento.asp?cat=681" hreflang="it">Italian Translation, thanks to Roberto Castaldo</a></li>
</ul>

			</div>
		</content>
	</entry>
</feed>
