• I’m wondering if <abbr> elements should get tagged as a warning if most browsers add underline/dotted underline as its style by default. If so, what is the ideal way to keep this from happening?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author williampatton

    (@williampatton)

    Hey @gslweb,

    Thanks for the question, just to confirm what you are asking/suggesting is that if a style exists to underline <abbr> tags exists then to flag it as a warning of some type?

    I will double check that with someone about how best to handle that and get back to you – but my initial feeling is that we likely don’t want to show a warning for an expected browser experience with those tags.

    Thread Starter Gerson Lacdao

    (@gslweb)

    Accessibility Checker already flags <abbr> elements because it natively has the underline text decoration set by at least all the browsers I’ve tested with. I’m asking if this should be flagged as a warning. I understand that putting underline to elements that aren’t links definitely warrants at least a warning, but if there’s anything I recall about <abbr> elements is that they always have a dotted underline.

    If this indeed deserves a warning flag, what is the best way to style <abbr> elements that wouldn’t raise any alert from the plugin?

    Plugin Contributor Amber Hinds

    (@alh0319)

    Hi @gslweb,

    Honestly, I’m on the fence about this. Yes, abbr tags are underlined by default in the browser, but they don’t actually function like a link and this could be confusing to some users who might try to click on them and not get any functionality. In Chrome, there’s a change in cursor to a question mark when hovering over an <abbr> tag, but there’s not a way to actually reveal the abbreviation unless you code that functionality into the website. There is also zero screen reader support for the abbr tag.

    So, we could explicitly exclude this tag from our underlined text warning, but I would actually only want to do that if we added a new warning at the same time: “Use of abbr tag” that tells people they shouldn’t use this tag unless they have written JavaScript functionality to ensure all users have access to the definition. Generally, it’s better to define words on the page or in a linked glossary. I’d avoid the use of the <abbr> tag.

    We can add an issue to create a unique warning for that if you think it would be beneficial.

    Plugin Contributor Amber Hinds

    (@alh0319)

    As a follow up to the original question, “what is the best way to stop the warning from getting flagged,” I would remove the <abbr> tag and replace it with visible explanation for the abbreviation on the page. (I.e. “Web Content Accessibility Guidelines (WCAG)”).

    If that’s not possible, then there are two other options: (A) add CSS styles targeting abbr elements that remove the underline; or (B) make your abbr accessible and then ignore the warning in Accessibility Checker so it stops showing in reports.

    Plugin Author williampatton

    (@williampatton)

    I think that this thread has answers for the questions asked so I am going to mark it as resolved – but if you have any other questions feel free to post them here and I will make sure that they get answers.

    Thank you for the question!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.