elementary / elementary/website

Accessibility issues with blog posts on homepage.

Open
#2,849 0 comments 0 reactions 0 assignees View on GitHub
a11y
Dominant language
PHP
Stars
1.3k
Forks
716
Avg merge
12h 45m
Merged PRs (30d)
23

Description

### 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/

`

`

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.