Develop basic carousel example

[mcking65]

There are no roles specific to carousel; there are many possible ways to construct them using ARIA. We will probably have a variety of examples that demonstrate primary features of the pattern that has been drafted for issue #43.

This issue is to develop an implementation of a basic carousel that includes auto rotation and a rotation control.

Integration of example implementations into the master branch is dependent on pull request #957, which will merge the carousel pattern developed for issue #43.

Links for review and test

• Example WIP for PR Add carousel example #958: Basic Image Carousel Example in issue458-add-carousel-example branch
• Pattern WIP for PR Add carousel pattern #957: Carousel pattern in issue43-add-carousel-pattern branch

[devarshipant]

One of the patterns could be:

1. Slider images do not receive keyboard focus, but are clickable. Intent is for screen reader users to skip slider images (often playing as part of slideshow) and process (2) below.
2. Keyboard access / click is given to Previous / Next controls that point to href targets of the slider images in ID 1. Slider image descriptions, if needed, are associated with the Previous / Next controls using aria-attributes.

[sh0ji]

I designed and built a prototype carousel on codepen a while back, and just added some comments to it since it might be useful here.

The general idea was to create a continuous list that conveyed a similar experience for everyone. It's easy to wrap a list for keyboard/screen reader users, but that can be tougher to convey visually. I ended up using 3D CSS transforms to literally render the list as a 3D carousel, but I forced the perspective to make it look more like a flat, scrolling list. I'm undecided about some of the choices I made about the roles, and would love feedback if anyone's interested.

[mcking65]

Current work on examples from @jongund was merged into the carousel-v2 branch with PR #945. Examples can be seen at:

• Image carousel example
• Carousel with tablist

[jongund]

I have fixed the linter errors and have add two regression test for each example. Do you want me to do a pull request or wait for more feedback from the working group?

[mcking65]

@jongund, you could push those changes directly to the w3c:carousel-v2 branch and they will show up in the preview links we have in this issue. No need for a PR.

[jongund]

@mcking65 I doing all my work in this branch now, so it should be up to date with what I have done.

[nattarnoff]

Propose edit to the auto rotation to accommodate for prefers-reduced-motion:

• If the carousel can automatically rotate, it also:
  • Respects the user's prefers-reduced-motion settings and defaults to not rotating automatically if the media query value is default or reduce.
  • Has a button for stopping and restarting rotation. This is particularly important for supporting assistive technologies operating in a mode that does not move either keyboard focus or the mouse.
  • Stops rotating when keyboard focus enters the carousel. It does not restart unless the user explicitly requests it to do so.
  • Stops rotating whenever the mouse is hovering over the carousel

[jongund]

@mcking65 I have updated the example:

• changed the button from toggle to changing the accessible name to reflect the action of the button
• Added role=group, aria-roledescription, aria-label and aria-describedby to slides
• Add live region to slide container that toggles between off and polite

[accdc]

In reading the new pattern text, there is a problem with the aria-live guidance for the slide. It makes sense that this should be set to off on auto-rotation,
and that polite would be used on manual activation only, however the use of aria-live=polite on a slide doesn’t take into account that only textual content
can be recognized in these cases. E.G an image with an alt would be totally silent, as with any other type of alternative labelling mechanism for interactive
elements like form fields and the like.

In such cases, the only way to achieve this is to use an alternate, and possibly even hidden live region for the purpose of writing custom information
to it, which I don’t believe is addressed anywhere in the APG.

E.G. This last is a technique that many developers use by appending an offscreen tag for the purpose of writing custom screen reader messages to be announced,
when there is no means for intuitively doing this within the standard UI where it would make contextual sense for non-sighted users when announced as visually
displayed.

[mcking65]

@accdc commented:

In reading the new pattern text, there is a problem with the aria-live guidance for the slide. It makes sense that this should be set to off on auto-rotation,
and that polite would be used on manual activation only, however the use of aria-live=polite on a slide doesn’t take into account that only textual content
can be recognized in these cases. E.G an image with an alt would be totally silent, as with any other type of alternative labelling mechanism for interactive
elements like form fields and the like.

If you pause the carousel in the current version of the example and then activate next or previous, the live region on the slide is reading the image labels along with the other text. It seems to work quite well.

I'm trying it with JAWS 2019 in Chrome.

In such cases, the only way to achieve this is to use an alternate, and possibly even hidden live region for the purpose of writing custom information
to it, which I don’t believe is addressed anywhere in the APG.
E.G. This last is a technique that many developers use by appending an offscreen tag for the purpose of writing custom screen reader messages to be announced,
when there is no means for intuitively doing this within the standard UI where it would make contextual sense for non-sighted users when announced as visually
displayed.

We have a live region like this in the layout grid examples.
Go down to "Example 2: Pill List For a List of Message Recipients", type a string in the edit field, and press enter. Or, use the delete button on any row in the grid.

However, we do not yet have a guidance section for live regions, which we really need. That is definitely coming for the June 2019 release.

After we have merged #951, it will be much easier to find examples like this. That adds an index of examples by role and an index of examples by states and properties. So for instance, you will be able to easily find all the examples that use aria-live.

[mcking65]

@nattarnoff commented:

Propose edit to the auto rotation to accommodate for prefers-reduced-motion:

• If the carousel can automatically rotate, it also:

  • Respects the user's prefers-reduced-motion settings and defaults to not rotating automatically if the media query value is default or reduce.

I am familiar with the reduce motion setting in iOS, but have not heard of it elsewhere. In windows, I see a setting called "Turn off all unnecessary animations (when possible)." Is that the same?

You seem to be implying that browsers respect these settings and make them available to web authors via CSS media queries? If so, that is amazing. I've never known there is a way for users to express such a need and have it respected by web content. If there is a robust approach to this, we absolutely want to illustrate it. What a fabulous thing to do for carousels!

[nattarnoff]

@mcking65 That Windows setting does the same thing as the iOS one. Its also available in Mac OS X. Right now only Firefox and Safari recognize the media query and OS settings, but it is on the list of features to add to Chromium, so hopefully Chrome and Edge will pick it up soon.

[mcking65]

Work is completed for the first release of the example with commit 4c846e4.