Accessibility issues with blog posts on homepage.

[Guy-Sowden]

What Happened?

1. 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; }

2. 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.