Carousels Styling for Mobile

[brewerj]

Proposed new tip ("Responsive design") to improve coverage for responsive design of carousels.

If confirmed, add note "Developed with support from WCAG TA Project"

[yatil]

Generally agreeing with the paragraph (which could be further up the page), some wording:

Make sure carousel text is not too small or cut off from view. Also, make sure touch access works well on the small dots that control the slides.

What about:

Make sure carousel text is not too small or cut off from view. Navigation buttons, like all interactive elements, need to be easy to tap and have associated labels.

(The link will link to there: https://www.w3.org/WAI/tutorials/carousels/functionality/#add-navigation-buttons)

[iamjolly]

I like @yatil's suggested wording changes. This may be a bit redundant, but perhaps we can further clarify the paragraph (edited text in bold) to say:

Make sure carousel text is not too small or cut off from view. Navigation buttons to control the slides, like all interactive elements, need to be easy to tap and have associated labels.

[yatil]

+1 @iamjolly

[AndrewArch]

... must be large enough to tap ... ?

[sharronrush]

+1 @iamjolly and for editor's discretion: I get a bit weary of the overuse of "make sure" in our guidance documents and would amend to say "Avoid use of text that is too small for easy reading or that is cut off."

[bakkenb]

+1 to @iamjolly and @sharronrush

[notabene]

+1 to @iamjolly @sharronrush

[hkramer]

+1 to @iamjolly @sharronrush. but like Andrew's phrase suggestion. Okay with editor's discretion for the various wording options.

[nrhsinclair]

Regarding Carousel text size, is there a recommendation on a preferred size that is "not too small" and is "large enough", ex.
Carousel text should be at least XX size and should not be cut off from view.

[brianelton]

Pulling together the comments:
"Avoid use of text that is too small for easy reading or that is cut off. Navigation buttons to control the slides, like all interactive elements, need to be large enough to tap and have associated labels."

[brianelton]

The first part of this page has info about button size, so part of this new section may be redundant and unnecessary. Perhaps the messaging should be that even in a smaller viewport there should still be navigation buttons and not just rely on swiping to move the carousel items.

"Avoid use of text that is too small for easy reading or that is cut off. Navigation buttons to control the slides should still be present to avoid the reliance on swipe gestures"

[lakeen]

I agree with @brianelton. The button size text is very specific:

Button Size
Use appropriately sized buttons and links, and provide whitespace around them, to allow people with reduced dexterity to use the carousel more easily. This also benefits people using touch screens, such as on mobile devices. Buttons and links that are not inline in a block of text should be at least 44 × 44 CSS pixels.

So +1 to:

"Avoid use of text that is too small for easy reading or that is cut off. Navigation buttons to control the slides should still be present to avoid the reliance on swipe gestures"

[brianelton]

Updates covered in #721. Closing PR.