Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y]: Progress indicator website docs #3362

Closed
mbgower opened this issue Jan 24, 2023 · 1 comment
Closed

[a11y]: Progress indicator website docs #3362

mbgower opened this issue Jan 24, 2023 · 1 comment

Comments

@mbgower
Copy link
Contributor

mbgower commented Jan 24, 2023

Progress indicator component is missing most parts of the Usage template, and as a result is lacking many accessibility considerations

We completed a quick video of the Progress Indicator interaction in storybook, which I highly recommend you watch. Password: wHhv2TW9 (only the first half until about the 11 minute mark is progress indicator).
Most of the issues we uncovered are not so much development bugs as they are challenges with the basic progress indicator design -- and the lack of sufficient real-world context in the documentation.
For that reason, I have opened the issue against the carbon-website repo.

I have attempted to capture the key points as comments in PDF exports of the Usage and Style pages, which should be reviewed. The key points are:

  • the normal template for the Usage page has not been followed. It lacks sections on Variants, Formatting (including Anatomy and Placement), Content and Behaviours. The storybook implementation shows that variants and differences in behaviour exist. If they were addressed in the documentation, I believe a number of accessibility questions or problems would be addressed
  • the actual visual design of the indicators seems problematic, both as a strictly non-interactive element and as a complex interactive component
  • there are very specific accessibility considerations around flow, interaction and programmatic indicators of state/status which are difficult to fully discuss without the above information. I am happy to elaborate on any of the brief comments I make in the video.
  • I would consider making the progress indicator only 1 tabstop, like a tablist. That will not only make it faster to use, but also make it potentially less confusion.
  • I don't understand to what degree the progress indicator 'owns' a section of the page, like a tablist. I don't think that's the case; it is more analogous to a shopping cart. But I'd like to explore that.
  • there is no apparent visual difference between an interactive and non-interactive progress indicator. I find that problematic.

A couple of quick notes on implementation in storybook

  • there seems to be no programmatic equivalent to those 'current', 'complete', 'incomplete' symbols
  • :: before psuedo code is used for the symbols; that will lead to accessibility problems
@sstrubberg sstrubberg changed the title Progress indicator component is missing most parts of the Usage template, and as a result is lacking many accessibility considerations [a11y]: Progress indicator component is missing most parts of the Usage template, and as a result is lacking many accessibility considerations Feb 6, 2023
@sstrubberg sstrubberg changed the title [a11y]: Progress indicator component is missing most parts of the Usage template, and as a result is lacking many accessibility considerations [a11y]: Progress indicator website docs Mar 29, 2023
@laurenmrice laurenmrice added this to the 2023 Q2 milestone Apr 3, 2023
@sstrubberg
Copy link
Member

Closing in favor of tracking via carbon-design-system/carbon#13521

@sstrubberg sstrubberg removed this from the 2023 Q2 milestone Apr 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants