Web site styling has become very complex - there are too many browsers and platforms for your site’s design to be pixel-perfect on every device. CSS has become incredibly complex, too; and we often have to resort to tricks and even hacks to get it to do what we want.
CSS tricks make our lives easier but many of the shortcuts that we take create accessibility nightmares. Let’s look at some common lazy coding practices that impair the usability of your sites.
1. Omitting <alt> tags
If there is an image on your page, it must have an <alt> tag describing the image contents - otherwise blind users using screen readers won’t have any idea of what the image is. Sometimes writing <alt> tags is painful because as you try to come up with descriptions you realize that the image has no specific utilitarian purpose, which might make you consider your image strategy more carefully with the benefit to all your readers.
Solution: Use meaningful <alt> tags for important images; use Alt=“” for images that do not add content to your page.
2. Putting textual information into images
You need a screenshot of a table with all the right columns widths and styling, so instead of coding an HTML table you make a JPEG in Photoshop and call it a day. That text is dead not only to screen readers, but also to search engines - its contents are not indexed, and are therefore unfindable. Yes, it is a pain to style tables; but turning them into images is just outsourcing the pain to your readers.
Solution: Avoid using images of text.
3. Identical links placed next to each other
Let’s say you have teasers for your stories on the front page with titles and images for every story. Usually both the title of the story and the image point to the same URL (the full story) but are built as two independent elements, each enclosed within its own <a> tag. Since screen readers usually read links on your pages sequentially, the users will hear the same link twice.
Solution: Wrap the <a> tag around elements pointing to the same content.
4. Semantic meaning of headings
Assistive technology and search engines assume that headings are used to structure your page hierarchically - like an outline. <h1> level headings are reserved for page titles, <h2> for major sections, <h3> for subsections of <h2> sections, and so on. This is the only acceptable use for headings, but they sometimes come handy for sloppy coding. Let’s say you have defined your <h1> headings to be 30 pt font in CSS; and here is a page element that is not a heading that you need to print at 30 pts as well. Yes, you could assign the <h1> tag to that element and be done; but that would be a bad idea. Headers are semantically meaningful, and using them randomly misrepresents the structure of your document.
Solution: Do not use heading tags for styling. Create meaningful headings which organize information like an outline.
5. “Click here” and unclear link text
Here’s some link text you have probably seen before: For more information, click here. For good usability and accessibility, links need to convey information in a self-explanatory manner. Screen readers and other assistive technology can create a list of links for navigation purposes. If the only cue is “Click here” without the context of the preceding sentence it is impossible to tell what will happen when you click. A better link for the above scenario would have been See the application form for our undergraduate program.
Solution: Make your link labels meaningful and context-independent: this really helps users of small displays on mobile devices, too. Links should be able to stand alone - “click here” and “read more” do not tell the reader where they are going.
6. Repeating your navigation.
The page is long, so you decide to repeat your navigation toolbar with the main site links at the bottom of the page. You are trying to save your users the trouble of having to scroll up to the top of the page; but you are also creating a situation when the screen readers will read the same set of links twice.
Solution: Avoid double navigation; use floating navigation that moves down as the user scrolls or add collapsible elements so that less scrolling is needed.
7. Using identical labels for different links (and different labels for the same link)
Let’s say there is a global link in your navigation bar to your staff directory for the whole unit; but then in a paragraph about one of your department’s labs there is a link to the listing of the lab’s staff. The problem is that both links use the same label, “Staff Directory”. Will your users know these lead to two different pages?
The reverse of this problem is two links to the same resource, one labelled “Our people” and another labeled “Directory”, this time an illusion of two pages when only one exists. Ideally, be consistent with your labels throughout your site - decide on the best labels and stick to them.
Solution: Use consistent, unique link labels throughout your site.
8. Using slideshows
Slideshows are hard to code and style and therefore they invite a great number of hacks and corner-cutting behavior from coders. Uncontrollable slideshows are a nightmare for every user, but an even greater hurdle for users relying on screen readers. There are so many potential problems that they deserve a separate in-depth treatment - here’s a good introductory post about accessibility and slideshows.
Universal design is the concept of designing with flexibility in mind: having more than one way to understand a picture, a video, or what is on the page. While accessibility and universal design are complex topics, there are simple techniques that can help you improve. The practices described above are just the tip of the iceberg. But at least now you are aware of the iceberg; and you can learn to avoid icebergs by doing a few simple things:
1. Learn more about different ways of accessing the web
If you only drive a car, you won’t understand what it is like to walk or bike through the same streets; you must learn more to understand. Learning more about assistive technology - what is available and how it works - is a good first step; here are two starting resources:
- Introduction to Web Accessibility
- 10 Easy Accessibility Tips Anyone Can Use
2. Test your pages without CSS
Most modern browsers can show you what your page would look like if all CSS styling was removed. This is a good approximation of the content of your page available to screen readers, and some of the most egregious accessibility errors will be apparent from this simple test. Try the simple test of using your Tab key to move around the page too! To simplify testing, you could add a web developer toolbar to your browser.
3. Validate your pages
For a more thorough test, use the free WAVE web accessibility tool to see a detailed report of errors and suggested improvements.
4. Take a class on universal design
CU offers semester-long classes on universal design and accessibility. Contact Howard Kramer for more information. Accessing Higher Ground is a local conference that also offers full and half day preconference labs and workshops on web accessibility.
5. Talk to OIT
We provide free web consultations that can focus on various aspects of web publishing, including accessibility. We can help you test your site and develop solutions to make it more accessible. Details are available on the OIT website for you to learn more about web consultations.
text by Kosta Tovstiadi (OIT) and Catherine Stager (Disability Services)