CSUN 2020 Design Systems and Accessibility Challenges Talk

Accomplishments

  1. The Clarity team is committed to accessibility. See Jeremy’s blog post on Clarity’s Commitment to Accessibility
  2. We created an ARIA Menu with a heading
  3. The team began using screen readers during development
  4. We discovered the reading order issues that can be caused by the CSS order property

Beyond ARIA

  1. We created an ARIA Menu with a heading, https://clarity.design/documentation/dropdowns
  2. We created a Tabs implementation that supports overflow, https://clarity.design/documentation/tabs
  3. We added textual borders to modals to help screen reader users determine dialog boundaries when aria-modal is not supported
  4. We added external content to grids by using modal techniques such as focus management and textual boundaries

Challenges

  • No visible labels on the Login Form component. This is a long standing design that users of applications built on Clarity expect to see. A change in the look and feel of the Login Form component may result in the user not trusting that they are using a VMware application.
  • Interstitial Content in Stack View. Clarity’s Stack View compo
  • We had to put a mouse-only button in the overflow example of the Tabs component
  • Lack of a complete ARIA Grid implementation. No arrow key navigation.
  • Clarity Component names do not match ARIA Widget Role names when they could(clr Dropdown = ARIA Menu)
  • We allow our ARIA grids to contain “expandable rows” that do not conform to the ARIA 1.1 specification. Data in these rows will not be available to
    screen reader users using key combinations for table navigation
  • Content outside of modal dialogs is not hidden using aria-hidden=”true”. We are waiting for aria-modal to be more widely supported by browser/screen reader combinations.
  • Clarity is unable to implement ARIA Live Regions correctly. This impacts various components, Stack View, Date Picker. It also impacts error messages.
  • Clarity implemented keyboard accessible scrollable containers, but this leads to static content in the tab order when the amount of of consumer injected content is too small to trigger overflow.

mysql> SELECT id, Headline, `Github Issue` FROM testing where `Github Issue` != “” \G
*************************** 1. row ***************************
id: 1
Headline: Grid columns cannot be resized using the keyboard alone
Github Issue: https://github.com/vmware/clarity/issues/3372
*************************** 2. row ***************************
id: 2
Headline: The “datagrid-filter” does not stay open after being activated with the keyboard
Github Issue: https://github.com/vmware/clarity/issues/2923
*************************** 3. row ***************************
id: 3
Headline: The clr-dg-filter component does not provide a mechanism to move focus to an element within a custom filter
Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 4. row ***************************
id: 4
Headline: “Data Grid – Pagination”, focus does not move to the beginning of the newly displayed data after the “clr-page-size-select” control has been activated
Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 5. row ***************************
id: 5
Headline: Data Grid – Pagination – focus is lost after activating either the “pagination-first” or “pagination-previous” buttons
Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 6. row ***************************
id: 6
Headline: Focus does not return to the datagrid-filter-toggle button after the datagrid-filter is closed
Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 7. row ***************************
id: 7
Headline: The clr-dropdown-menu component does not support arrow keys to select options
Github Issue: https://github.com/vmware/clarity/pull/3283
*************************** 8. row ***************************
id: 8
Headline: Screen reader users will not be aware of actions available from the clr-dg-action-overflow component when it appears
Github Issue: https://github.com/vmware/clarity/issues/3371
*************************** 9. row ***************************
id: 9
Headline: There is no way for the developer using Clarity to provide an accessible name for the datagrid-action-toggle button.
Github Issue: https://github.com/vmware/clarity/issues/3371
*************************** 10. row ***************************
id: 10
Headline: The clr-dg-row-detail component does not work with VoiceOver and Chrome but has partial support with other screen reader/browser combinations
Github Issue: https://github.com/vmware/clarity/issues/3375
*************************** 11. row ***************************
id: 11
Headline: The clr-dg-cell should use role=”gridcell” rather than role=”cell”
Github Issue: https://github.com/vmware/clarity/issues/3373
*************************** 12. row ***************************
id: 12
Headline: The “datagrid-expandable-caret-button” button does not indicate its expanded state to assistive technologies
Github Issue: https://github.com/vmware/clarity/issues/3371
*************************** 13. row ***************************
id: 13
Headline: The “datagrid-expandable-caret-button” button cannot be read or activated when using VoiceOver
Github Issue: https://github.com/vmware/clarity/issues/3375
*************************** 14. row ***************************
id: 14
Headline: The first column in the clr-datagrid component is empty when using the clr-dg-row-detail component
Github Issue: https://github.com/vmware/clarity/issues/3464
*************************** 15. row ***************************
id: 15
Headline: The toggle button inside the clr-dg-column-toggle component lacks a mechanism for providing an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3371
*************************** 16. row ***************************
id: 16
Headline: Focus is lost after activating the clr-dg-column-toggle
Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 17. row ***************************
id: 17
Headline: Focus is lost after activating the “Select All” button in the clr-dg-column-toggle component

