Accessibility Issues in home-assistant.io

While finding out how to install Home Assistant in a Podman container (VyOS uses Podman), I noticed contrast issues in the web page. I simulated contrast loss in Firefox and this is the result:

The blue text (#1abcf2) does fit in nicely with the Home Assistant logo, but for people suffering from loss of contrast sensitivity such as not being able to tell a black coffee mug from a black countertop or walking out at night, the light blue text against a white background (#ffffff) has a contrast ratio of 2.2:1, well below the minimum threshold of 4.5:1. This is also true for people with visual disability such as myself and I only have one good right eye (I’m blind in my left eye but do have light perception).

And by the way, I use Axe DevTools from Deque (pronounced D Q) to do accessibility testing. The web page that I linked above contained 80 issues. The three main issues is color contrast, lack of alternative text in images, and links lacking accessible labels.

axe DevTools is available for modern web browsers such as Chrome, Edge, and Firefox.

Here’s an example of images lacking alternative text:

<img src="homeassistant.jpg">

Here’s an example of a link that has a image that is considered decorative, but lacks an accessible label:

<a href="homeassistant.html"><img src="homeassistant.jpg" alt=""></a>

An ARIA (Accessible-Rich Internet Application) attribute such as aria-label can be used, but do remember that no ARIA is better than bad ARIA. Plus, images with alternate text do not need the word “logo” as that would be considered redundant. If the image’s alternate text states “Home Assistant logo,” screen readers would speak “logo Home Assistant logo” or “Home Assistant logo logo” if there’s a <logo> tag. In other words, images must state the purpose (“why are they there?”), not tell what the content is about. WCAG 2.2 Success Criterion 1.1.1 has more information about different types of images.

WCAG: Web Content Accessibility Guidelines (just wanted to pass Success Criterion 3.1.4 even though that’s a triple-A standard)

I hope I can be of help. Please let me know if you have any questions. I’m only volunteering to help make the website accessible for people with disabilities.

The Nabu Casa team are very proactive about making Home Assistant accessible to everyone. Could you please report this issue here:

Alternatively there are feedback links at the bottom of every documentation page.

1 Like

Oh! Thank you for letting me know. I will do that.

1 Like

Just wanted to make a new post instead of editing my previous post.

I have created a new issue for the Home Assistant website here:

Update: Maybe I should edit my post instead of making a new one.

I would like to know how does anyone like the list of issues that I found in home-assistant.io website. Plus, I am wondering if anyone with attention-deficit disorders found animated images distracting on this page?

I thought about covering this as part of manual testing as it fails WCAG Success Criterion 2.2.2, but I’m going to take a break and come back another time so I can find more issues through automated testing.

1 Like