Information and relationships: accessibility for content authors

  • Author: Access iQ ®
  • Date: 28 Nov 2012
  • Access: Premium

Quick facts

Headings, lists, tables and emphasis all help the user to read and understand your content, by distinguishing one block of content from another and thereby establishing a structural relationship between them.


In all of these cases, the relationship is communicated visually. Headings might be displayed in a larger font and separated from the preceding paragraph text, lists may be indented with item lines identified by a symbol, tables are useful for laying out data in columns and rows, and emphasised text is typically bold or italicised.

The visual nature of the way this kind of formatting establishes the relationships between sets of information on a webpage means they may be inaccessible and the information thus incomplete.

If a person is blind or vision impaired they will not see the formatting and not receive information about relationships between pieces of content that a sighted person will.

The way to address this is to make sure the information about content relationships is presented in a way that can be perceived by assistive technology and effectively conveyed to the user. This can be done using HTML.

The intent of Success Criterion 1.3.1 Info and relationships is to ensure that any information or relationship shown visually using formatting is also made available to assistive technology users.

Let's look at two examples.

Example 1:

The text for the line intended to be a heading has been manually styled: the font size has been increased to 16pt and the text has been made bold.

Example 2:

A heading style has been applied. When that style is applied, the heading is 16pt bold font and the heading is identified using a heading tag.

Visually, the output of both examples will be identical in all web browsers. However, for assistive technology such as a screen reader, these pieces of text are quite different. A screen reader will describe Example 1 as simply a piece of text that is in 16pt bold font.

In Example 2, the heading tag allows the screen reader to tell the user that this piece of text is a heading. It will typically not relay the formatting to the user, just the fact that this is a heading at level one. What is conveyed to the user is the relationship between the information in the heading and the content that follows it.

The semantic meaning that comes with using the right HTML tags in the right situation is extremely important for assistive technology users. For a content writer, this means not only using heading tags, but using them appropriately to preserve the hierarchy of meaning conveyed to the sighted user by formatting.

A note on CMS editors

Many of the HTML tags described below can be applied using the formatting toolbar in your content management system (CMS) editor. Most CMS editors will also allow you to view the HTML code for the page you are editing. You may need to switch to HTML code view to add HTML tags and attributes that cannot be added using the formatting toolbar. In the following sections, we have flagged HTML tags that you may have to enter in HTML code view and provided code examples for you to follow.

Assistive technology support

Not all HTML tags are well supported by assistive technologies such as screen readers and Braille devices. When an HTML tag is supported, it means that the assistive technology can communicate the semantic meaning of the HTML tag to the user.

According to Technique H49: Using semantic markup to mark emphasised or special text, the following HTML tags aren't well supported by assistive technology:

  • <code> (code snippet)
  • <ins> and <del> (insertion and deletion)
  • <dfn> (defined term)
  • <kbd> (keyboard stroke)
  • <s> (strikethrough)
  • <sub> and <sup> (superscript and subscript)
  • <q> (inline quotation)

Just because these tags aren't well supported by assistive technologies doesn't mean you shouldn't use them. What you must consider is whether the meaning of your content remains the same if the assistive technology cannot communicate the semantic meaning of the HTML tag to the user.

If the deletion tag is used to define and indicate a piece of text as no longer relevant, then that meaning will not be communicated to an assistive technology user. The content writer's task is to ensure that meaning is communicated to the assistive technology user by another means — for example in this case by adding the word "deleted" in parentheses at the end of the deleted section.

If your job as a content author, producer, editor or manager includes marking up content for web pages, you should know which HTML tags to make provision for, whether the markup is provided to you or created by you. If meaning will be lost, ensure that the same information is communicated using text as well.

Headings

Headings are vital to organising and structuring content on a webpage, and it is equally important that those headings are identified with the correct HTML tags. Use heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) to identify headings.

Using the correct order for headings structure is important for allowing screen readers to correctly convey the way information is structured on the page.

Emphasising text (bold and italic)

The <em> tag, which indicates emphasis, and the <strong> tag, which indicates stronger emphasis, are used to make the selected text more emphatic than the surrounding text.

Note: It is this relationship between the selected text and the surrounding text that is defined and indicated by the formatting, and must be conveyed to those who cannot otherwise discern it.

When the <em> tag is used it is visually displayed as italics and when the <strong> tag is used the text is bold. Most assistive technologies will let the user know when text is emphasised as well.

All CMS editors should allow you to emphasise text. You should check that your editor is using the <strong> and <em> tags rather than the deprecated <b> and <i> tags. To do this, choose a piece of text that you have emphasised, switch to HTML code view and check that the tags that surround the text are correct.

Lists

When using lists in your writing, you must use the HTML tags for lists: <ul> for an unordered (bullet) list, <ol> for an ordered (numbered) list and <li> for list items. If you create a list using text symbols as bullet points, such as an asterisk or a dash, or type the numbers manually for an ordered list, your list will not meet the accessibility requirements for WCAG 2.0.

To ensure that screen readers interpret lists correctly, it is important to provide the full structure of the list by defining the <ul> or <ol> elements, even though most browsers will render lines marked up only with the <li> element as an unordered list.

Most CMS editors will allow you to create ordered lists and unordered lists without needing to edit the HTML code. Our topic on ordered and unordered lists for content authors explains why accessible lists are important and how you can check that your lists are accessible, even if you are using a CMS editor.