Github Issue: https://github.com/vmware/clarity/issues/3370
*************************** 18. row ***************************
id: 18
Headline: Screen reader users do not hear any status updates after the checkboxes in the clr-checkbox-wrapper components are activated
Github Issue: https://github.com/vmware/clarity/issues/3578
*************************** 19. row ***************************
id: 19
Headline: The close button in the clr-dg-column-toggle component lacks a mechanism for providing an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3371
*************************** 20. row ***************************
id: 21
Headline: Screen readers do not respect the CSS order Property
Github Issue: https://github.com/vmware/clarity/issues/3412
*************************** 21. row ***************************
id: 22
Headline: The Wizard Tablist is not implemented with the expected keyboard behavior
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 22. row ***************************
id: 23
Headline: Screen readers can read content outside of the clr-wizards modal dialog
Github Issue: https://github.com/vmware/clarity/issues/3420
*************************** 23. row ***************************
id: 24
Headline: Focus does not move into the wizard when it opens
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 24. row ***************************
id: 25
Headline: Wizard close button does not have an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3413
*************************** 25. row ***************************
id: 27
Headline: The Wizard Tablist does not have an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 26. row ***************************
id: 28
Headline: Inactive element in the tab order
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 27. row ***************************
id: 29
Headline: Wizard heading levels should start at h1
Github Issue: https://github.com/vmware/clarity/issues/3420
*************************** 28. row ***************************
id: 30
Headline: Tab buttons do not work and should be removed from the focus order
Github Issue: https://github.com/vmware/clarity/issues/3415
*************************** 29. row ***************************
id: 31
Headline: Screen readers do not read the newly added content when new clr-wizard-page components appear
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 30. row ***************************
id: 32
Headline: Focus is not managed when wizard stepnav items are conditionally displayed or hidden
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 31. row ***************************
id: 33
Headline: It is not possible to read overflow content using the keyboard alone
Github Issue: https://github.com/vmware/clarity/issues/3424
*************************** 32. row ***************************
id: 34
Headline: The Shift+Tab key combination is not behaving as expected after tabbing past the Next button
Github Issue: https://github.com/vmware/clarity/issues/3414
*************************** 33. row ***************************
id: 35
Headline: Browser focus is lost after dismissing a clr-alert inside a wizard
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 34. row ***************************
id: 36
Headline: The “Loading…” message in the Form with async validation wizard is not announced by screen readers
Github Issue: https://github.com/vmware/clarity/issues/3423
*************************** 35. row ***************************
id: 37
Headline: When wizards use clr-alert components, screen reader users hear the alert content when they should be hearing the beginning content of the wizard.
Github Issue: https://github.com/vmware/clarity/issues/3497
*************************** 36. row ***************************
id: 38
Headline: clr-alert components of type ‘alert-danger’ contain close buttons that do not have accessible names
Github Issue: https://github.com/vmware/clarity/issues/3498
*************************** 37. row ***************************
id: 40
Headline: Browser focus is lost after activating the Back button inside a wizard
Github Issue: https://github.com/vmware/clarity/issues/3399
*************************** 38. row ***************************
id: 41
Headline: The Non-Closable Wizard can be closed with the Escape key
Github Issue: https://github.com/vmware/clarity/issues/3499
*************************** 39. row ***************************
id: 42
Headline: Auto-generated ID values can be confusing when trying to associate label elements with the inputs that use them
Github Issue: https://github.com/vmware/clarity/issues/3465
*************************** 40. row ***************************
id: 43
Headline: Screen readers can read content outside of date pickers
Github Issue: https://github.com/vmware/clarity/issues/3466
*************************** 41. row ***************************
id: 44
Headline: Overflow content resulting from text spacing increase cannot be read by keyboard-only users
Github Issue: https://github.com/vmware/clarity/issues/3424
*************************** 42. row ***************************
id: 45
Headline: Focus is lost when Date Pickers are closed with the Escape key
Github Issue: https://github.com/vmware/clarity/issues/3468
*************************** 43. row ***************************
id: 46
Headline: Date Picker switcher buttons lack accessible names
Github Issue: https://github.com/vmware/clarity/issues/3467
*************************** 44. row ***************************
id: 47
Headline: The accessible names for Date Picker cells are incomplete
Github Issue: https://github.com/vmware/clarity/issues/3467
*************************** 45. row ***************************
id: 52
Headline: User defined CSS for text-spacing moves date picker vertically
Github Issue: https://github.com/vmware/clarity/issues/3500
*************************** 46. row ***************************
id: 53
Headline: The Tree View does not support the correct keyboard interactions
Github Issue: https://github.com/vmware/clarity/issues/3569
*************************** 47. row ***************************
id: 54
Headline: Checkboxes in Tree Views need keyboard interaction design
Github Issue: https://github.com/vmware/clarity/issues/3573
*************************** 48. row ***************************
id: 63
Headline: Tree nodes do not indicate their levels, positions in the data set and data set sizes
Github Issue: https://github.com/vmware/clarity/issues/3572
*************************** 49. row ***************************
id: 64
Headline: The selected state of treenode is not announced by screen readers
Github Issue: https://github.com/vmware/clarity/issues/3571
*************************** 50. row ***************************
id: 65
Headline: The treenode buttons lack accessible names
Github Issue: https://github.com/vmware/clarity/issues/3570
*************************** 51. row ***************************
id: 68
Headline: The Tree Views lack accessible names
Github Issue: https://github.com/vmware/clarity/issues/3570
*************************** 52. row ***************************
id: 69
Headline: Tree Views lack Type-ahead functionality
Github Issue: https://github.com/vmware/clarity/issues/3603
*************************** 53. row ***************************
id: 71
Headline: Vertical nav links do not navigate screen reader users to new content
Github Issue: https://github.com/vmware/clarity/issues/3577
*************************** 54. row ***************************
id: 72
Headline: A white background is used to convey information that is not communicated to screen reader users
Github Issue: https://github.com/vmware/clarity/issues/3576
*************************** 55. row ***************************
id: 73
Headline: The Vertical Nav button in the Collapse & Expand Navigation example lacks an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3574
*************************** 56. row ***************************
id: 74
Headline: The Nav trigger button lacks accessible name
Github Issue: https://github.com/vmware/clarity/issues/3574
*************************** 57. row ***************************
id: 75
Headline: The nav group trigger buttons do not convey their expanded/collapsed states
Github Issue: https://github.com/vmware/clarity/issues/3575
*************************** 58. row ***************************
id: 76
Headline: Tabs do not support arrow key navigation
Github Issue: https://github.com/vmware/clarity/issues/3502
*************************** 59. row ***************************
id: 77
Headline: The overflow feature does not fit into the ARIA Tabs pattern
Github Issue: https://github.com/vmware/clarity/issues/3514
*************************** 60. row ***************************
id: 84
Headline: Focus is lost after closing the Tabs overflow with the Escape key
Github Issue: https://github.com/vmware/clarity/issues/3509
*************************** 61. row ***************************
id: 85
Headline: The Tab Overflow dropdown toggle button lacks an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3508
*************************** 62. row ***************************
id: 86
Headline: VoiceOver/Safari users cannot explore forms without causing errors
Github Issue: https://github.com/vmware/clarity/issues/3557
*************************** 63. row ***************************
id: 88
Headline: Screen reader users may miss inline errors
Github Issue: https://github.com/vmware/clarity/issues/3556
*************************** 64. row ***************************
id: 97
Headline: Helper text is not read to screen readers users before they use input fields
Github Issue: https://github.com/vmware/clarity/issues/3554
*************************** 65. row ***************************
id: 98
Headline: Helper and error messages at are not announced to screen reader users when expected.
Github Issue: https://github.com/vmware/clarity/issues/3556
*************************** 66. row ***************************
id: 99
Headline: Stack view components are not working in Mac OS Safari
Github Issue: https://github.com/vmware/clarity/issues/3350
*************************** 67. row ***************************
id: 100
Headline: Screen reader users will not know what the signpost trigger button does or if the signpost content is readable
Github Issue: https://github.com/vmware/clarity/issues/3523
*************************** 68. row ***************************
id: 106
Headline: The stack-block-label buttons should be programmatically associated with the stack-children
Github Issue: https://github.com/vmware/clarity/issues/3564
*************************** 69. row ***************************
id: 107
Headline: Interstitial content in the stack view presents an illogical reading sequence for screen reader users
Github Issue: https://github.com/vmware/clarity/issues/3567
*************************** 70. row ***************************
id: 108
Headline: Lazy loading stack views should provide position in set information for each stack item in view at any given time.

This functionality will be necessary when the complete set of available nodes is not present in the DOM due to dynamic loading.
Github Issue: https://github.com/vmware/clarity/issues/3568
*************************** 71. row ***************************
id: 109
Headline: Unlabelled form fields in Stack View Edit Mode
Github Issue: https://github.com/vmware/clarity/issues/3566
*************************** 72. row ***************************
id: 110
Headline: The stack-block-changed triangle needs a unique textual equivalent
Github Issue: https://github.com/vmware/clarity/issues/3566
*************************** 73. row ***************************
id: 111
Headline: The Close button in the Stack View Edit mode does not have an accessible name
Github Issue: https://github.com/vmware/clarity/issues/3566
*************************** 74. row ***************************
id: 112
Headline: Screen reader users don’t hear anything after the stack view edit mode dialog appears
Github Issue: https://github.com/vmware/clarity/issues/3566
*************************** 75. row ***************************
id: 113
Headline: Screen readers can read content outside of the stack view edit mode dialog
Github Issue: https://github.com/vmware/clarity/issues/3420
*************************** 76. row ***************************
id: 114
Headline: The “Loading…” message in the Lazy loading stack views example is not announced by screen readers
Github Issue: https://github.com/vmware/clarity/issues/3565
*************************** 77. row ***************************
id: 115
Headline: Focus is lost when modals appear
Github Issue: https://github.com/vmware/clarity/issues/3414
*************************** 78. row ***************************
id: 116
Headline: The ‘modal-body’ element is in the Tab order but it is not interactive
Github Issue: https://github.com/vmware/clarity/issues/3424
*************************** 79. row ***************************
id: 117
Headline: Screen readers can read content outside of the modal dialog
Github Issue: https://github.com/vmware/clarity/issues/3420
*************************** 80. row ***************************
id: 126
Headline: When controls are inside live regions, their accessible names are announced but they don’t make sense when combined with the content and there is no way for the screen reader users to immediately activate these controls.
Github Issue: https://github.com/vmware/clarity/issues/3549
*************************** 81. row ***************************
id: 127
Headline: Header controls lack accessible names
Github Issue: https://github.com/vmware/clarity/issues/3518
*************************** 82. row ***************************
id: 128
Headline: The visual focus indication of overflow dropdown items is suppressed on https://clarity.design/documentation/button-group
Github Issue: https://github.com/vmware/clarity/issues/3515
*************************** 83. row ***************************
id: 129
Headline: Button Group Overflow issues
Github Issue: https://github.com/vmware/clarity/issues/3515
*************************** 84. row ***************************
id: 130
Headline: Icon buttons lack accessible names
Github Issue: https://github.com/vmware/clarity/issues/3530
*************************** 85. row ***************************
id: 131
Headline: Interstitial content should not be used with aria-expanded.
Github Issue: https://github.com/vmware/clarity/issues/3560
*************************** 86. row ***************************
id: 132
Headline: The ‘Next’ button in the Stepper does not take screen reader users to the next step

