WCAG 2.0 - 9 HTML Accessibility Tips - TNG Consulting Inc. Ottawa Canada

Multilingual Website

If your website had content in more than one language, be sure to identify the default language of the page using the HTML tag itself. For example, if your page is in XHTML, you would use:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

If you are working in HTML5, you can drop the xmlns and xml:lang parameters:

<html lang="fr">

Mixed Language in Same Page

If you have mixed language text in a page, such as an English link or English company name on a French page, use English content to allow devices like screen readers to properly pronounce text in other languages.

Multiple Language Pages

For pages such as language selection pages, add the lang="xx" tag to some of the other meta tags including dc.title, dc.subject, description and keywords. This will help search engines associate the right keywords and descriptions with searches and results. You'll need a meta tag for each language.

Frontload ALT-Text with important words

For example: alt="Photo: descriptive text".

To Emphasize Strongly

Use instead of . Use when you want to only increase weight of font but not the volume when read by a screen reader.

To Italicize Text

Use instead of the depreciated .

For Javascript Links

Use self-referencing links. Example: <a href="#me" id="me" onclick="javascript:…">…</a>

Forms

Use label to group related elements together. The following example connects the caption with it's associated field. You'll know it is working properly if you click on the caption and the focus of the cursor jumps to the associated field.

<form>
    <fieldset>
        <legend>Feedback Form</legend>
        <label for="name">Name</label><br>
        <input type="text" name="name" id="name"><br>
        <label for="email">Email</label><br>
        <input type="text" name="email" id="email"><br>
        <label for="subject">Subject</label><br>
        <input type="text" name="subject" id="subject"><br>
        <label for="feedback">Message</label><br>
        <textarea name="message" id="message"></textarea><br>
        <input type="submit" value="Submit Feedback"> 
    </fieldset>
</form>

Using Expandable (sometimes called accordion) Text

Load the page with all of the the text showing and then use Javascript to hide it as soon as the page is finished loading.

Should the Javascript fail for any reason (Javascript disabled for example), visitors will still be able to access all of the content on the page.

Popup Calendar

Be aware that the jQuery Datepicker is not WCAG 2.0 Level AA compliant as it cannot be used without a mouse. Hopefully this issue will eventually be addressed.