Web-Design user experience: if you replace actual characters with images or empty styled items you will exclude screen-readers and make visually impaired unhappy (and others too)
Posted by jpluimers on 2024/02/15
So I was on a medical site trying to copy my prescriptions trying to copy them:
Before copying After copying
In this case, the element that failed to copy was this:
<i class="fal fa-times"></i>
the element had this style:
.fa-times:before { content: "\f00d"; }
Since the element has no HTML text content, but only only CSS styling, nothing can be copied, and many screen readers do not support it as described in [Wayback/Archive] content – CSS: Cascading Style Sheets | MDN
Accessibility concernsCSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page’s purpose, it is better to include it in the main document.
Even worse: the “content” part of the CSS style is "\f00d" which is actually not defined in Unicode: the code point U+F00D is part of the Private Use Areas (in this case block U+E000..U+F8FF inside the Basic Multilingual Plane) so it has no universal meaning. So even if a screen reader would support it, it has no idea of the meaning so it cannot convey the meaning.
The full HTML of the selected line is this:
<td class="column column-second"> <div class="value-holder"> 1<i class="fal fa-times"></i><span class="quantity">60<span class="ml-1">ST</span></span></div> </td>
What you see is that there is no whitespace between the various elements. That with the i element being empty actually copied text is this: “160ST” in stead of “1 x 60 ST“.
If the HTML had been this, then the text would have been copied correctly as “1 x 60 ST“:
<td class="column column-second"> <div class="value-holder"> <span class="value">1</span> <i class="fal fa-times">x</i> <span class="quantity">60</span> <span class="ml-1">ST</span></div> </td>
In stead of the letter x, it could have used the × (which is the Multiplication sign or in Unicode speak U+00D7 × MULTIPLICATION SIGN).
So when you design a web-interface, please make it inclusive which means:
- it is compatible with text readers
- content can be copied into a meaningful result
This particular example was on the site [Wayback/Archive] Uw Zorg online which is built by [Wayback/Archive] Diensten: patientenomgeving – Pharmeon, quite a big player in the Dutch health market.
–jeroen
Via: Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Briljante usability van de @Pharmeon patiëntomgeving. Medicatieoverzicht: plaatje 1. Doel: tekst kopieren (voor ziekenhuisopname): plaatje 2 De x is dus geen x maar een image (wat ook betekent dat screenreaders het niet zullen lezen: tot zo ver #inclusie voor slechtzienden). “
The Wiert Corner - irregular stream of stuff 
Leave a comment