Category: code

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

Podcast #34: Design Considerations for Accessibility

Considerations for designing an accessible web site, including discussion on web site conventions, navigation, color, text, and layout.

Download Web Axe Episode 34 (Design Considerations for Accessibility)

[Transcript for Web Axe 34]

Stick to Conventions

  • Search upper right
  • Global navigation across top
  • Sub navigation on sides
  • Icons

Navigation Considerations

  • Skip navigation
  • Indicate visited pages, current page
  • Use breadcrumbs where possible

Color Considerations

  • Ensure enough color contrast
  • Light on dark, or dark on light?
  • If you change the color of an anchor state, change them all
  • Never use color to convey information

Layout Considerations

  • If you have a low vision/large text style sheet, convert layout to one column
  • Pay attention to if it is obvious you can scroll downward or not
  • If Article is broken up between several pages, provide a link to a single page with the whole article for easy printing
  • Try and design for 760px minimum width

Text Considerations

  • Sans-serif fonts are generally easier to read on a screen
    • Print serif fonts are, but light reflects off of paper where screen illuminates light
  • Text Sizing
    • Ensure font can be enlarged with out breaking the design
    • Headers should be larger than regular text (to indicate more importance)
    • Fonts should be decent size, not everyone knows how to resize text

Other Considerations

  • Limit the use of Flash
  • Print Style Sheets
  • Graphical buttons should be text with graphical backgrounds (for sizing without pixelation)
  • Include an access guide, or site help
  • No flickering
  • Audio–plan for text-only version and links
  • Video–plan for real-time captioning

Unobtrusive Javacript (and the DOM)

Ah, Javascript. The wonderful scripting language that creates lots of cool stuff on your web page. But how do you make it Accessible?

Download Web Axe Episode 11

Links:

This is an example of a javascript “listener” which opens a link in a new window (using a function) if the rel in the a tag is “external”.

window.onload=function(){
setOnClick();
}

function setOnClick() {
if(!document.getElementsByTagName) {
return;
}
var anchors = document.getElementsByTagName("a");
for (var i=anchors.length; i !=0; i--) {
var a=anchors[i-1];
if (a.rel.indexOf("external") != -1) {
a.onclick = function(){newWin(this.href,'popup1',700,400);
return false;}
}
}