A11y Code Sprint Berlin: Success Criterion 9.4.1.2 - add roles and role desciription to carousel containers

[SarahEdding]

Feature Request

To communicate do screen reader users, that they are navigating a carousel, some aria roles with accessible descriptions would be helpful.

Solution

To div containing carousel, add role region with aria-roledescription and connect carousel heading to "region" via aria-labelledby: <div id="c136" role="region" aria-roledescription="carousel" aria-labelledby="carousel-heading" class="..."><h2 id="carousel-heading" class="element-header ">...</h2></div>

To each div containing a slide, add role group and aria-roledescription; connect slide heading to "group" via aria-labelledby: <div class="item active carousel-item carousel-item-layout-secondary carousel-item-type-header" role="group" aria-roledescription="slide" aria-labelledby="carousel_slide-heading_1"><h3 id="carousel_slide-heading_1">...</h3></div>

[AlexaWunn]

@benjaminkott Have you had the chance to have a look at this?

[benjaminkott]

@alexakressmann we need to discuss this later. we cannot set the role on the outer div. that one is optional. we can do the adjustments on the fly in the meeting tomorrow.

[benjaminkott]

done as discussed, aria-labeledby will not happen today

[AlexaWunn]

QA successful