Reading Time: 4 minutesBulleted lists break up dense blocks of content. They make scanning for discrete content and reading easier for visual readers. A Bronze content user experience (UX) elevates to Golden.
Meanwhile, people using a screen reader hear more meta-information. Depending on mode and setting, each list and bullet announces. The UX remains Bronze or lower.
With minimal effort we can update the screen reader Bronze UX to a Golden one. We can design an inclusive UX of lists and make their bullets golden.
Caveat
The aim is to limit the “noise” used to describe an HTML list architecture. It’s not a silver bullet. Removing a list’s semantic layout information can give a negative UX. As for anything in design, it depends.
Strategy
We’re going to:
- Hide the bulleted list from screen readers using ARIA
- Identify the list’s preceding paragraph
- Break the list content out into an array
- Add the punctuated array to the paragraph
Requirements:
- HTML for content
- JavaScript for function
- CSS and ARIA for presentation
Walk-Thru
Here’s the basic HTML, JavaScript and CSS architecture for our list update. It’s an ingredients list to make flat bread. In this post, we only update lists with the class listed.
Designed Output
Audible Output
“You will need: Milk, Plain flour, Cumin seeds and Salt.”
Visual Output
You will need:
- Milk
- Plain flour
- Cumin seeds
- Salt
HTML
<p>You will need:</p> <ul class="listed"> <li>Milk</li> <li>Plain flour</li> <li>Cumin seeds</li> <li>Salt</li> </ul>
Function
In this case the JavaScript is in my favourite flavour of JQuery:
$(".listed").each(function(){
var
//previous para
intro = $(this).prev("p"),
//needing commas
commas = $(this).children().not(":last"),
//needing period
periods = $(this).children().last().text(),
//An array for commas
arr = [];
//1. Add ARIA hidden attribute to UL
$(this).attr("aria-hidden","true");
//2. Break commas into an array with commas
arr = $(commas).map(function(j, element) {
return $(element).text();
}).get();
var commastring = arr.join(", ")
//3. Build the span to append
$(intro).append("<span class='invisible'> "+commastring+" and "+periods+".</span>");
})//Listed function END
CSS
We want to style the screen reader-only text invisible to visual readers. Don’t “hide” it.
/*Displace element off the page*/
<style>
.invisible {
position:absolute;
left:-99999px;
width:1px;
height:1px;
overflow:hidden;
}
</style>
Testing
You can use a screen reader to test the outcome on the following Ordered ol and Unordered ul list.
You will need:
- Milk
- Plain flour
- Cumin seeds
- Salt
You will need:
- Milk
- Plain flour
- Cumin seeds
- Salt
Inspection of Output
When a screen reader is not available, use your browser’s code inspector to review the HTML output. It should be as follows:
<p>You will need:<span class="invisible"> Milk, Plain flour, Cumin seeds and Salt.</span></p>
<ul class="listed" aria-hidden="true">
<li>Milk</li>
<li>Plain flour</li>
<li>Cumin seeds</li>
<li>Salt</li>
</ul>
<p>You will need the following:<span class="invisible"> Milk, Plain flour, Cumin seeds and Salt.</span></p>
<ol class="listed" aria-hidden="true">
<li>Milk</li>
<li>Plain flour</li>
<li>Cumin seeds</li>
<li>Salt</li>
</ol>
Punctuation
This technique has added commas and a period to the list array. The idea is to ensure screen readers intone natural breaks between items. We can update the strategy when existing punctuation causes an audible anomaly. In testing with Mac VoiceOver, it didn’t
Style Guides
Common list writing style guides can specify all manner of punctuation rules. In testing on a mobile device I found many of the rules are ableist. When we exclude punctuation, announcements can fail to intone a break between items.
Our style guides need thorough testing to prevent their being ableist.
In testing with Mac VoiceOver, list items that end with a period don’t degrade the UX. When existing punctuation does degrade the UX, you can remove it.
Removing Punctuation
We have 4 options when handling existing list punctuation:
- Remove it, or
- Don’t remove it, or
- Don’t add punctuation, or
- Don’t update the list experience.
From a developer viewpoint, the strategies are no great effort. We only need to specify which lists to update and how. That’s a design responsibility, ie. the writer’s.
We need to specify how our developer should handle each list. CSS classes are our HTML micro-data of choice. We don’t need clever data-types or over-engineered solutions based on the velocity of Earth through the cosmos. We need 2 versions of list; those with:
- No action (no class applied)
- Standard conversion
Complex conversions involving updating existing punctuation remain an option. This and other cases depends only on your testing and design.
Test
Test it:
- With real people who really use their screen readers.
- Across browsers, devices, and assistive technologies.
- Using your own workstation’s screen reader (yes, you have one. Use it).
Mac’s VoiceOver’s text output of the preceding Test list is as follows:
Test it: With real people who really use their screen readers., Across browsers, devices, and assistive technologies., and Using your own workstation’s screen reader (yes, you have one. Use it).
One or two writers just did cartwheels off their grammar-grounded chairs. Relax. It’s how the string is announced that counts, which roughly translates visually to:
“Test it: with real people who really use their screen readers; across browsers, devices, and assistive technologies; and using your own workstation’s screen reader. Yes, you have one. Use it.”
Cool it is said a Yoda never.
Summary
We can design the best reading experience for visual and audible consumption. Sometimes we only need to do nothing. In cases that matter, we can offer an inclusive Golden reading experience to everyone.
Key takeaways
- We are designing a visual and audible experience.
- Our writer designs when and when not to update the list experience.
- Writers work with our developer experts to implement the right model.
- The strategy is entirely within the scope of your design system and personal web spaces.