Tables

Ensuring that tables are created using the correct HTML tags makes a big difference to someone using assistive technology to understand that information. To make a simple table accessible, you should identify table headers using the <th> tag and include a caption to identify the table using the <caption> tag. Most CMS editors will allow you to identify table headers and add a caption using the CMS editor without having to worry about HTML code.

Complex tables with merged cells or multiple table headers will likely require you to do a small amount of manual HTML coding. Our topic on creating accessible tables shows you how to create both simple and complex tables that are accessible.

Quotes

There are two tags that you can use if you are quoting text: <blockquote> and <q>. The <q> tag is for short quotations that are in line with other text whereas the <blockquote> tag is used for long quotations that are a separate paragraph. If the quote is in another language, you will need to identify the quote with the appropriate language. See our topic on using foreign words or phrases for more information.

Note: The <blockquote> tag should not be used to indent text that isn't a quote. If you need to indent text, contact your web developer who will be able to create a new style for you to use.

Example 1:

Using <q> to identify a short quotation within a sentence:

Add the <q> tag at the start of the quotation and </q> tag at the end of the quotation.

<p><q>To be or not to be</q> is the opening phrase in William Shakespeare's play Hamlet.</p>

Example 2:

Using <blockquote> to identify a block of text as a quotation:

Add <blockquote> at the start of the quotation and </blockquote> at the end of the quotation.

<blockquote>Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</blockquote>

Citations

The <cite> tag is used to identify a reference to another source. The source could be a book, poem, academic journal or even another webpage or website. This tag may not be available in your CMS editor and you may be required to manually add the <cite> tag in HTML code view.

Example 3:

Using <cite> to identify a reference to another source:

Add the <cite> tag at the start of the reference and </cite> tag at the end of the reference.

<p>Issac Asimov, author of science fiction classics such as <cite>The Bicentennial Man</cite> and <cite>I, Robot</cite>, was born in Russia before immigrating to the United States when he was three years old.</p>

Superscript and subscript

The <sup> and <sub> tags are used to identify superscript and subscript respectively. Visually, superscript and subscript is displayed as text that is smaller than the normal line of text and set either slightly above or below it. Superscript and subscript are used mostly for chemical or mathematical equations, and superscript is used for footnotes.

Some content management systems have buttons on your CMS editor for marking text as superscript or subscript. If your CMS editor doesn't have this feature, you will need to switch to HTML code view and add sup or sub tags around the piece of text as show in the examples below.

Remember that the <sup> and <sub> tags are not well supported by assistive technologies. Consider whether you need to use superscript and subscript in your content, particularly if you are using superscript for footnotes on a webpage.

Abbreviations and acronyms

There are a number of different techniques to ensure that users can access the expanded form of abbreviations and acronyms. These techniques are covered in the topic on acronyms and abbreviations for content authors, including using the <abbr> tag to indicate an abbreviated form.

Code snippets

If you are a technical writer, the <code> tag is used to identify code snippets such as code that is in HTML or PHP or any other coding language. When you use the <code> tag, the code is displayed using the Courier font which is used to visually distinguish code from the rest of the text. This tag may not be available in your CMS editor and you may be required to manually add the code tag in HTML code view.

Example 4:

Using <code> inline to identify a piece of code:

Add the <code> tag at the start of the reference and </code> tag at the end of the reference.

<p>The <code>alt</code> attribute is used to specifies alternate text which can read out by a screen reader.<p>

Example 5:

Using the <code> tag for a code snippet:

<code>

#Manage_Flights {

  background-position:-135px 0 !important;

}

#Manage_Flights:hover, #Manage_Flights.active {

  background-position:-135px -35px !important;

}

</code>

Keystroke

The <kbd> tag is used to identify a keystroke on a keyboard that a user must press to perform an action. An example of a keystroke is CTRL + C to copy text using a Microsoft Windows operating system, or CMD + C in an Apple environment. This tag may not be available in your CMS editor and you may be required to manually add the <kbd> tag in HTML code view.

Example 6:

Using <kbd> to identify a keystroke on a keyboard:

Add the <kbd> tag at the start of the keystroke and </kbd> tag at the end of the keystroke.

<p>Hold down <kbd>CTRL</kbd> and press <kbd>C</kbd> to copy text within Microsoft Windows.</p>

Insertion and deletion

The <ins> and <del> tags are used to mark sections of a document that have been inserted or deleted. Remember that the <ins> and <del> tags are not well supported by assistive technologies, so the semantic meaning which is shown visually via the web browser may not be available to assistive technology users. In addition to using the <ins> and <del> tags, include the same information that is visually presented to the user in text. These tags may not be available in your CMS editor and you may be required to manually add them in HTML code view.

Example 7:

Using <ins> and <del> to identify a reference to another source:

Add the <ins> or <del> tag at the start of the insertion or deletion and </ins> or </del> tag at the end of the reference.

<p>The organisation has <del>212</del><ins>215</ins> staff.</p>

Defining text

The <dfn> tag is used to identify the first time that a new term is used and explained. This tag may not be available in your CMS editor and you may be required to manually add the <dfn> tag in HTML code view.

Example 8:

<p>The concept of <dfn>progressive enhancement</dfn> has been around for a few years. You could say that it describes an approach to web development from the point of view that 'the glass is half full' rather than 'the glass is half empty.'</p>

WCAG 2.0 references

Related Techniques for WCAG 2.0