Jaguar (Heading 3)
Tiger (Heading 3)
Small Cats (Heading 2)
Persian Cat (Heading 3)
Siamese Cat (Heading 3)
- Add new headings as needed to match the topics and subtopics of your document.
- Don’t skip down past heading levels. For example, a Heading 3 shouldn’t exist unless it’s under a Heading 2 section.
- For webpages, there should only be a single Heading 1, used for the page title.
Avoid linking entire sentences or long phrases. Also, avoid meaningless labels on links such as “click here” or “read more”. It is best to use the title of the destination as the linked text. Some screen readers allow users to scan just the links on a page, so the link text should still make sense out of context.
Users that rely on screen readers need additional information that describes all images & photos. This description is called Alt Text.
Alt Text Tips
- The Alt Text should be brief, but also still explain in words the same information that is communicated by the image. Describe the purpose and function of the image, not just describe its appearance.
- Don’t begin with “Photo of…”
BEFORE: “Photo of College mascot”
AFTER: “College mascot”
- Avoid having redundant Alt Text that matches nearby text
- NOT be redundant or provide the same information as text within the context of the image. Example, portrait painting with the subject’s name beneath the image. Usinging alt=” ” would suffice.
(Alt text=”George Washington”)
In this case, both the content and function of the link and image are presented within the link, so the image can be given
alt="" to avoid any redundancy.
When possible, avoid using “link to…” or “click this image to…” or similar wording in the
alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.
Images that don’t provide information to the reader are considered decorative. A description is not required for these items. Examples may include lines, shapes, textures, or stock photos if they don’t contribute to the topic and don’t give the reader any information.
Content text here.
Footer text here.
|Name||Favorite Color||Favorite Number|
Tips for Tables
- Keep the table layout simple; avoid merging cells
- Always designate the Table Headers
- Describe or label the table in the surrounding text. (Optionally include Alt Text for Word tables or a <caption> for web tables)
<input id=”name” type=”text” name=”textfield”>
<legend>Select your pizza toppings:</legend>
<input id=”ham” type=”checkbox” name=”toppings” value=”ham”>
<input id=”pepperoni” type=”checkbox” name=”toppings” value=”pepperoni”>
<input id=”mushrooms” type=”checkbox” name=”toppings” value=”mushrooms”>
<input id=”olives” type=”checkbox” name=”toppings” value=”olives”>
<legend>Choose a shipping method:</legend>
<input id=”overnight” type=”radio” name=”shipping” value=”overnight”>
<input id=”twoday” type=”radio” name=”shipping” value=”twoday”>
<label for=”twoday”>Two day</label><br>
<input id=”ground” type=”radio” name=”shipping” value=”ground”>
With aria-labelledby, the form field indicates which element labels it by referencing its id attribute:
The form control declares, “I am a control labeled by this element”.
There are times when a form includes information that isn’t exactly a label but is important enough to be read by a screen reader when navigating to the form control. This additional information can be associated to the form field with the
aria-describedby attribute. For example:
New password must be 8-15 characters and include letters and numbers
<label for=”resetpass”>Reset Password:</label>
<input type=”password” name=”resetpass” id=”resetpass” aria-describedby=”newpass”>
<span id=”newpass”>New password must be 8-15 characters and include letters and numbers</span>
Because there is a single label,
<label> is used rather than
aria-labelledby. As with
aria-describedby attribute points to the
id of the element that contains the password requirements.
There are times when a text label for a form control does not make sense visually. The most common example is the “Search” field. Its location within the page, in conjunction with the Search button, makes its purpose clear to sighted users. Adding a visual text label would be overkill and could negatively impact the site design.
<label> element off-screen using CSS. The label will not appear visually, but will still be read by a screen reader.
<label class=”hidden” for=”s”>Search Terms</label>
<input type=”text” id=”s” name=”s”>
The CSS that is used to hide the label
If a form field has a
title attribute, but no
<label>, the screen reader will read the
title as if it were a label.
<input id=”s” type=”text” name=”s” title=”Search Terms”>
Use a hidden
aria-label when a visible text label is not available.