Resolving website WCAG 2.2 accessibility issues

1.1.1 Non-text content

Every image, icon, or other non-text element must include a text description that conveys the same information or function.

Resolving presentational roles and hidden states on decorative content

Decorative graphics and non-text content that do not convey meaningful information should be hidden from assistive technologies, such as screen readers. This allows assistive technology users to focus on meaningful content.

In the HTML code, identify decorative content that does not provide meaningful information or functionality.

1. For decorative <svg> elements, add the attribute aria-hidden="true" to the <svg> element.

2. For other decorative non-text content, such as an <img> used only as a border, an <object> used for styling only, or an <area> used for visual effects, add the attribute role="presentation".

3. If the decorative non-text element already has a role attribute, replace it with role="presentation".

Example

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Audio-only and video-only (prerecorded)

Any prerecorded audio or video without visuals or sound must include a text transcript that provides the same information.

Resolving missing audio transcript issues

Providing a text transcript for audio content ensures that all users, including those who are deaf or hard of hearing, can access the same information.

1. In the HTML code, locate the <audio> element.

2. After the <audio> element, add a <p> element.

3. Within the <p> element, enter the full transcript of the audio content in text form.

Example

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Resolving missing captions in embedded Vimeo videos

Captions must be available in Vimeo videos to ensure accessibility for users who are deaf or hard of hearing. Vimeo allows you to add captions through its video settings.

1. Open the video on vimeo.com.

2. Log in with the account that owns the video.

3. Go to Settings.

4. Select the Distribution tab, then open Subtitles (or Advanced > Subtitles in older layouts).

5. Find the Subtitles/CC section.

6. Upload a .vtt or .srt caption file.

7. Save your changes, then confirm captions are enabled by previewing the video.

Note: Captions will automatically display in the embedded <iframe> if enabled on Vimeo.

Resolving missing captions in embedded YouTube videos

YouTube videos must include captions so users who are deaf or hard of hearing can access the spoken content. YouTube provides options for manual caption uploads or automatic captioning.

1. Open the video on youtube.com with the account that owns the video.

2. Go to YouTube Studio and select the video you want to edit.

3. Click on Subtitles in the left menu.

4. Choose the language for your captions.

5. Click Add and select one of the following:

   • Upload file (for .vtt or .srt files)

   • Auto-sync (paste the full transcript and let YouTube time it)

   • Type manually

6. Review and publish your captions.

1.3.1 Info and relationships

Any information shown through layout, formatting, or visual structure must also be available in text or coded so that assistive technologies can understand it.

Resolving missing ARIA landmark roles in page structure

Landmark roles help screen reader users understand the page layout and quickly navigate to key sections.

1. In your HTML code, locate structural elements (e.g., <div>, <section>, <form>).

2. Add the appropriate ARIA landmark role using the role attribute (e.g., role="main", role="navigation", role="form"). Learn more about the appropriate landmark role.
   Note: Only add ARIA roles if the element does not already have a built-in landmark role (e.g., <nav> already acts as navigation).

Example

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Resolving missing fieldset or group for same-name inputs

Radio buttons or checkboxes that share the same name must be grouped so their relationship is clear. This helps users with screen readers understand that the inputs belong together.

1. In the HTML code, locate radio or checkbox inputs that share the same name attribute.

2. Wrap the related inputs inside a <fieldset> element.

3. Add a <legend> as the first element within the <fieldset> to describe the group.

Alternatively, wrap the inputs in a container with role="group" or role="radiogroup" and provide a label using aria-labelledby or aria-label.

Example

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

Resolving <li> missing a parent element

Ensuring list items are placed inside a list element helps screen readers properly identify grouped content.

1. In the HTML code, locate the <li> elements that are not wrapped in a <ul> or <ol>.

2. Wrap the <li> elements in a <ul> (for bullet points) or <ol> (for numbered list).

Example

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Resolving description lists (DL) structure issues

Description lists are used to show pairs of related information, such as a term and its explanation. When the list is not structured correctly, screen readers may read the content out of order or confuse users.

1. In your HTML code, locate the flagged <dl> elements.

2. Within the <dl>, place the term inside a <dt> element.

3. Within a <dt> element, place the description inside a <dd> element.

4. Remove any other elements that are placed directly inside the <dl> unless they are wrapped inside a <dt> or <dd>.

Example

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Resolving definition terms(DT) and definition descriptions (DD) not contained within a description list (DL)

Definition terms (<dt>) and definition descriptions (<dd>) must always be contained within a description list (<dl>). When <dt> or <dd> elements are used outside of a <dl>, screen readers may read the content out of order or confuse users.

1. In your HTML code, locate the flagged <dt> or <dd> elements.

