annika, (edited )
@annika@xoxo.zone avatar

What's the "correct" way to label an image (specifically an SVG) inside a link, when there is no other link text? 🤔 Firefox's accessibility audit complains if I don't label both. Would I do like "Link to annika@xoxo.zone on Mastodon" as the <a> title and "Mastodon logo" as the svg <title> element?

loke,
@loke@functional.cafe avatar

@annika Can you add a <label> element and use CSS to only show it on screen reader devices?

annika,
@annika@xoxo.zone avatar

@loke hmm MDN says "Don't place interactive elements such as anchors or buttons inside a label" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label I feel like labels are really strongly associated with form fields?

loke,
@loke@functional.cafe avatar

@annika You can use <label for="some-element">This is the label</label> and put in anywhere actually. The warning talks about you not putting interactive elements inside the label itself, at least that's how I read it.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • DreamBathrooms
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • osvaldo12
  • slotface
  • khanakhh
  • kavyap
  • InstantRegret
  • Durango
  • provamag3
  • everett
  • cisconetworking
  • Leos
  • normalnudes
  • cubers
  • modclub
  • ngwrru68w68
  • tacticalgear
  • megavids
  • anitta
  • tester
  • JUstTest
  • lostlight
  • All magazines