Fixing Common Accessibility Errors

While there were several issues impacting the accessibility score, accessiBe proved great help by pinpointing specific areas for improvements. This guidance enabled me to learn effectively and address these issues, enhancing the websites' accessibility.

Error #1: Missing Alternative Text For Images
Understanding why we use specific coding practices, like alt text for images, is essential. Simply using alt="image" doesn't help screen reader users, as it fails to describe the image's content or purpose, highlighting the need for meaningful and descriptive alt text.

<img src="example.png" alt="image of a...."/>

Error #2: Empty Links
Empty links, which were found in nearly half of the websites audited, present accessibility issues, especially for screen reader users. For instance, an Instagram logo without a screen reader label creates an empty link. This fix is easy: adding a descriptive label to a link significantly improves accessibility by providing context and meaning for non-sighted users.

Error #3: Empty Buttons
Empty buttons, similar to empty links, can be frustrating and inaccessible, for instance when users click them expecting a form submission or interaction but nothing happens. This lack of functionality can lead to user exit. For screen readers, it's important that buttons contain text. When an image is used within a button, adding an alt attribute is crucial to ensure the button's function is communicated clearly to screen reader users, thereby creating a functional and accessible experience.

<button type="submit">
  <img src="/search.svg" alt="Search" />
</button>

Error #5: Missing Form Inputs
Over the past three years, low contrast text has been a major accessibility issue, with about 80% of websites affected. This problem, however, is relatively easy to fix. There are plenty of online tool where you can quickly check a web page's color contrast, helping to ensure text is easily readable and meets accessibility standards.