Info and relationships - accessibility for web writers

Benefits of properly tagged content

Content needs to be properly tagged so that people using screen readers can use and make sense of your content. Here are a couple of examples:

• Properly tagged headings that reflect the structure of your content, allow a screen reader user to read through the sub-headings to find the part of the content they need
• Using appropriate table tags allows a screen reader user to make sense of the data in a table. If they get lost in the middle of a table, the screen reader can read the corresponding header cells.

Other benefits include:

• Search engine optimisation, particularly when you use a logical heading structure
• Cleaner on-screen formatting—of lists and tables in particular.

How to use HTML tags properly

Content management systems provide formatting tools to let you tag content in much the same way that you use styles in MS Word.

Headings

For the main heading on the page, use the h1 (heading level 1) tag. This will usually be automated by your content management system. Then use the h2 (heading level 2) tag for the main sub-headings. If you have sub-headings within an h2 section, use an h3—and so on. There are 6 levels of headings you can use.

Heading level tags must be used logically. 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 a heading tag. And don't choose a heading tag because of its text size. If you want larger text for decorative effect or more flexibility with the sizes of headings, get your designer or developer to make some styles you can use.

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 styling lists with dashes or asterisks. And don’t use the li tag just to indent text.

Tables

You may need a developer to help you with complex tables, but simple tables will just need the th tag for header rows and columns and the td tag for data cells.

Label your table using the table caption tag (or a heading tag if you want the table label to be part of the content outline).

Quotations

Use the blockquote tag for quotations presented as a paragraph on their own. Never use it for indenting blocks of text. Get your web developer to make you a text indentation style instead.

For shorter quotes that appear within a sentence or paragraph, you can use the q tag. This adds quotations marks (although Internet Explorer doesn't display them). Most content management systems won't have a formatting button for this. To use it, you'd need to edit the HTML source code.

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.

Citations

If you cite sources of information in your content, you can use the cite tag around the citation. However, this tag is not provided by most content management systems, so 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

If you use forms, you need to be familiar with form tags. They're not mentioned here because forms are usually developed by designers or developers, and require thorough knowledge of HTML markup.

Other tags you can use are:

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

However, none of these are likely to be available as formatting tools within your content management system. And there's only partial support for them in screen readers.

References

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

Next article in this series

• Sensory characteristics