false positive a11y warning for buttons and links without text but with image alt attribute

eltigerchino commented 2 days ago

Describe the bug

https://github.com/sveltejs/svelte/pull/13130 added warnings for buttons and links that do not have an aria-label or inner text. This lead to the lint errors in our SvelteKit default template with Svelte 5, so I opened https://github.com/sveltejs/kit/pull/12697 to address that. However, Geoff suggests that they should use the alt text of the image if available (see example 1 from the link).

Reproduction

pnpm create svelte my-app and select svelte 5 and eslint as additional options. Lint the project or view the Header component to see the lint error if you have the plugin installed.

Logs

No response

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 63.47 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/Library/pnpm/node
    npm: 10.5.2 - ~/Library/pnpm/npm
    pnpm: 9.11.0 - ~/Library/pnpm/pnpm
    bun: 1.1.26 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 128.0.6613.113
    Chrome Canary: 130.0.6687.0
    Safari: 18.1
    Safari Technology Preview: 18.0
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.257

Severity

annoyance

jackvanderbilt-visma commented 1 day ago

The warnings are not false positives as claimed in the title of this issue. Using the alt of the image would lead to less accessible UIs, as the alt is used to describe the image and aria-label to describe the function of an interactive element on screen readers.

Google or ask ChatGTP:

Here's the difference between aria-label on <a> and alt on <img>:

1. `aria-label` on `<a>` (Anchor Tag)

Purpose: Provides an accessible name for the link, improving screen reader accessibility by describing the purpose of the link.
Usage: Use aria-label to give a more descriptive explanation than what is in the visible text, or if there is no visible text at all.

Example:
```
<a href="download/report.pdf" aria-label="Download the annual report PDF">Download</a>
```
In this example, the visible text just says "Download," but the aria-label provides more specific information for screen readers.
When to use: When the link text is not clear enough on its own or when the link contains an icon with no visible text (e.g., a download icon).

2. `alt` on `<img>` (Image Tag)

Purpose: Provides alternative text for images. Screen readers use this text to describe images to visually impaired users, and it displays if the image fails to load.

Usage: Use alt to briefly describe the content or function of the image.

Example:

<img src="team.jpg" alt="A group of colleagues discussing a project in an office">

When to use: Always add alt text to images, especially those that carry content or serve a functional purpose.

Key Differences:

aria-label: Used to provide accessible descriptions for interactive elements like links or buttons.
alt: Used specifically to describe images or graphics, especially for those who cannot view them.

eltigerchino commented 23 hours ago

It begs the questions though, why the W3 site recommends using the image alt instead: https://www.w3.org/WAI/tutorials/images/functional/#example-1-image-used-alone-as-a-linked-logo

brunnerh commented 22 hours ago

I also find the approach a bit weird (I would prefer labeling the link directly instead), but this is fine accessibility-wise. The alt text will be used as the effective label of the link.

alt text on icons in general should not be used to describe the image but rather the function or should simply be omitted if other elements/texts already provide the relevant context.

Ideally Svelte should be able to handle all valid cases correctly, regardless of where the label comes from in the end.

sveltejs / svelte