Test Blog ARIA

(Heading 2)

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.

George Washington

George Washington

(Alt text=”George Washington”)

example image
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.

 

Decorative Images

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.

example image

Footer text here.

 

https://webaim.org/resources/contrastchecker/


Sample Table with Table Headers (this is the caption)
Name Favorite Color Favorite Number
Alice Green 7
Bob Blue 42

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)

 ARIA LABELS


<label for=”name”>Name:</label>
<input id=”name” type=”text” name=”textfield”>

 

Select your pizza toppings:








<fieldset>
<legend>Select your pizza toppings:</legend>
<input id=”ham” type=”checkbox” name=”toppings” value=”ham”>
<label for=”ham”>Ham</label><br>
<input id=”pepperoni” type=”checkbox” name=”toppings” value=”pepperoni”>
<label for=”pepperoni”>Pepperoni</label><br>
<input id=”mushrooms” type=”checkbox” name=”toppings” value=”mushrooms”>
<label for=”mushrooms”>Mushrooms</label><br>
<input id=”olives” type=”checkbox” name=”toppings” value=”olives”>
<label for=”olives”>Olives</label>
</fieldset>

 

Choose a shipping method:






 

<fieldset>
<legend>Choose a shipping method:</legend>
<input id=”overnight” type=”radio” name=”shipping” value=”overnight”>
<label for=”overnight”>Overnight</label><br>
<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”>
<label for=”ground”>Ground</label>
</fieldset>


 

aria-labelledby

A

With aria-labelledby, the form field indicates which element labels it by referencing its id attribute:

<input aria-labelledby=”fnamelabel”> 

The form control declares, “I am a control labeled by this element”.


aria-describedby

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”
<br>
<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-labelledby, the aria-describedby attribute points to the id of the element that contains the password requirements.


Invisible Labels

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.

 

Hidden <label>

Hide the <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

title attribute

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 <label> or title or aria-label when a visible text label is not available.

 

 

https://webaim.org/articles/jaws/

SiteImprove

WAVE