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 <span lang="en">English content</span> 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 <strong> instead of <b>. Use <b> when you want to only increase weight of font but not the volume when read by a screen reader.
To Italicize Text
Use <em> instead of the depreciated <i>.
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.
Add a comment: