Category: semantic

Podcast #37: Code Considerations for Web Accessibility

Dennis and Ross discuss various techniques on coding for web accessibility (in follow up to Podcast #34: Design Considerations for Web Accessibility). Topics include:

Download Web Axe Episode 37 (Code Considerations for Accessibility)

News

Links

Accessible Headers with Graphics

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:

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

Text, text, text!

Topics include proper use of HTML tags, such as headings, quotes, lists, and some lesser-known tags, such as and

.

Download Web Axe Episode 12

Links:

Code:


My Web Page


not

My Web Page

I really like tacos.


not

I really like tacos.

As Harry S. Truman said, The buck stops here.