Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 10.02
February 2004

Columns

Extras

Reviews

Download ATPM 10.02

Choose a format:

Web Accessibility

by Raena Armitage, rarmitage@atpm.com

Part 2: Text and Language

Last month, we took a look at the reasons why it’s important to think about Web accessibility: as well as making life easier for the disabled, we can make a better site all-round. This time, we’ll be doing something about it—by looking at how we can improve the way we use text and language on our Web sites.

Text?!

Yes, text. It’s undoubtedly the most accessible format on the Web: it can be spoken aloud, easily resized, copied and pasted, translated, spidered by Web search engines, and even converted into Braille.

However, that doesn’t give you an excuse to slack off, because the way you present your textual content can have some serious impact on the accessibility of your page. Even though text will probably make up the bulk of your site’s content, it can often be overlooked in the rush to get the graphics down pat, link your pages properly, and get the site working in a bunch of different browsers.

The good news, of course, is that text is easy to manipulate—much easier than ripping the guts out of your layout or color scheme. That means any accessibility issues with your text will be reasonably easy to fix, and it’s a good place for us to start.

Who Benefits?

When it comes to accessibility and text, everyone—and I do mean everyone—benefits from some attention to the way you present your text. A lot of these tips improve your site’s general usability. From an accessibility standpoint, however, some particular groups are worth thinking about:

  • Visually impaired users will often have trouble with reading text in general, and reading it on a computer screen can make it even harder. There’s no reason to put extra barriers in their way with sloppy writing and difficult presentation.
  • People with a cognitive disability have trouble with mental tasks, and often find text content to be difficult. The same is sometimes true of people with conditions like Attention Deficit Hyperactivity Disorder. These conditions can affect a reader’s comprehension of the text and their ability to concentrate. Your writing style and presentation are both important here as well.

    Note: People with cognitive disabilities can get a great deal of benefit from using graphics, multimedia, or other non-text content. However, this time we’ll be concentrating on text.

  • It really is the World Wide Web. It’s likely that some of your visitors aren’t native speakers of your language, and their non-native vocabulary isn’t necessarily up to scratch. Simpler writing makes it easier for you to get your message across.

  • Don’t forget about kids! While youth is not a disability, children don’t generally have adult reading skills or vocabularies, and there’s not a lot they can do about it for now. Like people who don’t speak your language, simpler writing means that they can spend more time reading, and less time checking dictionaries.

Able readers will benefit too:

  • Usability expert Jakob Nielsen found that most readers will scan a page, rather than actually read it all the way through. Simpler writing and clearly presented text mean that it’s easier for people to get to the meat of your writing, without being distracted by the trimmings.
  • Nobody likes waffle. Many people find technical jargon, legalese, or marketing fluff to be confusing or even intimidating. Clearer writing makes your readers feel a lot more comfortable when using your site.
  • There’s usually something else competing for your readers’ attention: phones ringing, new mail icons blinking, other browser windows open, and so on. Attention spans are short. If you can get your message across quickly and clearly, it won’t be lost in the noise.

Keep It Simple

Have you ever read something like this?

We are currently in the process of consolidating our product range to ensure that the products that we stock are indicative of our brand aspirations. As part of our range consolidation we have also decided to revisit our supplier list and employ a more intelligent system for stock acquisition. As a result of the above certain product lines are now unavailable through jungle.com, whilst potentially remaining available from more mainstream suppliers.

Uh…what?

This horrible mangling of the English language comes courtesy of the Plain English Campaign’s Golden Bull Awards. Somebody sent a question to online retailer jungle.com, asking whether they still sold blank CDs, and this was the response. A short, sharp “No” would have been rude, but at least it wouldn’t make your eyes cross.

When you’re writing for the Web—or anywhere else, for that matter—you should try to use the clearest and simplest language possible. It’s a good idea for a number of reasons, but from an accessibility viewpoint this will ensure that your writing doesn’t compound any other problems that your readers may have. And for those keeping score at home, using the clearest and simplest language is one of the Priority One checkpoints for the World Wide Web Consortium’s Web Accessibility Guidelines.

Clear and simple language doesn’t mean that you ought to “dumb it down” to first-grade level: the language you need to use also relies a lot on your audience and the text’s purpose. For example, if you’re the webmaster of a meteorology site, you can safely assume that a visitor reading an analysis of recent climate data will be someone who is already familiar with meteorology. There’s a good chance that they already know about terms like “Kelvin wave” and “positive anomaly,” so it’s fair to go right ahead and use them. However, people who just want to see their local weather forecast will be more comfortable with everyday terms like “unusually strong winds” or “scattered showers.”

Practical Tips