Github Issue: https://github.com/vmware/clarity/issues/3528
*************************** 87. row ***************************
id: 133
Headline: The ‘clr-accordion-header-button’ buttons do not work in any of them are expanded
Github Issue: https://github.com/vmware/clarity/issues/3529
*************************** 88. row ***************************
id: 134
Headline: When a screen reader user reads a field that is in an error state they do not hear the error message

Github Issue: https://github.com/vmware/clarity/issues/3561
*************************** 89. row ***************************
id: 135
Headline: When a “clr-accordion-header-button” button contains an error icon, the error state is not conveyed to screen reader users when they read the button.
Github Issue: https://github.com/vmware/clarity/issues/3529
*************************** 90. row ***************************
id: 136
Headline: When a “clr-accordion-header-button” button contains a ‘complete’ icon, the ‘complete’ state is not conveyed to screen reader users when they read the button.
Github Issue: https://github.com/vmware/clarity/issues/3529
*************************** 91. row ***************************
id: 137
Headline: Error messages are not announced by some screen reader/browser combinations
Github Issue: https://github.com/vmware/clarity/issues/3562
*************************** 92. row ***************************
id: 138
Headline: Focus is not managed after the Stepper’s Next button is activated while there are errors
Github Issue: https://github.com/vmware/clarity/issues/3528
*************************** 93. row ***************************
id: 139
Headline: Progress bar updates are not announced to screen reader users

