HTML elements used to support your content

HTML/XHTML code provides a number of elements which can be used to make your content more accessible. They will have no visual effect upon your page but will particularly help screen readers and other assistive software to understand your content.


The world-wide-web is a global medium and not everyone uses the English language. To let screen readers and robots know which language your pages are written in it is necessary to specify the language by adding the lang attribute to the opening HTML element. For example <html lang="en">. It is important to add this language attribute to the opening <html> element for every page on your web site as screen readers use it to make sure that they pronounce the words correctly. Search engines, such as Google, also use it to help them catalogue your site correctly.

If you use a different language within a page (for example include a phrase in French) you need to specify that you are doing so by using the lang attribute where this happens, with the relevant language value. For example <p lang=”fr”>Au revoir mes enfants</p>.

For individual words or phrases you will need to use the <span> element, but you can add the lang attribute to most block items such as paragraphs <p>, Lists <ul> and headings (h1 - h6) if the whole block is in a different language to the main language used on your site.

Abbreviations and Acronyms

It is good practice to always expand or explain an abbreviation the first time it appears on a page. For example we might say “Standards are set by the World-Wide-Web Consortium (W3C)” and then later in the text we need only refer to the “W3C” and expect our readers to understand that we mean the consortium. However there may be a reason why you are not able to do this, or you may think that the majority of your readers will understand the abbreviated form without the need to expand it. In these circumstances it is possible to use the <abbr> element to hide the full title from visual users unless they want to see it by focusing on the abbreviation. For example the code <abbr title="world wide web consortium">W3C</abbr> would only display "W3C" on the screen (some browsers may also display a dotted underline). A user can hover the mouse cursor over the abbreviation (W3C) to see the full name. Unfortunately this solution is not fully compatible with all screen readers and is difficult for keyboard users to manage (i.e. those without a mouse) so it is best to only use it if it really is impossible to provide the full title or name of the organisation in the body of the text.

Acronyms such as “NATO” or “scuba” are abbreviations that are pronounceable. These can be treated in the same way as abbreviations but using the <acronym> element instead. There is a much stronger case for using the acronym element as it is less likely that you would want to write the full title in your text. The code example here would be as follows,
<acronym title="self-contained underwater breathing apparatus ">scuba</acronym>.

The use of these two elements does help people with learning disabilities and those who have English as a second language. However people who use the keyboard with a standard browser such as Internet Explorer can have problems accessing the title attribute, so if the full name is important to your content it must still be presented as text the first time you use the abbreviation or acronym.

Quote, Cite and Blockquote

These three elements (<q>, <cite> & <blockquote>) are primarily for research purposes (they enable academics to find out how often a piece of research has been referred to, or how often a professor has been quoted within academic circles). These elements should not be used for creating a style such as putting speech marks around a piece of text. (in fact Internet explorer doesn’t do this properly anyway). If you are not running an academic research website then please do not use these elements. If you are running an academic website then these elements allow you to make sure that the proper credit is given to researchers and authors.

Punctuation and Grammar

The way that you use punctuation can have real benefit to people who use screen readers. For example, if you forget to finish a sentence with a full stop a screen reader will just keep reading the text of the next sentence as if it was a all one continuous sentence. Sighted users might guess that a new sentence has started by seeing the capital letter at the start of the new sentence, blind users do not get these visual clues.

Using brackets (parenthesis) can disrupt the flow of a screen reader because it reads out the bracket as "left parenthesis" text "right parenthasis". For this reason it is usually better to use a comma instead of brackets. Another annoying punctuation is the use of the vertical bar " | " or diagonal slash " / " to separate words and phrases. These may look "neat" on the page, but screen readers pronounce them as "bar" and "slash" without pausing. This can make your text meaningless at best, or rude at worst !

It is very tempting, in our hurry to get published, to forget the importance of accurate spelling and grammar. This is a big mistake as it reflects badly on your personal competence and makes your content harder for assistive software to understand and present properly to disabled visitors.