So, I’m working on my Product Landing Page, and I have some dimensions that I’m adding. My question, how do I make dimensions ARIA compliant? example, I have:
<p>Product size is 350<abbr title="millimeters">mm</abbr> x 200<abbr title="millimeters">mm</abbr> x 175<abbr title="millimeters">mm</abbr>.</p>
With screen readers, it reads the x as literal x, and not “by”. Should I write out by, or is there a way to make the x = by? Should I use the <abbr> tag again?
I haven’t run into this specific issue before but it seems like the <abbr> tag would be proper here. In the real world we usually refer to these dimensions as “2 by 4” or “3 by 6 by 8” so ‘x’ definitely seems like an abbreviation for ‘by’.
Would everyone visiting your site understand this terminology? If not, you should make sure to explain it so that they will understand it or possibly you could use a different format for your dimensions, such as:
Height: 200mm, Width: 300mm, Length: 400mm
Or a combination of both. Perhaps have a little info link next to each measurement that displays the measurements without the ‘by’ vernacular.
I’m just throwing out ideas here, sometimes there are no 100% correct answers and it will depend on your target audience as well.
P.S. A ton of kudos to you for thinking about these things. Accessibility is a huge concern nowadays (or at least should be) and you would be suprised at just how many very popular sites are not that accessible.
I don’t know why my mind was only focusing on the vernacular, instead of what should be the proper way of writing dimensions. I have corrected my descriptions, to remove the “x”.
As for accessibility, I would assume that most developers don’t think about it unless they know someone who cannot access a web site like they typically do. They say “develop for mobile-first.”, but we should all develop for accessibility first, and mobile second. I think most companies should be looking into their own websites and ensuring that they are ADA compliant.
So bad news, after doing some testing, neither JAWS or NVDA will read the title attribute on the <abbr>. They just continue reading what’s inside the tag. The <abbr> is still important, but it’s not going to make screen readers spell out the abbreviation.
Update: Let me take that back a little. Apparently there are settings you can enable in both to force them to read the title in the <abbr>. Maybe most people who use screen readers already do this?
One solution would be to provide an alternative for screen readers and hide it from sighted users. For example:
350 <abbr aria-hidden="true" title="milimeters">mm.</abbr> <span class="visually-hidden">milimeters</span>
aria-hidden=“true” keeps screen readers from reading the <abbr> and the visually-hidden class prevents sighted users from seeing it spelled out on the page. You can get the visually-hidden class at:
I could not agree with you more. Accessibility should be at the top of the list from the very beginning. If you are doing this (and it seems like you are) then you are already 100% ahead of the game.
I hadn’t always been forward thinking on the matter, until recently. Two of my early pages, failed to meet any ADA compliances. I haven’t revisited them, to correct them, but I do plan on doing that. I don’t know what made me think about recently, but as I started my product landing page challenge, it hit me. Thanks for your help. I am going to make the changes you recommended, with the “Hide Content”.