- 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
Month: July 2006
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;
}
Here’s a podcast I came across titled “Accessible Business Online” by Alexandra Graham. Some good basic content here. Just as good, it references a transcription service, CastingWords.com, that I may try for Web Axe.
[Editor’s note: see more recent article by Dennis, When and How to Visually Hide Content]
There are certain instances when a label or header should be used, but wouldn’t necessarily need to be seen in the layout, such as a label for a phone number and a header for a menu. Dennis discusses when and how this would be done.
Download Web Axe Episode 22 (Hiding Labels and Sub-Headers)
The CSS:
.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
The XHTML:
Links:
- Invisible Content Just for Screen Reader Users (WebAIM)
- Creating Invisible labels for form elements (WCAG 2.0)
- Advanced accessibility techniques – Hidden Text (WebCredible)
The UK and other countries in and outside of Europe are making progress towards more web accessibility. Most recently, the 25 European Commission member states and nine accession countries announced a plan that could make accessibility in e-procurement mandatory. Hoorah! Let’s hope it goes into action, and the U.S. takes similar action sometime soon.