Accessibility: On a shoe-string

Checking for common accessibility issues on a shoe-string

Translated into Turkish by Mehmet Dogan.

Testing a site design to ensure the widest practical audience should be an essential part of the design process on every web site. Of course in an ideal world, every web site developed would be tested both for usability and accessibility using real people. But in many situations, particularly on smaller projects, such testing is often beyond the client’s budget and the profitable scope of the job. While purists may argue that accessibility must take priority over all other concerns and that a site can only be called accessible if tested on real people , I believe that any attention to accessibility is better than none at all. Experience, a knowledge of the WAI guidelines and the appropriate use of tools can easily create sites which can be called effectively accessible.

There are now many tools available to assist designers in creating sites which are more accessible. Here are a few which form part of the base-level testing routine which we implemented at Stuff and Nonsense and some of the reasons why we do what we do.

Firefox Web Developer toolbar

Chris Pederick, the developer behind the Firefox Web Developer toolbar, should be given a medal. His is a work of pure genius.

Disable

Accessibility is often about alternatives; text alternatives for when images are removed, no-script alternatives for when scripting is unavailable. The disable feature contains some of the most often used tools in our review process and disables a range of elements for us to judge where alternatives might be appropriate.

Disable images and page colours

Disable images (including background images loaded by CSS) can easily expose whether navigation or content is accessible without images. As a practical example, using this feature highlighted that we had overlooked a background colour behind main navigation links on our recent Stuff and Nonsense redesign, leading to white links on a white background. Simply adding #72796f to our navigation <div> improved accessibility in a few seconds.

#nav-main  {
background : #72796f url(../images/nav-main-bg.gif) no-repeat left top;
}

The WAI guidelines also require that colour is not the sole method of conveying meaning, so Disable Page Colours is a simple way to check that colour blind users will still enjoy their experience on a site.

Disable styles

Perhaps the most important (and revealing) tool for designers is the toolbar’s ability to Disable Styles, leaving only document content. Revealing only content, including that which has been moved off-screen or hidden by CSS, allows us to check that a document is structured in a meaningful order for a screen-reader user. It also highlights where best to place skip to content or navigation links. It may also highlight where additional markup elements such as <br />s and <hr />s might be required to produce an attractive layout without CSS.

PDF of the Stuff and Nonsense home-page without styles.

Images

Images are a staple of most designers I know, and deciding where alternatives to images will benefit a user experience and then providing effective alternatives is a day-to-day occurance. Outline Images Without Alt Attributes can be a life-saver during a busy design or testing routine. This is often followed by Replace Images With Alt Attributes to ensure that if non-empty alt strings have been chosen, that the alternative text is both meaningful and adds to a user’s understanding of the content.

Validation

I cannot imagine a day where the Firefox Web Developer toolbar’s validation tool is not used at least fifty times. While we use the automated 508 and WAI accessibility checkers less frequently than CSS and HTML validation, they do provide ready access to validators from right within the browser. Whilst not directly an accessibility issue, validation is key to web-standards and should form a regular part of a CSS designer’s routine. Too many times have I seen questions about broken layouts on CSS Discuss or Accessify Forum where the problem lies rooted in invalid mark-up or CSS.

Opera

While it’s true that Opera is not my favourite browser of choice, it does include some killer features to help designers explore the accessibility of the pages that they create. None more so than the Links toolbar.

Links

Ensuring that links make sense to users when seen out of context is vital for practical accessibility. Too many times do we see,

<a href="#">More</a>

Instead of,

<a href="#">More about our clients</a>

This will be confusing in the extreme to screen-reader or text-viewer users, and is compounded when there are several on a page.

<a href="apples.html">More</a>
<a href="bananas.html">More</a>
<a href="oranges.html">More</a>

More?, more what? Opera’s Links toolbar quickly shows whether or not links make sense out of context or require a fuller explanation through an added title attribute.

User modes

Perhaps the most useful of all Opera features for designers is Opera’s ability to preview a page outside of the normal graphical view in ways that can often take designers by complete surprise. Simulating many viewing environments including a Text Browser Emulation, this feature is invaluable. It can also be great fun to show a tables-using designer the effects on a page when Disable Tables is used.

Online tools and resources for designers on a shoe-string

Many tools which we use every day as part of our testing routines can be found online. Here is a short list of some of our favourites.

Juicy Studio Colour Contrast Analyser

Gez Lemon introduces a highly useful colour and contrast analyser. This page is provided to allow you to check the contrast of two colours using the W3C’s colour contrast algorithm by specifying the colours directly.

Juicy Studio CSS Accessibility Analyser

Juicy Studio Readability Tests

Colorblind Web Page Filter

A further, useful online tool for accessing the impact of colour choices on a range of colour blindness types.

Any thoughts, or any useful On a shoe-string resources to add?

Replies

1. #1 On December 3, 2004 02:14 AM YoungHistorians said:

   The Web Developer Toolbar wows me. I’m not sure why something like that was never made for IE.

2. #2 On December 3, 2004 02:38 AM Nick Cowie said:

   There is one for IE
   https://www.nils.org.au/ais
   highly recommended.

3. #3 On December 3, 2004 03:27 AM Stuart Young said:

   Other tools?

   well there is:
   Delorie Lynx viewer
   https://www.delorie.com/web/lynxview.html
   This free web service shows what your webpage would look like in Lynx, the text only browser.

   cheers

4. #4 On December 3, 2004 03:40 AM Jeff Werner said:

   For debugging layouts I hit the Web Developer Toolbar Outline Block Level Elements almost as much as the Validation functions. Helps me determine margins, borders and padding without having to manually add them in the CSS to figure out why a particular element isn’t clearing or floating weird.

   I also went to Options and added "&outline=1" to the XHTML Validator to show me a header outline by default.

   Only problem I can’t seem to figure out is the Miscellaneous > Visited Links > Mark All Links Unvisted option, which never seems to work for me when I want to view a new design without any visited checkmarks or what have you. I still have to manually clear Firefox’s entire browser history.

   Also just downloaded Fangs, a screen reader emulator extension for Firefox. A little basic, but interesting and quick to use.

5. #5 On December 3, 2004 08:25 AM Kris said:

   A chance for me to linkspam: Bookmarklets.

   Lynx, for Mac OS X, operated from the Terminal (don’t be scared, read the manual)

6. #6 On December 3, 2004 08:54 AM Rob Whiting said:

   I’ve found the Lynx 2.8.5rel.1 installer for Windows NT/2000/XP available from https://csant.info/lynx.htm
   to be more useful the the online Delorie Lynx viewer. The ability to check local documents (i.e. on intranets etc.) makes it well worth a try.

7. #7 On December 3, 2004 10:38 AM Running said:

   For a fast check I often use https://wave.webaim.org it’s nice and easy. You can use it with every Browser. GreetinX

8. #8 On December 3, 2004 03:00 PM Tom said:

   Opera will also do "small screen rendering" thats stuff like mobile (cell) phones, PDA’s etc

   Overview:
   https://www.opera.com/products/mobile/smallscreen/

   The Register, rendered in a small screen:
   https://www.opera.com/products/mobile/smallscreen/theregister/

9. #9 On December 3, 2004 04:09 PM Thom said:

   not sure about usage stats but everyone I know who uses a text browser regularly (me included!) has moved from lynx to links

   https://artax.karlin.mff.cuni.cz/~mikulas/links/

   or w3m

   https://w3m.sourceforge.net/

   Both are worth bearing in mind in addition to lynx which is pretty off the pace these days in the text browser stakes

10. #10 On December 3, 2004 10:21 PM Ben said:

    Just wanted to point out a tiny typo -- that Chris’ last name is Pederick, not Pedrick. This is particularly important because those two families have a feud between them! The Pedrick’s have a thing against extraneous e’s. As such, the Pederick’s are highly irritating. Naturally the Pederick’s decry such foolishness as they are a clan of astute web developers.

11. #11 On December 3, 2004 10:28 PM Malarkey said:

    #10 Ben,

    Errr… thanks for correcting that. I didn’t want to inflame what sounds like an already tense feud.

12. #12 On December 5, 2004 06:06 PM riccardo said:

    Hi
    just wanted to say that I (cannot) see some white links on the left column. (More, Articles elsewhere). I mean, they’re nearly invisible if you don’t look carefully. I think they looked fine before.
    (I’m on Mozilla 1.7 on Win 98)

13. #13 On December 5, 2004 07:32 PM Malarkey said:

    #12 Riccardo, thanks for catching that.

14. #14 On December 5, 2004 09:52 PM Jason Beaird said:

    Great writeup! This goes without saying really, but many of my favorite accessiblity loving features in Firefox come in the form of bookmarklet/favelets. The most useful (in my opinion) is the Mouseover Dom Inspector from Slayeroffice:

    https://slayeroffice.com/?c=/content/tools/modi.html

15. #15 On December 6, 2004 08:48 PM KLS said:

    This is helpful, thanks Andy. I rem one link to this site which could test pages and output it in smaller handheld devices, would anyone know of that particular link?

16. #16 On December 7, 2004 03:13 PM Jon Hicks said:

    I’m a bit late catching up with reading this post, but thanks Andy, this was great. I just wish someone could create a version of the web developer tools for Safari!

17. #17 On December 8, 2004 10:49 AM dotjay said:

    I used to use Opera for a few checks, but have found a replacement for most in Firefox or in Chris’ Web Developer toolbar.

    e.g. You can see a summary of link information in Firefox using View Page Info in the context menu (or Tools > Page Info). Chris has also added a couple of Links tools in the Information menu of the Web Developer toolbar.

    The DOM Inspector in Firefox/Mozilla proves useful for some debugging sometimes - when that one element won’t behave, you can check all the CSS applied to it.

    For small screen rendering, I have tried out Disruptive’s Small Screen extension, but seem to remember it crashing Firefox on first install. Seems to work after that, but obviously needs some work. I can’t use it as a replacement for Opera’s small screen tool yet.

    I didn’t know about Opera’s ability to switch off tables. In firing up Op7 I couldn’t find it. I guess I should really install the newest version. =) Again, there’s a similar feature in the Web Developer toolbar, Misc > Linearise Page, but I don’t suppose that works in quite the same way as the Opera tool.

    More recently, I’ve been checking out the FoxyVoice and Fangs extensions for Firefox, both of which look promising developments.

18. #18 On December 8, 2004 04:02 PM Blair Millen said:

    Great write-up… but more importantly, you’ve attracted some very useful comments and links. A fine resource. i particularly like the Delorie Lynx viewer.

    Cheers!

19. #19 On December 10, 2004 06:19 PM Neil Whiteley said:

    There’s a tool available as a free download from IBM called aDesigner that I’ve found useful.

    The aDesigner is a disability simulator that helps Web designers ensure that their pages are accessible and usable by the visually impaired.
    Web developers can use aDesigner to test the accessibility and usability of Web pages for low-vision and blind people.
    How does it work?
    The tool looks at such elements as the degree of color contrast on the page, the ability of users to change the font size, the appropriateness of alternate text for images, and the availability of links in the page to promote navigability. The tool also checks the pages’s compliance with accessibility guidelines. The result of this analysis is a report listing the problems that would prevent accessibility and usability by visually impaired users. In addition, each page is given an overall score. With this information, Web developers get immediate feedback and can address these obstacles before the pages are published.

    The above is all plagarised from the IBM web site of course :)

    You can get it at https://www.alphaworks.ibm.com/tech/adesigner