designsystemet Accessibility test on all components

Accessibility test on all components

Open Febakke opened this issue 5 months ago • 0 comments

Accordion

Navigation and Screen reader

[ ] Should open when pressing spacebar, enter, mouseclick and VO-click
[ ] Should have visible focusindicator
[ ] Should have correct role, label and state
[ ] State is announced when toggling
[ ] Title is announced when toggling
[ ] Logical tab-order

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Color and contrast

[ ] Color is not the only indicator of state change
[ ] Text, indicators and focus have good enough contrast

Misc

Should follow W3C standard - No heading
In Firefox the title and state is not announced by screen reader when toggling show/hide
- There is a bug in firefox that it drops announcing state, but it should read title
- Solved in #2190
Chevron is scaling down and will be ultra small on small screens or with a lot of text in the title (Solved by #2190 )
Text is centered when text is wider than screen. should be left aligned (solved by #2190 )

Alert

Guidelines

[ ] Correct usage of aria-live and moving focus is documented in storybook (Look at
[ ] Importance of good content for Alerts are documented in storybook
[ ] How and when should one use role="alert"? Should this be the default?

Screen reader

Handled by guidelines

Contrast

[ ] Icon and text should have good enough contrast

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

We should concider removing aria-label on icons. The content inside the Alert should be enough to indicate importance of alert

Badge

Screen reader

[ ] Should have an aria-label.
- Should have role="img" and make aria-label prop required see discussion
- Documentation / guidelines in storybook

Contrast

[ ] Text inside badge should have good enough contrast

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Breadcrumbs

Navigation

[ ] Each link should have a focus indicator
[ ] Logical tab-order

Screen reader

[ ] When entering breadcrumbs it should announce the navigation role
[ ] If breadcrumbs is rendered as a single back button it should be a single link and not an nav
- [ ] It should also have an aria-label announcing that you are going back one level.
[ ] If the link is the same as the page the user is on, it should announce "current page"

Contrast

[ ] Text, icons and focus indicator should have good enough contrast

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Document how you set up the back link with aria-label

Button

Navigation

[ ] Button has a visible focus indicator
[ ] Click area is over 40px (24px is requirement)

Contrast

[ ] Text should have good enough contrast

Screen reader

[ ] Should have correct role, label and state

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Fix aria on loading button #2295
Consider adding documentation on when to use link and when to use button

Card

Screen reader

[ ] Should have correct role and label
[ ] If it is a linkcard the important link text should be the first element that is read. (Added a note to misc about this)

Navigation

[ ] Card has a visible focus indicator
[ ] Click area is over 40px (24px is requirement)

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Storybook: as should be as child
Storybook: Add that if the card is a link it should not have any interactive elements inside
Take another shot at changing the semantic order inside the cards to make it more accessible for screen readers. Relevant article
Fix story in storybook so that it scales when zoomed
Document: When should cards be in ul > li and when should they not?
Add figcaption to image

Checkbox

Navigation

[ ] Each checkbox should have a visible focus indicator
[ ] Toggle with spacebar

Screen reader

[ ] Should have correct role, label and state
[ ] Legend is read as a title for the checkbox group

Contrast

[ ] Checkbox in checked/unchecked have good enough contrast
[ ] All texts have good enough contrast

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Remove story with a checkbox without label
If you have a checkbox with description and there is a related error. The error should be read before the description
Add an aria-disabled on read-only checkboxes. (read only is not announced by screen reader)
We need to look at fieldsetdescriptions and their relations to inputs
Add a story with description on checkbox
Checkbox description is the only element that you can not style as a user of the designsystem

Chips

TODO - After #2321

Combobox

Consider using U-elements U-tags Our multiselect is not usable with screen readers as is. It might be better to use our resources into U-elements instead of continue on our own component

Divider

No WCAG requirements

Misc

[ ] Screen readers should not announce this component.

Dropdown

Screen reader

[ ] Should have correct role, label and state

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Can we use native popover API for better tab handling
Our dropdown API is implying one set structure, we should consider making more atomic

Error-summary

Misc

We need to do some adjustments to our error-summary
- remove connection between list-elemenets and header.
- aria-relevant="all" and aria-live="polite" are redundante
- We need to include a tabindex= "-1"so that you can move focus to the summary
- We need test the open/close story with NVDA, JAWS and Narrator

Fieldset

See separate issue: #2386

Misc

Better examples, should only be used for fields that are connected. Card information for example.

HelpText

Zoom

Is built on top of Popover, which uses max-width set in px. This should change to rem to support text scaling

Navigation

Arrow should be drawn by pseudo element or get aria-hidden="true" to avoid announcing "dialog with 2 items"
Popover should not have role="dialog" as this causes an extra screen reader stop where helptext title is announced again, instead of accessing helptext content
All this will be fixed if using Popover API as suggested in #2369

Misc

We should use aria-label instead of span class="ds-sr-only" for label text

Link

Zoom

Link is wrapping when zooming

Skeleton

Misc

Needs a11y have documentation:
- Focus management: When loading is done, you should manually move focus to the first heading of the loaded content, to make screen reader users aware the content is loaded.
- Accessible name: The <Loader> component conveys its status by exposing the aria-label value (normally "loading").
- Live announcements: If you change the children/content of the <Loader> (e.g. with the timedContent prop), this will be announced as it also has aria-live="polite".

Spinner

Misc

Needs a11y have documentation:
- Focus management: When loading is done, you should manually move focus to the first heading of the loaded content, to make screen reader users aware the content is loaded.
- Accessible name: The <Loader> component conveys its status by exposing the aria-label value (normally "loading").
- Live announcements: If you change the children/content of the <Loader> (e.g. with the timedContent prop), this will be announced as it also has aria-live="polite".

Modal

Zoom

Should allow to grow to top and bottom of window to avoid too small area (gets max-height from browser which we should overwrite)
Should set max-width in rem and not px to allow text only zoom

Screen reader

Missing aria-label or aria-labelledby on dialog element
Should have aria-label on close button (not title), and use aria-hidden on inner SVG
Should consider documenting autoFocus regardless of form fields? (works on anything that can receive focus)
Should consider moving x before heading so screen reader users does not skip the heading element

NativeSelect

Not much to test on this component. Do zoom and screen reader tests.

Screen reader

test that labels and descriptions are read correctly

Misc

Consider remove the mutliple select example from storybook
Consider renaming to Select

Pagination

Not much to test on this component. Do zoom and screen reader tests.

Zoom

Must allow wrapping to allow zooming

Screen reader

Should change to aria-current="page"
Should implement #2282
Should add aria-hidden="true"
Should be able to change label to something more descriptive: Navigate between datasets etc.

Documentation

Document how to move focus when clicking pagination item in a single page application

Misc

Should add &ellipsis; instead of ... to get the correct ellipsis from font
Could simplify itemLabel to become just a string?

Popover

Zoom

Popover max-width set in px. This should change to rem to support text scaling

Navigation

Arrow should be drawn by pseudo element or get aria-hidden="true" to avoid announcing "dialog with 2 items"
Popover should not have role="dialog" as this causes an extra screen reader stop instead of announcing content
All this will be fixed if using Popover API as suggested in #2369

Radio

Same as Checkbox:

Navigation

[ ] Each checkbox should have a visible focus indicator
[ ] Toggle with spacebar

Screen reader

[ ] Should have correct role, label and state
[ ] Legend is read as a title for the checkbox group

Contrast

[ ] Checkbox in checked/unchecked have good enough contrast
[ ] All texts have good enough contrast

Zoom

[ ] All content is visible when zooming in 400%
[ ] All content is visible when text only zoom is 200%
[ ] Content is visible when changing text spacing

Misc

Remove story with a checkbox without label
If you have a checkbox with description and there is a related error. The error should be read before the description
Add an aria-disabled on read-only checkboxes. (read only is not announced by screen reader)
We need to look at fieldsetdescriptions and their relations to inputs
Add a story with description on checkbox
Checkbox description is the only element that you can not style as a user of the designsystem

Misc

See #2388
Clea button now announce "Empty" for screen reader users which can be confusing (native type=search also shows clear x but skips this for screen reader users as they have shortcuts for clearing fields anyway)

SkipLink

Works like a charm ❤️

Switch

Add an aria-disabled on read-only checkboxes. (read only is not announced by screen reader)

Table

Misc

Should we add role to all elements to elements to ensure we always have table behavior regardless of display (often display: flex is used on tables to achieve responsive approaches)? (see https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html)
Should Table.HeaderCell have sort?: true | 'none' | 'ascending' | 'descending'} instead of having a separate sortable property to avoid confusion and more 1:1 api with aria-sort?

Tabs

Zoom

Make convention for what to do with wrapping or similar when zooming

Misc

Should not have tabindex="0" on tablist
Consider building on top of https://u-elements.github.io/u-elements/elements/u-tabs to outsource always being aligned with standards and future proofing for web components support
Missing role="tabpanel" around panels

Misc

Always test components with content before and after
We need to define what smaller devices we should test on?

### Tasks
- [ ] Create checklist for repeated use

Aug 30 '24 09:08 Febakke

designsystemet designsystemet copied to clipboard

Accessibility test on all components

Same as Checkbox:

Misc

designsystemet
designsystemet copied to clipboard