Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
A great article but in all that research accessibility didn't seem to crop up much....that is very worrying! So to fill in a few gaps that the articles you have read seem to have missed:-
<abbr> has a dual purpose for screen readers.
First it let's them know this is an abbreviation so it can announce it as such.
Second it let's the voice synthesis part of the screen reader know to read it as an abbreviation rather than a word.
This is the key difference between an <abbr> and a <span>.
Also this is why the title attribute is useful (about the only time I would encourage use of the title attribute!) as screen readers can read the title out on abbreviations, so don't leave it off.
Better yet using aria-label will have better screen reader support
<p>The <abbrtitle="World Health Organization"aria-label="World Health Organization">WHO</abbr> was founded in 1948.</p>
Also you should include the whole phrase the first time you use it.1
As for the main premise of the article
Really interesting look into small caps - but as for using them for abbreviations...I would not (yet again for accessibility).
Small caps will be very confusing for people with dyslexia (for example) where differences in letter heights are essential to help legibility - small caps means your capitals end up looking the same size as smaller letters.....
I mean, there are even better ways to handle abbreviations such as creating a glossary / dictionary of terms, but this comment is already massive so I won't weight the merits of different approaches 😋:
Thank you very much for your comments, @inhuofficial
!
My issue with the title attribute is that it gives a different user experience between sighted users and those screen reader users who configure it to read the title attribute value instead of text content.
Take this as an example:
<abbrtitle="World Health Organization">WHO</abbr>
Sighted users don't see the title attribute value (only mouse users can see it if they dare to hover over it). They read "WHO". Screen reader users read it as "World Health Organization". The purpose of abbreviation is to take less time to understand what a phrase means. Screen readers will keep hearing a long phrase of "World Health Organization".
Using aria-label will force screen reader users to hear this expanded phrase, rather than leaving it up to their choice, because aria-label overrides text content (Watson 2017).
Is this accessibility? My gut feeling says no. Correct me if I'm wrong.
I feel that the title attribute assumes that (1) sighted users (subconsciously) read an abbreviation like WHO as "World Health Organization" every time they see it and (2) the purpose of abbreviations is to save space. But this assumption is wrong, at least for common abbreviations. It's so common to hear WHO these days so "W H O" acquires its meaning. Some people probably don't even know what it stands for (but they know what it is), just like I didn't know what AM and PM stand for.
As for small caps, do you know any hard evidence that people with dyslexia find it difficult to read, if it's used for abbreviations such as WHO? Like researchers asking people to read two versions of text, one with small caps, the other without, and comparing how quickly they understand the text.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I will do you one better, I will write my next article on abbreviations, I may have led you down a rabbit hole you don't need to follow as there are much better ways to handle abbreviations and I was trying to keep my comment short(ish!).
I agree on title etc. and the issue with aria-label - it was meant to be a "this is the best option for a quick way to reach WCAG AA level". Glossaries are far more useful and following a couple of rules makes it easy (like I said I will write a whole article on it as there is a lot of explanation even though it is simple and drop you a message when it is done!).
As for small caps - I will admit it is based on general knowledge of how people with dyslexia tend to choose fonts with nearly twice as tall "large letters" such as "t, b" etc. over small letters "o, a" etc. as it tends to aid comprehension.
However I will also admit that thinking about it, the variation in fonts people prefer is large so me generalising that small caps may be confusing may not be correct. I would call it an "educated hypothesis" based on other research 😋.
Unfortunately I would imagine that research into small caps is lacking but I will have a look around!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
A great article but in all that research accessibility didn't seem to crop up much....that is very worrying! So to fill in a few gaps that the articles you have read seem to have missed:-
<abbr>has a dual purpose for screen readers.First it let's them know this is an abbreviation so it can announce it as such.
Second it let's the voice synthesis part of the screen reader know to read it as an abbreviation rather than a word.
This is the key difference between an
<abbr>and a<span>.Also this is why the
titleattribute is useful (about the only time I would encourage use of the title attribute!) as screen readers can read the title out on abbreviations, so don't leave it off.Better yet using
aria-labelwill have better screen reader supportAlso you should include the whole phrase the first time you use it.1
As for the main premise of the article
Really interesting look into small caps - but as for using them for abbreviations...I would not (yet again for accessibility).
Small caps will be very confusing for people with dyslexia (for example) where differences in letter heights are essential to help legibility - small caps means your capitals end up looking the same size as smaller letters.....
You may find these resources useful:
H28: Providing definitions for abbreviations by using the abbr element
MDN abbr tag (much better resource than W3 schools)
I mean, there are even better ways to handle abbreviations such as creating a glossary / dictionary of terms, but this comment is already massive so I won't weight the merits of different approaches 😋:
Linking to definitions
for example
Using the whole phrase first time an abbreviation is encountered: Providing the first use of an abbreviation immediately before or after the expanded form - W3 ↩
Thank you very much for your comments, @inhuofficial !
My issue with the
titleattribute is that it gives a different user experience between sighted users and those screen reader users who configure it to read thetitleattribute value instead of text content.Take this as an example:
Sighted users don't see the
titleattribute value (only mouse users can see it if they dare to hover over it). They read "WHO". Screen reader users read it as "World Health Organization". The purpose of abbreviation is to take less time to understand what a phrase means. Screen readers will keep hearing a long phrase of "World Health Organization".Using
aria-labelwill force screen reader users to hear this expanded phrase, rather than leaving it up to their choice, becausearia-labeloverrides text content (Watson 2017).Is this accessibility? My gut feeling says no. Correct me if I'm wrong.
I feel that the
titleattribute assumes that (1) sighted users (subconsciously) read an abbreviation like WHO as "World Health Organization" every time they see it and (2) the purpose of abbreviations is to save space. But this assumption is wrong, at least for common abbreviations. It's so common to hear WHO these days so "W H O" acquires its meaning. Some people probably don't even know what it stands for (but they know what it is), just like I didn't know what AM and PM stand for.As for small caps, do you know any hard evidence that people with dyslexia find it difficult to read, if it's used for abbreviations such as WHO? Like researchers asking people to read two versions of text, one with small caps, the other without, and comparing how quickly they understand the text.
I will do you one better, I will write my next article on abbreviations, I may have led you down a rabbit hole you don't need to follow as there are much better ways to handle abbreviations and I was trying to keep my comment short(ish!).
I agree on
titleetc. and the issue witharia-label- it was meant to be a "this is the best option for a quick way to reach WCAG AA level". Glossaries are far more useful and following a couple of rules makes it easy (like I said I will write a whole article on it as there is a lot of explanation even though it is simple and drop you a message when it is done!).As for small caps - I will admit it is based on general knowledge of how people with dyslexia tend to choose fonts with nearly twice as tall "large letters" such as "t, b" etc. over small letters "o, a" etc. as it tends to aid comprehension.
However I will also admit that thinking about it, the variation in fonts people prefer is large so me generalising that small caps may be confusing may not be correct. I would call it an "educated hypothesis" based on other research 😋.
Unfortunately I would imagine that research into small caps is lacking but I will have a look around!