The following pointers can help you keep your writing simple, clear, and effective.

  • Keep your sentences short—15-20 words is about as long as a sentence should get. It can be hard to do this when you’re trying to explain a complicated idea—use appropriate punctuation (like those dashes) to help turn long sentences into more manageable chunks.
  • Stick to one concept or idea per paragraph. If you find that you’re writing about two different things in a single paragraph, it’s probably time to break them up.
  • Choose common words whenever you can. This is of particular benefit to people with a reading or learning disability, who have to work harder to read your text.
  • Try to avoid jargon and other “special” words as often as possible. If it’s necessary to use them, define them someplace in the document—either with a glossary, or the first time you use them.
  • If you’re using acronyms or abbreviations, write them in full the first time you use them:

    About This Particular Macintosh (ATPM) is a Web zine about…

    There’s also a pair of HTML tags that can help: <acronym> and <abbr>, respectively. When you use an acronym, such as XHTML, you can mark it with the <acronym> tag:

    <acronym title="World Wide Web Consortium">W3C</acronym>

    Most browsers will show a marked acronym with a dotted underline. When you hover the mouse cursor over the word, the expanded version appears as a tooltip.

    web-tooltip

    Broken Browser Alert: Although <abbr> is the better choice for abbreviations, Internet Explorer doesn’t support it. And that still doesn’t give you an excuse to slack off: write them out in full.

  • Use active, rather than passive verbs—for example:
    Jack redesigned the Web site.

    instead of:

    The Web site was redesigned by Jack.

    They’re shorter and more direct, which aids in comprehension. (Not sure about the difference? Check out the Online Writing Lab.)

  • When you speak about actions, try to use direct instructions. This is especially important for link text—ideally, a link should make sense when read out of context.
    More information can be found at example.com.

    That’s nice, but:

    Find out more at example.com.

    is much easier to read.

  • The easiest way to check your work for simplicity is to ask someone to read it for you, and preferably someone who isn’t an expert on what you’re writing about. When you’ve spent hours preparing your writing, you’re probably too close to the action. No friends? Well, try leaving the work alone for a little while and go do something else. Come back and read it with a fresh perspective.

Keep It Organized

The way you structure your text can have a significant impact on accessibility as well. Headings, lists, paragraph breaks, and good use of white space all contribute to an easier time on the Web. Using these techniques can help break up your text into smaller parts.

What’s more, using the correct HTML structure for your text elements can be of great benefit to both you and your readers. It’s very noticeable for people who use a screen reader such as Freedom Scientific’s JAWS, which announces the presence of a heading, tells the user when they are reading a list, and more. To do this, it relies on the structure of the page.

Headings

Using headings and subheadings can be a tremendous aid to accessibility. Headings make it clear where each section of your page begins and ends, making it easier for visually-impaired people to identify each section, and simplifying the process for people who have trouble with reading.

Able readers will also find it easier to skim through the content to pick out the parts they’re interested in reading. Search engines are paying attention, too—many will view keywords in your headings to be more prominent than keywords in the rest of your page.

Ideally, headings will be larger, bolder, colored, or a combination of all three. Use short, meaningful headings that accurately describe the text beneath them.

In HTML, the <h1> through to <h6> tags are used to mark headings of varying levels. A visual browser’s default rendering of a heading is pretty dry, but you can spice it up with cascading stylesheets (CSS). For example, using this piece of CSS would make each instance of a <h2> tagged heading bold, large, dark red, and set in Helvetica.

h2 {
font-size: large;
font-family: Helvetica, Arial, Geneva, sans-serif;
font-weight: bold;
background-color: #fff;
color: #900
}

If you like to use images as headings, that’s fine too—they can go inside heading tags. Don’t forget to give the heading images a meaningful “alt” attribute, though.

<h2><img src="/images/whatsnew.gif" height="40" 
     width="120" alt="What's New" /></h2>

Paragraphs

The best way to present paragraphs on a screen is to separate them with blank space. You’ll notice that we’ve done that here at ATPM, on both the Web site and in the screen PDF version. It’s harder to read large amounts of text on a computer screen, and breaking up your text helps a great deal.

The “right” way to present a paragraph in HTML is to use the <p> tag, like so:

<p>Captain Arthur Phillip and the First
Fleet landed at Port Jackson in the new colony of New South Wales on 26
January 1788. Until the American War of Independence, Britain had sent
convicts to America. American independence ended the practice and the
British prisons and prison hulks were full to overflowing. The island
continent at the end of the world seemed a perfect place to send
them.</p>

It’s common to find people using a pair of linebreak tags—<br> or <br />—to separate paragraphs instead of the “real” paragraph tag. While this looks similar to the space you see in a <p>-marked paragraph, it doesn’t really describe what the text is. Keep in mind that JAWS relies on structure to make navigation easier.

Lists

