Accessibility test on all components

[Febakke]

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 (All fixed)

• 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 feat(Accordion): use native <details> element #2190
• Chevron is scaling down and will be ultra small on small screens or with a lot of text in the title (Solved by feat(Accordion): use native <details> element #2190 )
• Text is centered when text is wider than screen. should be left aligned (solved by feat(Accordion): use native <details> element #2190 )

Alert

Guidelines

•  Correct usage of aria-live and moving focus is documented in storybook (This might be handled by the systemerrors)
• 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 (fixed)

• 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 Document use of aria-label on backlink version of breadcrumbs #2747

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 Preparations for CSS-package #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: aria-describedby connected to fieldset is not supported by screen readers #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 fix(Popover): use native Popover API and CSS refinements #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 component conveys its status by exposing the aria-label value (normally "loading").
  • Live announcements: If you change the children/content of the (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 component conveys its status by exposing the aria-label value (normally "loading").
  • Live announcements: If you change the children/content of the (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 Add disabled buttons to pagination when on first or last page #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 fix(Popover): use native Popover API and CSS refinements #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

Search

Misc

• See Should Search become part of Input component with type=search? #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

Tags

Zoom

• Should allow wrapping text (and remove redundant display: flex)

Textarea

**Misc** Very nice implementation of counter ❤️ - Can remove redundant `aria-relevant` - Can add `field-sizing: content` for better user experience when typing multiple lines

ToggleGroup

Zoom

• Does not support wrapping when zoom or too little space. Is this maybe some inspiration? https://www.gjensidige.builders/docs/core/?path=/story/packages-builders-components-toggles--variants

Misc

• Can remove redundant tabindex="0" on role="radiogroup"
• Should only use aria-checked, aka. remove aria-current

Tooltip

Screen reader

• Should always have aria-description instead of aria-describedby to allow access to tooltip when navigating in forms mode
• Should add aria-hidden="true" to tooltip box to prevent redundant announcement
• Should add example where tooltip is used as label, i.e. in story https://next.storybook.designsystemet.no/?path=/story/komponenter-togglegroup--only-icons the tooltip is not the description, but the actual label of the element - we should support this in some way

Misc

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

Tasks

Preview Give feedback

1. Create checklist for repeated use