5 basic rules to better accessibility in web design.

I’m kind of a podcast fiend.  So, as a web designer, it should be no surprise that I listen to the Boagworld podcast.  Recently, Paul and Marcus highlighted 5 key tips to designing accessible websites.  Here they are in my words.

  1. Utilize alt tags on images.
    The only way a screen reader (a device used to aid sight impaired internet users) will “see” your image is to describe exactly what the image is in words.  **Savvy designers will realize added benefit here, as search engines will pick up keywords in the alt tags.  Just make sure your alt tag copy is descriptive of the image, not loaded with keyword phrases that won’t aid the sight impaired.
  2. Utilize title tags on links.
    Imagine a web page being read aloud to you.  Now imagine the person reading the page to you encounters a link.  Instead of telling you where clicking that link will take you, they begin to read out the destination URL.  Yikes.  With a proper title tag, you can tell your sight impaired users exactly what clicking the link does.  ie “click here to login”, or “click to visit my portfolio.”
  3. Make sure you have fallback content for rich media.
    Most of us including rich media content will use Flash to do so.  If so, provide content that will be seen if the video or Flash cannot be loaded.  Usually, this can be taken care of with the SWFObject implementation method.  Don’t leave a hole where the media would be, fill it with a backup image or copy.  **Here’s another plus for you cheeky designers.  Google spiders will see the backup content, not the Flash, so make sure the backup is accurately depicts the subject and keywords of the Flash element.
  4. Don’t rely on JavaScript to reveal content.
    Although few, some users will have JavaScript either disabled or not available.  Search engines are also unlikely to be able to uncover areas that have been hidden by CSS and revealed by JS.  With JS disabled, ensure that all of your content is visible.  Then, enable JS and use it to hide areas, rather than defaulting areas to hidden with CSS.
  5. Allow fonts to be scaled.
    We designers hate this one.  A good accessibilty trait is achieved if a user can enlarge or decrease font sizes when viewing your site without breaking your layout or losing content.  Don’t specify font sizes in pixel heights in your CSS.  Yes, enalrging the font will make your perfect design look nasty, and yes, at some point size your layout will fall apart.  My rule of thumb is is to design in a generous ability to increase the font size and retain usability, but I am not concerned as much about the extremely large font sizes (let say, over 50pt)

Popularity: 60% [?]

June 19th, 2008


One Response to “5 basic rules to better accessibility in web design.”

  1. Joey Yax Says:
    June 20th, 2008 at 11:03 am

    Great post Dayn!

    Couple things worth adding…

    Structure: Use Header tags (h1, h2, etc…) and use them in the right order. H1 is used for the primary header on the page and should only be used once as the title of the page. H2 is used for sub-categories, followed by h3 and so on… Other tags can be used repeatedly, but use them in order of relevance.

    Clean Code: Order your sections properly. Header, Navigation, Content, Footer. Then style accordingly with CSS. Unless you want a screen reader to read what in your sidebar first, then you need to have the primary content for the page BEFORE the sidebar content. It doesn’t matter if visually you want the sidebar on the left. It should still come after the primary content, then styled (floated) with CSS to where you want it.

    Accessibility marks and “jump to” links: Provide hidden markers and links for screen readers. Label your navigation, label your content area, label your sidebar and assign them ids. These don’t have to be visible in the visual layout but makes it worlds easier for the screen readers to visualize where they are on the page.

    Re the “jump to” link: at the top of the page provide a few links (again only visible when stylesheet is turned off) that will allow a user to “jump” to navigation, content area, sidebar, etc… on the page.

    Hope those help (or at least make sense)

    Lastly, here’s another good blog post re: SEO for designers that I think would make for a good extended read of this one:
    http://justcreativedesign.com/2008/06/09/10-seo-rules-for-designers/

    (that got long. Sorry. This list could almost go on forever.)

Leave a Comment