Using HTML (HyperText Markup Language) to create clear content
This document shows how you can use HTML tags and attributes to help provide clear content.
Author: Lisa Seeman
Editor: William Loughborough, Jael Kurtz
Contributors
This document is a first working draft only. It has been created to test ideas and promote discussion.
If you have any comments or would like to participate in this effort email us or join LD Web guidelines list.
1. Use HTML as it is intended to be used
Assistive technology (software used by people with disabilities) will often try and present the information in a different way that is easier for their users. The more your site uses tags and attributes in the normal way, the more successfully software can adjust your site making it more usable for people with disabilities.
Creating links with javascritps or using headers to format other text and other "tricks" may confuse or break these features making your site harder to use.
Pointers for how to use HTML:
- Use header tags (like H1) to mark headers
- Use emphasis tags (like em) to mark important text
- Use link tags (A) to mark links
- Fill in the Alt attribute of pictures so that software can read text on images to the user.
2. Help the user follow the structure of the document.
Break up your content into sections with small paragraphs , short sentences, and lists. This makes your content easier to read and follow.
Then use HTML tags to capture the structure of the document. This will help the user follow the document and will help software summarize and present the document for the user.
For example: Headers tags - use these to label section headings in your document
HTML example
<h1>this is my page title </h1>List tags -list tags can break up long text into easy to follow logical lists
HTML example
<ul> <li>pencils<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
3. Use titles to summarise the content
Use titles clearly to help users find exactly the page they need.
The page title should describe what is on this page and not a general title of your whole site.
HTML example
<title>Canadian Biodiversity: Species: Mammals: Golden-Mantled Ground Squirrel</title>Titles in the page content should help the user know if they reached the section that they need to read.
HTML example
<head> <h2>section one - how to write an alt tag </h2> </head>In the example the text "how to write an alt tag", let the user know that this is the right section for learning about alt tags. If the heading only said "section one" the user would have to read more to find out if they are in the right section.
4. Add tags and titles to make text clear
HTML contains tags and attributes that can be used to give extra information about text.4.1 Acronyms or abbreviations
The Acronym or abbreviation tag can be used to provide a full version of shortened words or expressions.HTML example
<abbr title="learning disability">LD</abbr>When the user puts their mouse over a shortend word the title will pop up.
4.2 Translations
If you are using quotes or text in a different language , you can provide translations by filling in the title of a lang tag.HTML example
She came in the room with a certain <SPAN lang="fr’ title="style and pananse’>je ne sais quoi</SPAN>.4.3 Jokes and non-literal text
Jokes, sarcasm and other non-literal use of text will be difficult for some people to understand. They may also find non-literal text confusing.Giving all non-literal text the class "nonLiteral" will alert the user that this text is not to be taken literally. A CSS style can enhance the effect by formatting all text tagged as non- literal in italics or in a different color. (see using style sheets to create clear content). By filling in the title tag you can provide a clear text alternative.
HTML example
<p>After sending of the form <span class ="nonLiteral" title= "and we will contact you within one business day" > hold your breath and we will contact you before you can say Jimminy Kricket </span> <p>4.4 Summaries and simplifications
Title attributes can also be used to provide a summary for complex information, sections and phrases. Put difficult phrases, sentences and words that the user may not know in a span or div tag. Put a clear, easy to understand alternative in the title of the tag and set the class of the tag to "complex". The browser will then be able to present complex content in italics or other format. This will alert the user and assistive technologies that a simplification is available.
HTML example
<p> note that <span class ="complex" title= "Children need good schools if they are to learn properly" > Restricting oneself to the use of monosyllabic presentations for the purpose of clarification of complex conceptualizations enables more understandability to become a part of the intercommunicational experience. </span> </p>4.5 Use links
Link difficult or important terms to take the user to simple explanations and glossary entries. Using LD Web class "glossary" will allow the browser to present complex content in italics or other format. This will alert the user and assistive technologies that a simplification or explanation is available.5 Be consistent
Not everyone will find it easy to learn how to use your site and where to find information. You can help the use of the site if you:- Use the same layout across your pages.
- Use the same presentation across your pages -this can be done by using a style sheet to control presentation.
- Mark and present similar types of content consistently across your pages by using tags and presentaion in a predictable fashion. So if you are using a format for links one page, use the same format for links across your site
6. Set easy to read style defaults for your page
HTML with consistent tags and a style sheet attached can be used to make a page easy to read and follow. See using style sheets to create clear content See a sample style sheets to create clear contentHow to attach a style sheet to your page: