Info and relationships: accessibility for web writers, part 3

Web writers need to use HTML tags to identify certain types of information and relationships between information. For instance, headings need the appropriate heading tag because font size increases aren’t visible to everyone. Some blind people use software that reads out the headings. This gives them a sense of the document contents and structure—but it only works if heading tags are used.

In this article, I’ll outline the types of content and tags that most web writers will need to know about. You should be able to use your content management system’s formatting tools (see the image below for an example) to tag content, in much the same way that you use styles in Word. Of course, if you’re a developer or designer you will need to know more than I’ll cover here.

Headings

For the main heading on the page, use the  h1 (heading level 1) tag.  Then use the use the h2 tag for the main sub-headings. If you have headings within an h2 section, use an h3—and so on. There are 6 levels of headings available to writers to show the structure of their content.

Heading level tags have to be used logically. For example, you cannot skip heading levels and go from an h1 to an h3.  An h3 heading must always be within a section of your content labelled with an h2.

Heading markup should never be used for visual effect alone. If text isn’t a heading, don’t use the heading markup.  If you want larger text for decorative effect, get your designer or developer to make a style (within your site’s cascading style sheets) for you.

Lists

Use ol (ordered list) for a numbered list, and ul (unordered list) for a list of dot points.  Then use li (list item) for each item in the list.

Avoid making lists with visual formatting, like dashes or asterisks. And don’t use the li tag just to indent text.

Emphasised text

If you want to emphasise a word or phrase you can use the em tag (meaning ‘add emphasis’) or the strong tag (‘add strong emphasis’). These are recommended instead of the i (italics) and b (bold) tags which are just instructions for visual formatting, and may not work on some devices. Many content management systems will apply em and strong even when their formatting tools show only b and i options.

Tables

You may need a developer to help you with complex tables, but simple tables will just need the th tag for header rows or columns and the td tag for data cells. If your table has a caption, be sure you use the table caption tag.

Quotations

Use the blockquote tag around a quotation that appears as its own paragraph. Never use it for indenting blocks of text.  Get your developer to make you a text indentation style instead.

For shorter quotes inside a paragraph, you can use the q tag—although some content management systems may not allow you to do this without editing the HTML source code.

Citations

If you cite sources of information in your content, you can use the cite tag around the title of the source. Again, this tag may not be supported by your content management system and you may need to edit the HTML source code.

Glossaries

If you produce a glossary for your site, it’s a good idea to use definition list tags: dl for the whole list, dt for the word you are definition and dd for the definition. You might not be able to do this within your content management system, so check with your web manager or developer.

Other tags

I haven’t mentioned tags related to forms here because generally forms will be developed by designers or developers, and require very good knowledge of HTML markup.

There are a range of other tags that you may want to use occasionally, although many may not be available as formatting tools within your content management system. There is also patchy support for some of these tags in screen readers—you can use them, but your users may not be made aware of them.

code: used to mark blocks of programming code or HTML markup

del, ins: used to mark deletions and insertions in text to show changes made to a document over time

dfn: used around a word that is then defined

kbd: used to show keyboard commands or text to be entered by the user

sub, sup: used to show subscript (displays half a character below the line) and superscript (displays half a character above the line) characters for chemical or mathematical formulas and footnotes

Web Content Accessibility Guidelines references

To read more about information and relationships, see:

• Info and relationships: understanding success criterion 1.3.1
• Web Content Accessibility Guidelines 2.0

Earlier articles in this series

• Introduction: accessibility for web writers, part 1
• Text alternatives for images: accessibility for web writers, part 2

You can subscribe to any comments to this entry via RSS 2.0. Both comments and pings are currently closed.