how to make a section with company logos accessible and semantic
Guys, what can I do to make this section semantic and accessible? Should I put the company logos inside a <ul> and make them have names accessible through the aria-label attribute and use tabindex="0", or should I hide the logos from screen readers and not let them with tabindex?
7 Replies
I'm curious if removing keyboard navigation also removes the accessibility aspect or make the items invisible to screen readers.
But, I wouldn't consider keyboard navigation essential over logos. Using an aria-label should be enough... assuming these two are compatible attributes for your purposes
You can always hide the logos from screen readers and remove keyboard navigation, and add some additional context on the section header "Trusted 1000+ company...". Add a few examples on the aria-label or something maybe?
You're right, there's no point in having keyboard navigation if there aren't links, I think using aria-label is enough.
In fact, I don't think it's even necessary to use aria-label, I can just use alt="" text
I don't really know about that, I'm also curious. But if you can get without it, then for sure try to do that.
screen readers read alt text, either aria-label text or aria-labelledby text
Yeah, I was just reading it on MDN that's good to know. In that case a simple alt tag may do it, I agree.
Just make sure the list doesn't get too long, it may be a bit overwhelming to have the screen reader going through all of the companies listed 😄
maybe a thought: Make 1 screen reader only element that reads out all the names at once (without breaks)