Lists should be used when you’re presenting a group of items. Again, the visual clue of the list items’ markers—bullets, numerals or symbols—makes it easier to identify each part of the list. Screen reader users will be able to tell it’s a list, even if they can’t see those symbols. For example, JAWS will announce that a list is beginning and ending as it reads the list to the user. It can also tell them at a “glance,” as it were, how many items are in the list.

HTML provides a way to construct three kinds of lists: unordered, ordered, and definition. In visual browsers, unordered lists use a symbol like a bullet or square to mark each item. Ordered lists use a numeral or letter to mark each item. Definition lists are handy for terms and their definitions—you can use them to more accurately mark up a glossary, for instance.

It’s difficult to give a good and brief example of just how much you can do with HTML lists. For a great explanation on how HTML lists work, check out the W3Schools’ detailed examples of lists.

White Space

White space is the term used for margins, padding, and other “blank” bits of the page. Good use of white space can be extremely helpful to people with a cognitive disability, who often find that a “crowded” page makes it much harder to concentrate on the text.

Reduce some of the clutter by adding margins to your text. How you do this depends on the way you’ve constructed your page: if the text is in a table, you could add a generous padding to the table’s cells. If you construct table-free layouts with CSS, you can add padding or margin to the text or its surrounding container.

Increasing the line height (line spacing) of your text can often help as well. There’s no particularly easy way to do this in plain old HTML, but adding some CSS means you can adjust the line height of your text.

body {line-height: 180%;}

What About Type and Color?

We’ll talk more about type and color in a later article, but the general guidelines for type are these:

  • Using high-contrast text, such as a dark text color on a pale background, can make a significant difference. Higher contrast means that the words stand out more clearly, which is crucial for visually-impaired readers. It also makes things easier for some people with a cognitive disability.
  • Limit your fonts to one or two choices. A page that uses seven different fonts can be extremely confusing, not to mention cheesy.
  • If you’re using CSS on your page, relative font sizes like percentages or keywords are more flexible than absolute pixel- or point-based ones. (If you’re not using CSS, what’s keeping you?) Relative font sizes are calculated according to the preference set in the Web browser: if a reader has set their browser default size to “larger,” they expect larger text. Don’t stomp on their preference, because it’s probably there for a good reason.

    Broken Browser Alert: It gets worse for the 80% of users who browse with Internet Explorer for Windows. If they go to a page with tiny, absolutely-sized text and try to use the View menu to enlarge it, Internet Explorer does absolutely nothing. What a pain.

If all this relative-versus-absolute stuff is gobbledygook to you, there’s a great explanation at Max Design.

Again, we’ll be covering this in more detail later on.

Where to Start

So now you know what to do: now, where to start?

You really don’t have to rewrite every single page on your site right now, unless you’ve got nothing better to do all weekend. The easiest place to start is by looking at whatever you’re working on at the moment. If you’re adding new text content to your site some time in the near future, try to incorporate some of these techniques for making your site easier to read.

What you should think about changing soon are important and often-used parts of your site. Now is the time to look at them and see if you can’t improve their textual content. If you have any of the following, these are particularly useful:

  • your “home” (index) page
  • the instructions for your search engine
  • Frequently Asked Questions or help pages
  • product support information
  • contact details for you or your company
  • your privacy policy

Yeah, I even said privacy policy. Privacy policies are often filled with legalese and technical jargon, but it is important to make sure that your readers understand it—disabled or not. Even lawyers and engineers can write like humans when they try.

Further Reading

Last month’s links are still useful for finding information about the best ways to use text. However, these resources provide more specific discussions about text, language, and disabilities.

The Plain English Campaign has free guides and advice on how to use simple, plain English. (If you aren’t writing in English, don’t be put off—the principles are still sound.)

Jakob Nielsen’s collection of tips on writing for the Web is packed with goodies, including before-and-after examples of improved text.

WebAIM has a section devoted to cognitive disabilities and the difficulties that people can encounter when your content isn’t clear. For a great example of what this can be like, do the origami cup activity and see how you fare.

The International Dyslexia Association discusses the effect of dyslexia and related conditions. While they don’t seem to have a lot of discussion about dyslexia and the Web, there’s a wealth of information about what it is and how it affects people.

Aphasia is a condition that occurs after brain damage or stroke, and affects a person’s use of language—speaking, writing, or reading. The National Aphasia Association in the United States provides information about this condition and its effects.

Also in This Series

Reader Comments (1)

l.a.d · November 14, 2005 - 21:42 EST #1
This website has some wonderful information on it. I found it very useful when researching for my science fair project. I needed to research how different fonts can affect different people and their brains. I was not able to find anything until I came across this site. It was a huge help! Thank you!

Add A Comment





 E-mail me new comments on this article