2. Ensure each <dt> and <dd> is placed within a <dl> element. If the content is not part of a description list, replace <dt> and <dd> with an appropriate element (e.g., <h2>, <h3>, <p>).

Example

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Resolving incorrect use of scope attribute in tables

When a table uses the scope attribute, it must be applied only to header cells (<th>) to clearly define which data cells they relate to. Incorrect or missing scope values can prevent assistive technologies from correctly associating headers with table data. 

1. In your HTML code, locate the flagged scope attribute or table elements.
2. Update the scope attribute to ensure that:
   1. The scope attribute is applied only to <th> elements.
   2. Each <th> has an appropriate scope value, such as col, row, colgroup, or rowgroup.
   3. The value in your scope attribute accurately reflects the table’s structure and relationships.

Example

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Resolving incorrect use of headers attribute by using scope in tables

Tables must contain table data cells (<td>) that are described by table headers (<th>). Tables that include headers but no data cells do not provide meaningful relationships for assistive technologies and can cause confusion for users of screen readers.

In your HTML code, locate the flagged table elements that contain <th> elements but no corresponding <td> elements.

Update the table structure to ensure that:

1. Each table includes one or more <td> elements containing data.

2. <th> elements are used only when they describe actual table data.

3. Tables used only for layout or presentation do not include <th> elements.

4. If the table does not contain data, remove the table or replace it with non-table markup.

Example

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Resolving Improper ARIA Grouping for "group" Role

Proper use of ARIA roles helps screen readers understand the structure of the page, making it easier for users with disabilities to navigate and interact with the content.

1. In the HTML code, locate the element with role="group".

2. Within the element, include at least one interactive control element(e.g., <input>, <textarea>, or <select>).
   Note: Learn more about which interactive control you should include. If there are no suitable interactive controls, consider replacing role="group" with a more appropriate ARIA role or structure.

Example

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Resolving Improper ARIA Grouping for "radiogroup" Role

Proper use of ARIA roles helps screen readers understand the structure of the page, making it easier for users with disabilities to navigate and interact with the content.

1. In the HTML code, locate the element with role="radiogroup".

2. Within the element, include at least one radio button element (e.g., <input type="radio"> or role="radio").

Example

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Resolving Improper ARIA Grouping for "checkbox" Role

Proper use of ARIA roles helps screen readers understand the structure of the page, making it easier for users with disabilities to navigate and interact with the content.

1. In the HTML code, locate <input type="checkbox"> or an element with role="checkbox".

2. Wrap the checkboxes in a container and assign it the role="group".

3. Add an aria-labelledby or aria-label attribute to the element with role="checkbox" to describe the purpose of the checkbox group.

Example

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Resolving Improper ARIA Grouping for "radio" Role

Proper use of ARIA roles helps screen readers understand the structure of the page, making it easier for users with disabilities to navigate and interact with the content.

1. In the HTML code, locate <input type="radio"> or an element with role="radio".

2. Group the radio buttons inside the element with the role="radiogroup".

3. Add an aria-labelledby or aria-label attribute to the element to describe the purpose of the radio group.

Example

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Resolving missing aria-level on heading roles

ARIA heading roles must include a defined heading level for clarity.

1. In the HTML code, locate the element with the attribute role="heading".

2. After the role attribute, add the aria-level attribute with a value from 1 to 6 (e.g.,aria-level="2").

Example

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Resolving missing table headers

Table headers help screen readers understand what each column or row means. If a table does not have headers, assistive technologies cannot give users the right context.

1. In your HTML code, locate the <table> element and identify the first row. This row should define the table's headings (e.g., "Name," "Age," etc.).

2. If the first row uses <td> (table data) elements, change each <td> to a <th> (table header) to indicate that these cells are headers.

3. Add scope="col" to each <th> element if it’s a column header, or scope="row" if it’s a row header.

Example

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Resolving improper list structure

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Resolving meta viewport orientation issues

Viewport settings that lock the screen orientation or disable zoom can make it harder for users to read and interact with content. Allowing both portrait and landscape orientations, as well as zooming, gives users flexibility based on their device and personal needs.

1. In your HTML code, locate the meta name="viewport"tag.
2. Remove any attributes related to orientation restrictions, such as orientation=portrait or orientation=landscape.
3. Remove any attributes that prevent zooming, such as maximum-scale=1 or user-scalable=no.
4. Save your changes and reload the page.

Example

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

Resolving CSS orientation issues

CSS media queries that lock content to portrait or landscape can limit how users interact with a page. Removing these restrictions allows the content to adapt in both orientations.

1. In your CSS code, locate media queries that restrict orientation, such as:
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Remove these orientation-specific media queries to allow the content to adapt freely to both orientations.
3. Save your changes and reload the page.

Example:

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Identify input purpose