What does exactly do notificationClass in the Accessibility Parameters?

[Gulmira-K]

Description

Hello,
I am using some Swiper Accessibility Parameters, but it creates underneath the slides list an addition span with aria-live and aria-atomic attributes. What does exactly do this span?

<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>

Is it possible to remove this container when a11y is enabled?

[Arhell]

Maybe it will help
https://swiperjs.com/swiper-api#accessibility-a11y
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live

[Gulmira-K]

@Arhell Thank you for the links!
I've taken a look at the documentation, but it is still not clear to me what for this span is generated by SwiperJS if it is empty, and how could I remove it without disabling a11y.

[Arhell]

It seems to me that this is not for browsers for the most part, but for other devices, I could be wrong.
And when rendering, it checks on which device the swiper was generated and shows a message.

[Arhell]

to remove the div if not needed try
https://catalin.red/removing-an-element-with-plain-javascript-remove-method/
and use https://swiperjs.com/swiper-api#events

[Gulmira-K]

I have tried to access span.swiper-notification using querySelector() method, and it did not work. However it worked using getElementsByClassName(), and returned HTMLCollection:
HTMLCollection []
0: span.swiper-notificationlength: 1
[[Prototype]]: HTMLCollection

Then I tried using item(0) method to get to this span, but it did not work... And, in addition, using length property it returns 0 instead of 1. I have also tried removing this span in CSS by display: none, and no success...

[huubl]

I have the same question: in which situations is the Swiper notification span used? It seems <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> is always empty in the demo's. But maybe by design?

When looking at this W3C example. There is a similar wrapper, which gets updated (only) when using the previous/next buttons.

<div aria-live="polite" aria-atomic="true" class="liveregion visuallyhidden">Item 1 of 3</div>

[Gulmira-K]

I'm using swiper in several different components, and span.swiper-notification never gets updated, and I'm not able to remove it either, unless I disable a11y parameter, but it is not a solution, because the components should be available for screen readers.

[ScorpAL]

swiper-notification used in combination with a11y module for accessibility.

a11y module put string from lastSlideMessage, nextSlideMessage, firstSlideMessage, prevSlideMessage when slides changed by keydown (space or enter keys) on your navigation buttons (prev, next slide) to swiper-nitification.
As swiper-nitification has attributes aria-live="assertive" aria-atomic="true" or aria-live='polite' (when swiper has no autoplay enabled) screen reader automatically reads this content to notify user about changes.

Well... swiper-notification used to allow screen readers announce changes happened on navigations (next/prev) events by keyboard (space or enter)

I see that currently it works correctly with just navigation buttons that are not actually exposed with button tag but something like div or span.
Looks like this is an issue.