The image within the article has an empty alt attribute. An empty alt marks an image as decorative, so screen readers skip it. Here the image carries meaning, which leaves users who rely on a screen reader without the information sighted readers get from it.

The image is marked up like this:

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

Recommendation

Provide a descriptive alt text. The text should convey the content and function of the image in the context of the article:

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

Reserve an empty alt for images that are purely decorative and add nothing to the content.

The call to action in the header only reacts to a mouse click. It is a div with a click handler, so it is not in the tab order and does not respond to Enter or Space. Keyboard users and screen reader users cannot reach it at all.

The call to action is marked up like this:

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

Recommendation

Use an a element for navigation and put the destination in the href attribute:

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

A link is focusable and keyboard operable out of the box, works without JavaScript and tells assistive technology and search engines what it does.

The contact form contains a custom dropdown that is not reachable with the keyboard. Users who depend on keyboard navigation cannot fully complete the form.

Recommendation

Use a standard HTML <select> element or ensure the custom dropdown is fully operable with the keyboard, including proper ARIA attributes and keyboard interaction.

The homepage is missing a visible focus style on multiple interactive elements, including navigation links and buttons. This makes it unclear for keyboard users which element has focus.

Recommendation

Add a clearly visible focus style to all interactive elements. Use CSS :focus-visible to show a focus indicator that meets the minimum contrast ratio of 3:1 against the background.

The contact form has fields that must be filled in, but nothing tells users which ones. Only after submitting do they learn that the name and e-mail fields were required, which is confusing for everyone and especially for people with cognitive disabilities.

The fields 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>

Recommendation

Say in the label which fields are required, so the instruction is visible before the field is used and is read out by screen readers together with the label:

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

If an asterisk is used instead, explain its meaning once at the top of the form.

The search and submit buttons on the product overview contain only an emoji. Screen readers announce them as "magnifying glass, button" and "envelope, button" or as an unnamed button, so users cannot tell what the buttons do.

The buttons are marked up like this:

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

Recommendation

Give every control an accessible name that describes its purpose. Hide the emoji from assistive technology and add the name with aria-label:

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

Visible text next to the icon is better still, because it helps everyone and is picked up by speech control software.