3 ms·

While there's nothing stopping this technique from being accessible in principle, the example given in the article is a really bad one. The article uses "Email

While there's nothing stopping this technique from being accessible in principle, the example given in the article is a really bad one. The article uses "Email us!" as the label on the svg and a elements, which effectively hides the actual email address from screen readers. Using aria labels in this way is a really bad practice, a screen reader user should have the same experience as anybody else unless there's a very good reason to do otherwise, and if you think your reason is a good reason, you're probably wrong. The proper way to do this would be to put the actual email address in the labels,.

47282847 2y ago
Isn’t the whole point of the exercise to not have the document contain the email address in a (machine-)readable format?
- Doe-_ 2y ago
  The email address wouldn't be in the document directly, only in the SVG. Whether the title of the SVG contains "Email us" or the email address wouldn't affect how it works. If the scrapper is searching the DOM rather than simply downloading the webpages, then the email will found regardless.
- janosdebugs 2y ago
  The NVDA screen reader reads this text as: "This is my email frame link email us." That is by no means equivalent to actually seeing the email address. I found that HTML entity encoding every single character of the link takes care of any spam problem already and is much more accessible.
- miki123211 2y ago
  Being accessible and behind machine-unreadable are literal opposites. A screen reader is not that different from an ad blocker or web scraper in how it accesses content. There's a reason that many end-to-end testing experts recommend writing selectors based on accessibility labels instead of CSS classes or IDs, especially if you're using a library like Styled Components.
matteason 2y ago
This can also affect voice dictation software like Dragon - if a user says 'Click myemail@mydomain.tld' it won't activate the link as Dragon is expecting 'Click email us', as that's now what the browser exposes as the link text. That point might be academic anyway as I'm not sure Dragon would activate a link inside an SVG

47282847 2y ago

Isn’t the whole point of the exercise to not have the document contain the email address in a (machine-)readable format?

Doe-_ 2y ago
The email address wouldn't be in the document directly, only in the SVG. Whether the title of the SVG contains "Email us" or the email address wouldn't affect how it works. If the scrapper is searching the DOM rather than simply downloading the webpages, then the email will found regardless.
janosdebugs 2y ago
The NVDA screen reader reads this text as: "This is my email frame link email us." That is by no means equivalent to actually seeing the email address. I found that HTML entity encoding every single character of the link takes care of any spam problem already and is much more accessible.
miki123211 2y ago
Being accessible and behind machine-unreadable are literal opposites. A screen reader is not that different from an ad blocker or web scraper in how it accesses content. There's a reason that many end-to-end testing experts recommend writing selectors based on accessibility labels instead of CSS classes or IDs, especially if you're using a library like Styled Components.

matteason 2y ago

This can also affect voice dictation software like Dragon - if a user says 'Click myemail@mydomain.tld' it won't activate the link as Dragon is expecting 'Click email us', as that's now what the browser exposes as the link text. That point might be academic anyway as I'm not sure Dragon would activate a link inside an SVG