<abbr> tag uses "title" and currently fails the title attribute scenario
sbeaumontweb opened this issue · 6 comments
Summary
<abbr> tags, as standard, use a "title" attribute to provide an expanded version of an abbreviation: https://www.w3.org/TR/html52/textlevel-semantics.html#the-abbr-element
Currently, unexpected failures are happening on our abbreviation tags because the current code does not include in the whitelist for tags that are allowed to use a "title": https://github.com/bbc/bbc-a11y/blob/8ccd025ba26b3b11cc22aafdb81ed6b04a566c21/lib/standards/tests/titleAttributesOnlyOnInputs.js
Expected Behaviour
<abbr title="Sophie Beaumont">Sophie</abbr>
Should not trigger a failure of the scenario "Non-input element has title attribute", as <abbr> with a title is semantically correct, and screen readers will read out the title of the tag instead of the abbreviation.**
Current Behaviour
Non-input element has title attribute: //div[@id='u765878345439809']/div/div[2]/div/div/div/div[2]/ul[1]/li[13]/span[2]/abbr
Above error occurs in any situation where <abbr> tag is used with a title attribute.
Possible Solution
Add <abbr> to the whitelist in the above mentioned test.
Context & Motivation
We use a list of players in our Lineups for our scorecard pages: https://www.test.bbc.co.uk/sport/rugby-union/match/EVP2632964
Each player's name uses an <abbr> tag which allows us to use a shortened version of the name for visual display purposes only. (No truncation or wrap needed on mobile breakpoint)
Thanks. :)
Hi @sbeaumontweb
Thanks for raising the issue.
Your possible solution looks like the best! Do you want to raise a PR to fix it?
Thanks!
" and screen readers will read out the title of the tag instead of the abbreviation."
I should rectify this incomplete statement - screen reader settings can be changed as such that they read out the title of the abbreviation instead of the content of the tag. Some are set this way by default (VO) and some not. However, responsible use of the title attribute by the standards (don't repeat information or use for critical information) shouldn't harm accessibility as the information inside the tag would still be valid.
Most AT won’t read the title which is probably a good thing as the information is intended to be suppmental not critical.
If it’s important information a label would be more appropriate. If it’s fluff that also isn’t present visually, I don’t understand what it’s there for.
The test cannot check for appropriate or contextual use so I am very hesident to consider it a complete test.
At the least I think this should warn the user to check or ask themselves the question on if the content in the title is essential to understanding the content / context.
This has been written about a fair bit in other places:
https://openinclusion.com/blog/presenting-abbreviations-acronyms-for-screen-reader-users/
This answer also links out to the spec and the various comments about relying on titles on abbr etc.
https://stackoverflow.com/a/32892825
Some additional views and comments from twitter here: https://twitter.com/jamieknight/status/1069581095128231936?s=21
BBC-a11y isn’t a validator of the specification. It’s a tool which tries to help teams deliver great experiences.
While an abbr and optional title fall within the spec, the risk of misuse and the relatively edge case nature may make it simpler to do without then.
I’d support moving it from an error to a warning, as an in between position.
Moving my comment here, as suggested on #283 (missed that, sorry).
@JamieKnightBBC as you know, the <abbr> tag is intended to be used for any type of abbreviation, when appropriate. And using a title attribute to expand or define is encouraged (https://www.w3.org/TR/WCAG20-TECHS/H28.html). This does not preclude the need for the expanded version to be used earlier or elsewhere in the content to assist understanding, or the addition of an aria-label attribute to improve screen reader pronunciation of the element content when necessary.
MAG states "Tooltips must not repeat link text or other alternatives" meaning text alternatives (https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/text-equivalents/tooltips-and-supplementary-information).
I don't think a title attribute on an <abbr> element should flag up as a bbc-a11y accessibility fail unless it is repeating the text content of the element, as it is not critical information.
That said...
@sbeaumontweb not all abbreviations require <abbr>, which can break screen reader flow. Flow example, commonly known acronyms like BBC and NATO are usually fine without them. <abbr> tags are not interactive by default, so a keyboard or switch user cannot trigger the tooltip that some mouse users may see, though only if they hover for long enough. And most screen reader users won't hear the title attribute, for a variety of reasons. Essentially, many users will never access the title attribute, so it has limited purpose.
Both the links Jamie flagged up are good to read, in regard rethinking the approach: https://stackoverflow.com/questions/32888344/abbr-element-aria-label-or-title-attribute and https://openinclusion.com/blog/presenting-abbreviations-acronyms-for-screen-reader-users/.
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.
This issue was closed because it has been stalled for 5 days with no activity.