Accessibility Conformance Report for Demo report

Image lacks descriptive alt text

Problem

The image within the article does not have descriptive alt text. Leaving it empty or missing in this context can make it difficult for users relying on screen readers to understand the content of the image.

The image is marked up like this:

<img src="awesome_cat.jpg" alt="" />

Solution

Provide a descriptive alt text for the image to ensure it is accessible to users relying on screen readers. The alt attribute should describe the content and function of the image, like this:

<img src="awesome_cat.jpg" alt="A cute cat lounging comfortably" />

Descriptive alt text helps convey the information or function of the image to users who cannot see it, thereby improving accessibility and compliance with WCAG guidelines.

Call-to-action link does not work with keyboard

Problem

The call-to-action link within the header section does not work with just a keyboard, which violates WCAG Success Criterion 2.1.1 (Keyboard Accessible). The button is marked up link this:

<div class="link" onClick="navigateCallToAction()">
  Get a Quote!
</div>

Solution

Use <a> tags for links, and use the href attribute for the location to link to, like this:

<a class="link" href="/request-a-quote" >Get a Quote!</a>

The <a>-tag works with keyboard out of the box, does not rely on JavaScript and makes it easier for search engines to understand what is going on.

Required fields lack clear indication

Problem

The form inputs within the form section have required fields, but there is no clear indication that these fields are required, which violates WCAG Success Criterion 3.3.1 (Error Identification). The inputs are marked up like this:

<div class="input-field">
  <label for="fullname">Fullname:</label>
  <input type="text" id="fullname" required />
</div>
<div class="input-field">
  <label for="email">Email:</label>
  <input type="email" id="email" required />
</div>

Solution

Clearly indicate which fields are required by adding a visual cue such as an asterisk (*) next to the field labels and providing a note that explains the meaning of the asterisk. The updated markup should look like this:

<div class="input-field">
  <label for="fullname"
    >Fullname: <span aria-hidden="true">(Required)</span></label
  >
  <input type="text" id="fullname" required />
</div>
<div class="input-field">
  <label for="email">Email: <span aria-hidden="true">(Required)</span></label>
  <input type="email" id="email" required />
</div>

The addition of the asterisk next to the required field labels and an explanatory note improves form usability by making it clear to all users which fields are mandatory, thereby enhancing accessibility and compliance with WCAG guidelines.

Buttons lack accessible name

Problem

The buttons do not have accessible name. Currently only icons are used, which can be confusing for users who rely on screen readers to navigate the page. Every interactive element must have an accessible name that describes its purpose or function.

The buttons are marked up like this:

<button class="btn" onclick="search()">
 🔎
</button>
<button class="btn" onclick="submitForm()">
 📨
</button>

Solution

Provide accessible text for the buttons using aria-label attributes to ensure they are accessible to screen readers. The updated markup should look like this:

<button class="btn" onclick="search()" aria-label="Search">
 🔎
</button>
<button class="btn" onclick="submitForm()" aria-label="Submit Form">
 📨
</button>