Accessible Text Clouds

  • 1
  •  0

The use of text clouds can offer a fun, visually appealing method of displaying the frequency or popularity of words on a web page. Through the creation of various algorithms, text clouds can be presented in an array of shapes and sizes. Often the frequency or popularity of text within the clouds is represented through increased font-sizes, font-weights or color. The text or terms within the cloud are often placed randomly within the cloud shape as seen in the following figure:

A text cloud for which Baseball Football, and Skiing is conveyed to be more popular than other sports
Text Cloud Figure 1: A text cloud for which Baseball Football, and Skiing is conveyed to be more popular than other sports

Merely relying on font-sizes, weights and color to convey hierarchy can exclude some users from accessing important information on the website, though. Without the proper HTML structure, a non-sighted user, for example, may not have the ability to determine the importance of one term over another. To simulate this experience, find a text cloud on the web and ignore style sheets within the browser. Most likely, all of the hyperlinks within the cloud will appear the same, without any presentation or structure to aid in the intended purpose.

There are many open source examples of tag clouds (text clouds, collocate clouds, data clouds) on the Internet. Many of these do not focus on accessible HTML structure; some come close to providing the optimal solution. If you are looking for a text cloud solution, ensure that the raw cloud data is ultimately structured with HTML list elements (ordered lists defined by the OL tag). Be mindful that some open source solutions merely use unordered lists (UL tag). Although unordered lists can accurately convey the total number of cloud items, unordered list structure will not provide the means to denote the importance or frequency of the list items (i.e. tags within the cloud). To properly convey the frequency or popularity of the text clouds through HTML markup, ordered lists must be presented on the page.

The raw ordered list structure is presented in the browser before JavaScript and CSS formats the presentation of the content
Text Cloud Figure 2: The raw ordered list structure is presented in the browser before JavaScript and CSS formats the presentation of the content

By ensuring that the raw data is structured with OL tags in HTML, screen readers such as JAWS will convey the hierarchy of the list items and render the information as it is structured and in the order that the content appears in the Document Object Model (DOM). Moreover, the appropriate tabbing order will be honored within browsers as well. This will ensure that the most popular items or those items with the highest frequency will be accessed first with the keyboard. Through the implementation of JavaScript and CSS, the raw HTML (ordered) list structure can be presented in a variety of ways so that developers and designers can achieve a random, fun and attractive cloud. The most popular terms can be positioned anywhere within the cloud with any number of text decorations.

1 Comment

  • William Lawrence
    October 26, 2010

    This is great to remind folks about an unseemingly simple problem that can happen when conveying information. Providing some coding best practices would be great, too. Back in 2006, Mark Norman Francis wrote an article for 24 Ways on Marking up a Tag Cloud. He explains in more detail and shows an example of how to code the tag cloud to convey the semantic meaning of the tag cloud.