search

acdh-oeaw / apis-core-rdf

APIS Core refactored
https://acdh-oeaw.github.io/apis-core-rdf/
MIT License
3 stars 3 forks source link

Accessibility issues with links/icons in footer #1343

Open koeaw opened 4 hours ago

koeaw commented 4 hours ago

The title attributes on the icon links in the footer should get removed/replaced with alt attributes on the images.

That aside, I'm experiencing weird behaviour when hovering the icons: the link destinations aren't shown consistently. In FF (ESR), I thought they randomly disappeared, then realised they flip between the bottom left corner of the browser (default) and the bottom right. In Chrome, they drop "under" the visible browser window. Additionally, the space between the icons seems to get underlined on hover (like text would by default).

A cursory inspection revealed the links themselves aren't the same size as the icons they surround; I'm assuming this contributes to or is the source of the issue.

b1rger commented 3 hours ago

The link attributes for the icon destinations in the footer should get removed/replaced with alt attributes on the images.

Can you post an example? I don't know what you are referring to

koeaw commented 3 hours ago

Can you post an example? I don't know what you are referring to

Sorry, meant to say title attributes! Updated the issue description.

b1rger commented 2 hours ago

Oke, could you explain why it is preferable to have alt attributes instead of title attributes?

koeaw commented 1 hour ago

Oke, could you explain why it is preferable to have alt attributes instead of title attributes?

The HTML specs on title:

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

The HTML specs on alt in the context of links containing nothing but an image:

When an a element that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.

Useful resources which link to more useful resources: https://www.a11yproject.com/posts/title-attributes/ https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html