elementary
Accessibility issues with blog posts on homepage.
What Happened?
- the div .featured .with-image used for blog posts on the homepage, lacks focus indicators making it difficult to use for users who rely on a keyboard for navigation to use.
From web aim: A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus.
i think the best solution for this might be css on the lines of this
.featured.with-image{ border: solid black 3px; }
- the alt tags used to describe the image for blog posts currently reads "Featured image" this fails to portray any relevant or important context.
From web aim (alt="") would probably be most appropriate in this case because the image does not convey relevant or important content. https://webaim.org/techniques/alttext/
<div class="featured-image" alt="" style="background-image: url(https://blog.elementary.io/images/os-6-updates-for-august-2021/card.png);"></div>
Steps to Reproduce
tried to navigate the home page using the keyboard.
Expected Behavior
focus indicators used always be visible when an element is a focus. and all images should have a meaningful alt description.
OS Version
Other Linux
Software Version
Older release (I have not run all updates)
Log Output
No response
Hardware Info
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36
tested on the production version of the home page.
