Current Posts

WCAG 2.0 and Accessibility Testers

Monday, July 31, 2006

0 comments

Accessible Headers with Graphics

Monday, July 24, 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)

[Transcript]

Links:

Sample Code:
<div id="header">
<h1><span></span>CheckEngine USA</h1>
</div>

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;
}

Labels: , , , , ,

0 comments

New Email Address for WebAxe

WebAxe has a new email address: web axe at gmail dot com
Feel free to send a message to the host, Dennis.

0 comments

Accessible Business Online (external podcast)

Wednesday, July 19, 2006

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.

Labels: , , ,

0 comments

Hiding Labels and Sub-Headers

Thursday, July 13, 2006

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)

[Transcript]

The CSS:

.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}


The XHTML:

<form method="post" action="">
<div>Phone number:
(
<label for="area" class="hidden">Area code</label>
<input name="area" type="text" size="3" maxlength="3" id="area">
)
<label for="first" class="hidden">first 3 digits</label>
<input name="first" type="text" size="3" maxlength="3" id="first">
-
<label for="last" class="hidden">last 4 digits</label>
<input name="last" type="text" size="4" maxlength="4" id="last">
</div>
<div>
<input type="submit" name="Submit" value="Submit">
</div>
</form>

Links:

Labels: , , , , ,

2 comments

Partner Links

web design | create a website | Website Templates | UK Web Hosting | Search Engine Optimization | search engine optimisation | web hosting | Cheap Domain Names

RSS icon; follow the RSS feed for Web Axe Twitter icon; follow Web Axe on Twitter

Like Web Axe?

Podcast Alley

Odeo

Mapper on Frappr

Add yourself to the Web Accessibility Enthusiasts mapper

Previous Posts

Related Sites

About the Hosts

About Dennis

Dennis Lembree is the founder of web development company Web Overhauls, which specializes in web usability, standards, and accessibility. Follow Dennis on Twitter: @dennisl

About Ross

Ross Johnson runs a web design company (3.7 Designs) that takes a wholistic view on the web and art of constructing pages. They strive to be creative and unique. Follow Ross on Twitter: @3pointross

 

Partner Links

Best web hosts

website design

Register Domain Name

Data Centre