Sara Soueidan simply revealed a free chapter of her Sensible 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 may 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 reside area, you should utilize the aria-live attribute or go along with a reside area position (alert, standing, log, marquee or timer). From all these roles, alert and standing are truthful sport as a result of they’re nicely supported.
Areas have one benefit over the aria-live attribute.
One other benefit to utilizing a reside area position over aria-live is that reside area roles settle for an accessible title.
Sara explains this reality with a buying cart.
<span id="cart"><robust>Procuring cart:</robust></span>
<span position="standing" id="standing" aria-labelledby="cart">
0 objects
</span>
The span comes with position="standing", and due to the area position, the aspect can have an accessible title. The accessible title is outlined by aria-labelledby. Cool!
When this reside area is introduced, the announcement contains the accessible title: “Procuring cart: 0 objects”. 100 factors! 👏
I at all times anticipated the next reality, however right here it’s black on white.
The display reader will announce all the contents of a reside area as one lengthy string of textual content, with none of the construction.
A reside area announcement is only a lengthy string. There are not any semantics. There is not any construction. That is why good bulletins must be quick — 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 embody interactive parts like a “dismiss” button are unsuitable for reside areas.
Dwell areas shouldn’t be used for messages or notifications that comprise interactive parts, significantly if the consumer might must act on these notifications.
What do you have to do as a substitute? Sara describes how correct focus dealing with typically helps to keep away from reside areas altogether.
For instance, here is her advice on learn how to make SPA navigations extra accessible.
As a substitute of counting on a reside 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 matter of the contents of the web page and ideally be similar to the web page’s “title”.
I adore it!
I have not tried it, however I belief Sara’s advice right here. NerdeRegion permits you to shortly debug Aria Dwell Areas in your developer instruments.
Sara additionally hyperlinks to Contemplating dynamic search outcomes and content material for example of an accessible reside search expertise. Disclaimer: I have not learn it but, but it surely seems to be like a beneficial bookmark.
Alright, here is the top of my tough notes. Go forward and skim Sara’s free chapter. It is value it, I promise!
