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.

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 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 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">

1.3.4 Meta Viewpoint

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">

1.3.4 CSS Orientation

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