1.png "Championing European Gymnastics with Borderless Knowledge enabled by Artificial Intelligence and OriginTrail"){kind=logo}
Sara Soueidan simply printed a free chapter of her Practical Accessibility course; with no shock, it is prime quality.
The chapter is cut up into two weblog posts:
I strongly counsel you learn these, however disclaimer: you will want some time to make your self by means of them.
For my archive, listed here are some tough notes from studying the chapter.
To outline a component as a dwell area, you should utilize the aria-live attribute or go together with a dwell area position (alert, standing, log, marquee or timer). From all these roles, alert and standing are truthful recreation as a result of they’re properly supported.
Areas have one benefit over the aria-live attribute.
One other benefit to utilizing a dwell area position over aria-live is that dwell area roles settle for an accessible title.
Sara explains this truth with a buying cart.
<span id="cart"><sturdy>Procuring cart:</sturdy></span>
<span position="standing" id="standing" aria-labelledby="cart">
0 gadgets
</span>
The span comes with position="standing", and due to the area position, the factor can have an accessible title. The accessible title is outlined by aria-labelledby. Cool!
When this dwell area is introduced, the announcement consists of the accessible title: “Procuring cart: 0 gadgets”. 100 factors! 👏
I all the time anticipated the next truth, however right here it’s black on white.
The display reader will announce the whole contents of a dwell area as one lengthy string of textual content, with none of the construction.
A dwell area announcement is only a lengthy string. There are not any semantics. There is no construction. That is why good bulletins needs to be brief — nobody needs to be interrupted by a novel or complicated message.
And since semantics are stripped, there’s one other drawback with a quite common notification sample: toast widgets that embrace interactive components like a “dismiss” button are unsuitable for dwell areas.
Reside areas shouldn’t be used for messages or notifications that comprise interactive components, notably if the person could have to act on these notifications.
What must you do as a substitute? Sara describes how proper focus handling often helps to avoid live regions altogether.
For instance, here is her suggestion on make SPA navigations extra accessible.
As a substitute of counting on a dwell area to announce the web page change, you possibly can ship keyboard focus to the primary “h1” of the web page which, as we talked about within the heading construction chapter, ought to describe the first subject of the contents of the web page and ideally be an identical to the web page’s “title”.
I find it irresistible!
I have not tried it, however I belief Sara’s suggestion right here. NerdeRegion lets you shortly debug Aria Reside Areas in your developer instruments.
Sara additionally hyperlinks to Considering dynamic search results and content for instance of an accessible dwell search expertise. Disclaimer: I have not learn it but, however it seems like a beneficial bookmark.
Alright, here is the tip of my tough notes. Go forward and skim Sara’s free chapter. It is price it, I promise!