Github Issue: https://github.com/vmware/clarity/issues/3516
*************************** 94. row ***************************
id: 141
Headline: The Success and Danger Progress Bars use color alone to convey information
Github Issue: https://github.com/vmware/clarity/issues/3517
*************************** 95. row ***************************
id: 142
Headline: The input fields in login form example are not labelled
Github Issue: https://github.com/vmware/clarity/issues/3522
*************************** 96. row ***************************
id: 143
Headline: Tooltips are not announced by screen readers when you tab to them
Github Issue: https://github.com/vmware/clarity/issues/3525
*************************** 97. row ***************************
id: 146
Headline: The Sidenav Collapsible Nav Element cannot be focused with the keyboard
Github Issue: https://github.com/vmware/clarity/issues/3526
*************************** 98. row ***************************
id: 147
Headline: Spinners on a dark background
Github Issue: https://github.com/vmware/clarity/issues/3527
*************************** 99. row ***************************
id: 148
Headline: Flat buttons don’t look like buttons, sighted keyboard only users and speech recognition users may not know that these are buttons
Github Issue: https://github.com/vmware/clarity/issues/3550
*************************** 100. row ***************************
id: 149
Headline: Unstyled lists are not recognized by iOS/VoiceOver
Github Issue: https://github.com/vmware/clarity/issues/3563
*************************** 101. row ***************************
id: 150
Headline: list-style-type:none can make it difficult for screen reader users to differentiate list items from one another
Github Issue: https://github.com/vmware/clarity/issues/3563
*************************** 102. row ***************************
id: 151
Headline: Dropdown headers are not read by screen reader users when they open the dropdown
Github Issue: https://github.com/vmware/clarity/issues/3551
*************************** 103. row ***************************
id: 152
Headline: Screen readers are announcing an incorrect menu item count
Github Issue: https://github.com/vmware/clarity/issues/3552
*************************** 104. row ***************************
id: 155
Headline: The documentation website example for clrCloseMenuOnItemClick needs an accessible name for the menu button
Github Issue: https://github.com/vmware/clarity/issues/3553
*************************** 105. row ***************************
id: 156
Headline: Disabled menu items should be focusable
Github Issue: https://github.com/vmware/clarity/issues/3602
*************************** 106. row ***************************
id: 157
Headline: Disabled menu items should be implemented with aria-disabled
Github Issue: https://github.com/vmware/clarity/issues/3602
*************************** 107. row ***************************
id: 160
Headline: Datagrids do not support arrow key navigation
Github Issue: https://github.com/vmware/clarity/issues/3349
*************************** 108. row ***************************
id: 162
Headline: Screen reader users do not hear anything after activating the next and previous month, year and decade buttons
Github Issue: https://github.com/vmware/clarity/issues/3467
*************************** 109. row ***************************
id: 168
Headline: The datagrid-filter-toggle button lacks an accessible name and state
Github Issue: https://github.com/vmware/clarity/issues/3349
*************************** 110. row ***************************
id: 169
Headline: Focus is lost when closing modals
Github Issue: https://github.com/vmware/clarity/issues/3414
*************************** 111. row ***************************
id: 175
Headline: Toggle switches use shape and position as the sole way to communicate state visually
Github Issue: https://github.com/vmware/clarity/issues/3412
*************************** 112. row ***************************
id: 176
Headline: Tooltips disappear when they are hovered over
Github Issue: https://github.com/clr-team/planning/issues/42
*************************** 113. row ***************************
id: 177
Headline: Visual focus indication with the background color #eee against a white background yields low contrast.
Github Issue: https://github.com/vmware/clarity/issues/3602
*************************** 114. row ***************************
id: 178
Headline: Skip links are not mentioned at https://clarity.design/documentation/app-layout
Github Issue: https://github.com/vmware/clarity/issues/3764
*************************** 115. row ***************************
id: 188
Headline: The expandable rows documentation should mention its accessibility issues
Github Issue: https://github.com/vmware/clarity/issues/3375
*************************** 116. row ***************************
id: 199
Headline: Stack view documentation page should advise consumers to keep key values short
Github Issue: https://github.com/vmware/clarity/issues/3567
*************************** 117. row ***************************
id: 200
Headline: Flash progress bars use color alone to convey success
Github Issue: https://github.com/vmware/clarity/issues/3517
117 rows in set (0.00 sec)

mysql>

Documentation

*************************** 1. row ***************************
                    id: 175
              Headline: Toggle switches use shape and position as the sole way to communicate state visually
WCAG Conformance Level: A
*************************** 2. row ***************************
                    id: 178
              Headline: Skip links are not mentioned at https://clarity.design/documentation/app-layout
WCAG Conformance Level: A
*************************** 3. row ***************************
                    id: 179
              Headline: The Color Palette documentation promotes using color as the sole means to convey information
WCAG Conformance Level: A
*************************** 4. row ***************************
                    id: 180
              Headline: The internationalization documentation page needs to address the language of the page and parts of the page
WCAG Conformance Level: A
*************************** 5. row ***************************
                    id: 181
              Headline: The navigation documentation page does not mention skip links
WCAG Conformance Level: A
*************************** 6. row ***************************
                    id: 182
              Headline: The themes documentation page promotes using color as the sole means of conveying information
WCAG Conformance Level: A
*************************** 7. row ***************************
                    id: 183
              Headline: The alerts documentation page promotes adding controls to alerts which will create an illogical focus order
WCAG Conformance Level: A
*************************** 8. row ***************************
                    id: 184
              Headline: The badges documentation page promotes using color alone to communicate status
WCAG Conformance Level: A
*************************** 9. row ***************************
                    id: 185
              Headline: Visual focus indication is suppressed for the overflow buttons in the button-group documentation page
WCAG Conformance Level: AA
*************************** 10. row ***************************
                    id: 186
              Headline: The Basic checkbox button example on the checkboxes documentation page promotes usage of checkboxes without labels
WCAG Conformance Level: A
*************************** 11. row ***************************
                    id: 187
              Headline: The Datagrid custom-rendering documentation promotes nested components but does not mention the impact next components will have on the tab order
WCAG Conformance Level: A
*************************** 12. row ***************************
                    id: 188
              Headline: The expandable rows documentation should mention its accessibility issues
WCAG Conformance Level: A
*************************** 13. row ***************************
                    id: 189
              Headline: Forms documentation page promotes firing validations on blur
WCAG Conformance Level: A
*************************** 14. row ***************************
                    id: 190
              Headline: Attributes in code examples do not provide sufficient contrast
WCAG Conformance Level: A
*************************** 15. row ***************************
                    id: 191
              Headline: The Basic input example on the Inputs documentation page promotes the usage of unlabelled input fields

WCAG Conformance Level: A
*************************** 16. row ***************************
                    id: 193
              Headline: The close button in the Dismissing Labels example on the Labels documentation page does not have an accessible name
WCAG Conformance Level: A
*************************** 17. row ***************************
                    id: 195
              Headline: Tag tokens in code examples have low contrast
WCAG Conformance Level: AA
*************************** 18. row ***************************
                    id: 196
              Headline: The helper text example on the password documentation page does not demonstrate how to use the helper text to programmatically describe its respective input field
WCAG Conformance Level: UNDEFINED
*************************** 19. row ***************************
                    id: 197
              Headline: The progress bar documentation page promotes the use of color to convey meaning
WCAG Conformance Level: A
*************************** 20. row ***************************
                    id: 198
              Headline: The error icon in the Radio Buttons documentation page needs a textual equivalent
WCAG Conformance Level: A
*************************** 21. row ***************************
                    id: 199
              Headline: Stack view documentation page should advise consumers to keep key values short
WCAG Conformance Level: A
*************************** 22. row ***************************
                    id: 200
              Headline: Flash progress bars use color alone to convey success
WCAG Conformance Level: A
*************************** 23. row ***************************
                    id: 201
              Headline: Spinner live region is not working
WCAG Conformance Level: AA
*************************** 24. row ***************************
                    id: 202
              Headline: Spinner documentation says we use a polite live region but we use an assertive live region
WCAG Conformance Level: AA
*************************** 25. row ***************************
                    id: 203
              Headline: The tabs documentation shows incorrect use of aria-hidden
WCAG Conformance Level: A
*************************** 26. row ***************************
                    id: 204
              Headline: Skip link does not move focus to main content
WCAG Conformance Level: A
*************************** 27. row ***************************
                    id: 205
              Headline: The Textareas documentation page encourages using form fields without visible labels
WCAG Conformance Level: A
*************************** 28. row ***************************
                    id: 206
              Headline: The Tooltips documentation page contains inaccurate ARIA content
WCAG Conformance Level: UNDEFINED
*************************** 29. row ***************************
                    id: 207
              Headline: The reference to aria-describedby on the Tooltips documentation page should be hyperlinked to the ARIA documentation page
WCAG Conformance Level: UNDEFINED
*************************** 30. row ***************************
                    id: 208
              Headline: The Tooltips documentation page does not contain any content that describes the keyboard-only and screen reader behaviors for the tooltip
WCAG Conformance Level: NA
*************************** 31. row ***************************
                    id: 209
              Headline: Create documentation regarding focus management
WCAG Conformance Level: A
*************************** 32. row ***************************
                    id: 210
              Headline: Document supported screen reader/browser combinations
WCAG Conformance Level: UNDEFINED
*************************** 33. row ***************************
                    id: 211
              Headline: Coding guidelines should have a link to an accessibility resource
WCAG Conformance Level: NA
*************************** 34. row ***************************
                    id: 212
              Headline: Document the Stack View's interstitial content issue for consumers
WCAG Conformance Level: A
*************************** 35. row ***************************
                    id: 213
              Headline: Should we mention our accessibility on the home page https://clarity.design/
WCAG Conformance Level: NA
*************************** 36. row ***************************
                    id: 214
              Headline: On the get-started page, we should mention Clarity's accessibility and emphasize the consumer's responsibility to implement an accessible end product.
WCAG Conformance Level: NA
*************************** 37. row ***************************
                    id: 215
              Headline: Components should be named after ARIA Widget Roles it they match them
WCAG Conformance Level: NA
*************************** 38. row ***************************
                    id: 218
              Headline: Add documentation to explain why we are not using visible labels for form fields on the login page
WCAG Conformance Level: A

Questions

  1. Is Clarity an authoring tool? See https://www.w3.org/WAI/standards-guidelines/atag/.