Category: web

Categories
lists menu podcast web

Lists and Accessibility — How and Why?

Lists are a perfect example of good semantic code for accessibility. Dennis and guest host Ross Johnson from 3point7designs talk about the types of lists, the benefits of using them, and the ways they can be used. Also listen for a couple announcements about future shows.

Download Web Axe Episode 26 (Lists and Accessibility — How and Why?)

[Transcript of Web Axe 26]

Here’s sample code for a horizonal menu using list items:

#menu {
width: 100%;
background: #eee;
color: inherit;
padding-top:0;
border: 1px solid #666;
overflow: hidden;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
margin: 0;
padding: 0;
float: left;
}
#menu a {
display: block;
padding: 10px;
font-weight: bold;
text-decoration: none;
border-right: 1px solid #888;
}
#menu a:hover, #menu a:focus {
background-color:#ccc;
}

Categories
attribute podcast tab web

Tab Index – why and why not

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)

[Transcript]

The basic code:


Links:

Categories
heading podcast semantic seo web

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

Categories
basic podcast web

Accessible Business Online (external podcast)

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.

Categories
header heading label podcast web

Hiding Labels and Sub-Headers

[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)

[Transcript]

The CSS:

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

The XHTML:

Phone number:
(


)


-

Links: