nirak.net

This is part of a series on accessibility and usability. See the contents page for more.

Now that we have talked about Code and Navigation and Design, I’ll talk briefly about a few tools you can use to help you do a mini accessibility study on your website, and briefly point to some resources on doing more complete usability studies.

Web Developer Toolbar

The Web Developer Toolbar add on for Firefox is what I use most often to do a down and dirty accessibility check of webpages. You can download the Web Developer Toolbar from its page at Firefox.

You can use the web developer toolbar in many ways (in fact, I still find more uses for it!) but for the purposes of this discussion I’ll just go over a few simple tests.

You can use the web developer toolbar to disable images, CSS and Javascript on your pages. Doing this will give you a pretty good idea of how accessible your page is – if you can do this and still navigate around and get to content, you are in pretty good shape.

Sometimes the toolbar shows some pretty dramatic problems. Take the following site:

Buy Fresh, Buy Local

The site looks pretty – but when you turn off javascript by choosing Disable > Disable Javascript > All Javascript using the web developer toolbar, you get the following page instead:

Buy Fresh, Buy Local with javascript turned off

Problems are not always that dramatic.

Turning off all javascript (Disable > Disable Javascript > All Javascript) Styles (CSS > Disable Styles > All Styles) and Images (Images > Disable Images > All Images) On aadl.org points to the fact that there is no H1 tag. Inspecting the code with the code inspector turned on (Information > Display Element Information) confirms this.

aadl.org is lacking an H1 tag.

Finally, the Web Developer Toolbar contains a built in validator for your CSS and HTML (actually, it uses the validator at http://w3.org, but offers and easier way to get to it.) You can access the validation tools by navigating to the page you want to check (must be on the web) and choosing Tools > Validate CSS or Tools > Validate HTML.

Firefox Accessibility Extension

One of the more impressive, free tools out there to check your website’s accessibility is called the Firefox Accessibility Extension. With this tool, you can get access to reports on accessibility that will point out missing alt tags, etc. There are 2 high visibility stylesheets that let you see what your site might look like to a low vision user. These can be found under Style > High Contrast View 1 & 2.

There are many more features found in this extension than I can go into here, but you can read the documentation for more.

Greasemonkey, Stylish, and various scripts

Greasemonkey is a Firefox add on that lets you change how a website behaves. Stylish is another firefox add on lets you apply your own stylesheets to websites. Many people with low vision or other special needs use these and other add-ons to alter the look of webpages. It is worth installing these and a few scripts to see how your site looks when altered.

For example, the Readability Interface is a set – a script for greasemonkey, and a style for Stylish – that lets you change the font, font size, background color, and other things about a website so you can see it better.  Likewise, the Night Shift style for Stylish applies a dark gray color scheme to a web page, making it easier to read in the dark.

Usability Tests

Usability tests can range from the simple to the complex (think eye tracking software) but are useful if you can get a group together, no matter how small. In a library setting, you could ask for a few volunteers to come look at your website in various stages of the design. Ask them to complete some tasks, and then observe how easy or hard it is. Encourage them to vocalize their thoughts. Don’t interrupt them or try to direct them, just observe. Afterward, compile what seemed to trip the users up, and fix them for the next iteration. If this seems very simple, that’s because it is. Although usability testing can be very complex and expensive, it can also be cheap and easy.

In addition, there are online tools you can use for usability testing. This article lists many of them. (Thanks to commenter Bret Clement)

Keep in mind that while a usability test may be fairly easy, the problems it turns up are not often easy to fix. Also, keep in mind that what is easy for one person might be hard for another, so don’t be too quick to change something based on one user. A usability test should always be combined with an understanding of usability principles.

This quick overview is no way attempts to dismiss usability testing or make it sound overly simple. One could devote an entire book to it (in fact, there are many). However, watching a user actually interact with your website can be an enlightening experience, even if you don’t have the money for a full fledged usability study.

If you’d like to read more on usability, you can start with usability.gov, which is an excellent resource. You might also want to check out the wikipedia article on usability or Usability Testing Demystified, an article by Dana Chisnell.

Conclusion

It is rare to find a website that follows all the rules for accessibility and usability. If you find your website breaks many of the rules set out here, don’t worry. In fact when I started to run tests on my own site, I’m sorry to say I failed many of the tests.  Usability, especially, is more an art than a science, and incremental changes over time can make a big difference to a website. Just be aware, keep at it, and code carefully!

This is part of a series on accessibility and usability. See the contents page for more.

Design and navigation are important aspects of your site’s accessibility. Clear, concise navigation helps users that must use their keyboard to get around, and a clear, clean design helps users find your content with a minimum of fuss. A good design should also allow the user to change it – for instance, make the font bigger or smaller, or change the colors so they can see it easier.

Navigation

Use words your users will understand. Exactly what words your users will understand is still somewhat of a contested issue, but there are several articles to help. John Kupersmith has put together an excellent site citing 51 usability studies called Library Terms That Users Understand. Among his findings are that users do not understand things like library acronyms, brand names and jargon, and that many terms that are straightforward to a librarian, such as “databases” and “library catalog” may not mean the same to users. In general, try to use natural language phrases such as “find books,” “find articles” and “ask a librarian.”

Label outside links clearly, and never link to an outside site (i.e. one that has a different look or feel or different navigation) from what looks like a navigation area. This area is generally the top bar of the site, and sometimes a side bar as well.

Plan out your navigation carefully, and try not to have too many sections and subsections. There is no perfect number of navigation items, but the more there are, the more likely your user will end up lost and confused. Users won’t want to look over a list of 10 items to find what they are looking for. Plan out the top level and sub navigation so that users are presented with a few choices each time. Try to consolidate pages wherever possible. Write and rewrite your copy so it is clear and concise, and gives users an immediate idea of what to expect on each page.

Build a robust search, as many people will give up on navigation quickly and will jump straight to search to find what they need. If you use a search like Google’s custom site search, the hard work you did in coding will work for you – your titles and headers will lead the user to what they are looking for.

Let the user know where they are by indicating it graphically. You can show a user where they have been by incorporating breadcrumbs into your site, but at the very least the user should know where they are at a glance. This might be accomplished by changing the color of the navigation for the page the user is on, and including a title that lets the user know exactly what they can find on that page. See Derek Powazek’s article “Where am I?” for more.

Carnegie Library of Pittsburgh hightlights the navigation showing the section you are in, and has a "you are here" bar so users can orient themselves.

http://www.carnegielibrary.org/research/art/

Also note that the URL gives users and indications where they are- the main body of the URL is followed by “research” and “art,” which correspond to the section and subsection the user is in.

Use a list to mark up your navigation. After you have marked up your navigation, you can use CSS to make it look like whatever you want. Consider the following example:

On the left is navigation as a list. On the right, the navigation is shown not in a list.

The navigation on the right is hard to understand- but the list on the left gives it structure that will come in handy when a screen reader is trying to navigate your site.

Offer users the option to skip the navigation if at the top, or skip to the navigation if it is at the bottom. In the figure above, there is a “skip navigation” link that allows users with a screen reader to skip the navigation so they don’t have to listen to it over and over.

Design

Designing a website is hard. Trying to keep accessibility and usability in mind while designing a website is even harder. And trying to work with a designer- well, that can sometimes be really hard (I know, I’m a designer). But whether you are designing on your own or working with a designer, following a few ground rules can help immensely.

Set some rules. Before letting a designer loose on your concepts, set some expectations. For instance, if you want to avoid using text in images (as mentioned in the last part of this series), mention that up front. Likewise, if you want to avoid using images for navigation, mention that too. It is much easier to design with accessibility ans usability in mind than to retrofit a design after the fact.

Take advantage of open source design. If you are designing a site yourself, you don’t have to start from scratch. Whether you are using a content management system, or coding from scratch, you can take advantage of open source design to get started. Find a template, theme, or design that is close to what you want and then tweak it ’till you are happy. Just be sure to credit the maker as appropriate if you do go this route! Each design will include specifications on how to credit the maker. Google for open source design to find designs, or look at the templates available for the CMS you have chosen.

Try to avoid making content look like ads. People have been trained over years to avoid clicking on anything that looks like a banner or sidebar ad or text ad. As you look around the internet, think about where ads are placed, and about their side and shape. Then, avoid using these same conventions for your content. (See item number 10 on this article on usability findings for this and more usability tips.)

Simplify, simplify, and simplify again. This applies to the code, the design, the writing and the pages. Really look at each part of your site and think about whether it is needed, or whether it could be combined with another part. Try to eliminate parts of your pages and add whitespace between items. Simplify your writing to use shorter sentences and fewer words. (Think “being concise” rather than “dumbing down.”)

Realize your user will mess with your design. The beauty of the web is that it is malleable, and if you separate your design from your content, the user will be able to change the content so they can read it easier. This is great! This might be something as simple as making the font bigger on the page, or as dramatic as turning off all styles and viewing the page with white text on a black background.

Lincoln City Library website with readability interface user script and style applied.

UNL Libraries Website with styles turned off and Night reading style applied

This is part of a series on accessibility and usability. See the contents page for more.

The first step to creating accessible and usable websites is to create clean, semantically marked and validated up XHTML.

Well formedness, doctype, and validation

First, code should be well formed, and adhere to the doctype declaration at the top of the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The doctype declaration tells the browser what the code should look like. You can read more about doctypes here.

One of the aspects of good XHTML, is well formedness – which basically means that all the elements are nested correctly.

<html><body></body></html>

This is nested correctly

<html><body></html></body>

This is not nested correctly

You can validate your webpage using an HTML authoring tool, or for free online (more on that later). The fewer validation errors you have, the more accessible and usable your website will be.

Semantic Markup

Semantically marked up content refers to content that uses HTML tags as they were intended to mark up the content.

For instance, the <h1>, <h2>, and <h3> tags refer to first, second, and third heading, respectively. they are meant to be used much as one would arrange an outline.

As an example, take this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Main Library, Anywhere USA-Upcoming Events</title>
  </head>
  <body>
    <h1>Main Library, Anywhere USA</h1>
      <h2>Upcoming Events</h2>
        <h3>October</h3>
          <h4>Week one</h4>
          <h4>Week two</h4>
          <h4>Week three</h4>
          <h4>Week four</h4>
        <h3>November</h3>
          <h4>Week one</h4>
          <h4>Week two</h4>
          <h4>Week three</h4>
          <h4>Week four</h4>
  </body>
</html>

So, for every web page, you should have an <h1> tag, which is usually the title of the website, and use <h2> – <h6> tags as needed to separate the content.

The <title> tag in the header of the HTML is important as well – you should have  a title that is unique to each page. Many websites use put the name of the site first, and then the name of the specific page your are on.

fig 1: Page without style

Other information on the page might include lists, tables and paragraphs. For instance, navigational elements are best presented as a list of items. Sub navigation could be represented as a sub list. Blocks of text should be enclosed in <p> paragraph tags. Tabular data should be presented in tables.

There are several old HTML tags that are no longer used because they have no semantic purpose – these include the <font>, <i>, and <center> tags.  The <span> and <div> tags are semantically neutral, and this is how we add style – colors, fonts, sizes, etc., to our webpages.

One way to check the semantic markup of your webpage is to turn the styles off in your browser – while not foolproof, this gives a good indication of how well marked up your document is. You should see a neat page, white background, black text, which is easy to follow and linear – i.e. there shouldn’t be columns.  (fig 1.)

For more information, see this Guide to Semantic Use of HTML Elements.

Images

You cannot avoid using images in your web page, but you can mark them up so users without sight (or users who have images off) can still know what the images are. Alt tags should be used only for images that have presentational meaning on the page. So, for instance, if you use an image for spacing (which should not be necessary anymore) you would use no alt text. An image may also have a title attribute where you can specify additional information about an image. The title tag will show up when a user mouses over an image. The alt tag will show up if the image cannot display (for instance, screen readers).

The title attribute is also useful for links. When it is not clear from linked text what you are linking to, or you are linking using an image, you should give additional information with a title attribute.

In short, the alt tag should be used for images that affect the meaning of the page, and the title tag should be used for additional information about decorative images.

<a href="help.html" title="Link to help page">
  <img src="help_graphic.jpg" alt="Help Page" title="Your helpful librarian" />
</a>

More information on the alt and title tags.

One final note about images- whenever possible, don’t use an image in place of text on your website. Not only does it make the website harder to change, but it makes it harder for the user to do simple things with your content, like print out a nice copy or access the content with a screen reader. Sometimes, this might mean compromising on a design, but in the end, the accessibility boost is usually worth it. For limited amounts of images with text – say, a specific organizational logo, be sure to use alt text as described above.

CSS (Cascading Style Sheets)

I won’t go much into style sheets (you can take a course or read a book if interested), except to say when you use CSS to specify the font size, to use ems instead of font size. If you do this, the font size will be based off what the user has set – so if they have a large or small font size as their default, your page will reflect that. A good article on sizing text with ems can be found on A List Apart, “How to Size Text in CSS.”

Conclusion

The point of having clean, well formed, semantic XHTML is to present your content so that many different devices can access it. the upside to this is that this approach optimizes your site for accessibility (for instance, screen readers) and usability (for instance, you can easily create a version of your site for a mobile device). This also, incidentally, optimizes your site for search engines to find it, since the same principles that allow screen readers to parse your site also work to allow search engines to index your site. Once the code of your page is clean, it will also be easier to apply your design using CSS.