I’m trying to make it to the Refresh06 Conference in Orlando, Florida this fall. Looks like a good one. Topics include web standards and web accessibility. Speakers include Andy Budd, Cameron Moll, and Paul Boag. November 16th – 18th, 2006; $349 per person.
Presenting, for Opera users, the Web Accessibility Toolbar for Opera. The teams from Web Accessibility Tools Consortium, Vision Australia and The Paciello Group have developed for the Opera browser the useful toolbar that they built for Windows IE.
WCAG Guidelines 9.4 (Priority 3) says to create a logical tab order through links, form controls, and objects. The “tabindex” attribute is great because it does exactly that — it specifies the position of the current element in the tabbing order for the current document. But are they needed?
Download Web Axe Episode 24 (Tab Index — Why)
The basic code:
Links:
- WCAG Guidelines 9.4 (Priority 3)
- WCAG Techniques for logical tab order
- WCAG definition of “tabindex”
- WebAIM – Drawbacks to “tabindex”
- WCAG 2.0 – What You Can Do Right Now – great article on keeping pace with the new version of the Web Content Accessibility Guidelines (2.0 is soon to release by the W3C)
- The One-Click Accessibility Self-Test – neat inline accessibility checker tool
- GrayBit – visually convert a web page into grayscale for the purpose of visually testing the page’s perceived contrast
The issue is that a lot of web sites use graphical images for headings. But images don’t use heading tags (H1, H2, etc.) which create the semantic code we all want, which are ideal for screenreaders, SEO, etc.
So the “image replacement” technique uses valid code and CSS to display header images within a heading tag. The challenge is to solve the screen reader problem, and it must also address the “images off, CSS on” problem (ponder that one!), and to reduce the need for empty elements (like SPAN, DIV, etc.).
Download Web Axe Episode 23 (Accessible Headers with Graphics)
Links:
- Revised Image Replacement (Mezzblue)
- Graphics used as headers (WebAIM)
Sample Code:
CheckEngine USA
Sample CSS:
#header {
position: relative;
width: 750px;
height: 100px;
margin:0;
padding:0;
overflow: hidden;
}
#header span {
position: absolute;
background-image: url(../images/headerback.jpg);
background-repeat: no-repeat;
width: 750px;
height: 100px;
margin:0;
padding:0;
overflow: hidden;
}