Update accessibility content for all components

[mrosvik]

We need to update the accessibility documentation for all components in Designsystemet to ensure that all relevant aspects of accessibility are properly and consistently documented for each component.

Template for accessibility content.

---

• Alert
• Avatar
• Badge
• Breadcrumbs @Febakke docs(breadcrumbs,button,card): update accessibility guidelines #4820
• Button @Febakke docs(breadcrumbs,button,card): update accessibility guidelines #4820
• Card @Febakke docs(breadcrumbs,button,card): update accessibility guidelines #4820
• Checkbox
• Chip
• Details
• Dialog
• Divider
• Dropdown
• ErrorSummary
• Field
• Fieldset
• Input
• Link
• List
• Pagination
• Popover
• Radio
• Search
• Select
• Skeleton
• SkipLink
• Spinner
• Suggestion
• Switch
• Table
• Tabs
• Tag
• Textarea @frankdahle Week 18
• Textfield @frankdahle Week 18
• ToggleGroup
• Tooltip

Typografi:

• Heading
• Label
• Paragraph
• ValidationMessage

[Febakke]

Suggestion from me and @frankdahle

This might be a radical suggestion, but our accessibility page could focus on: "What do I have to test on my implementation of this component to ensure it is accessible?" My hypothesis is that this is the most important for our users.

Each component have a list of "tests" written in a clear and simple language. We believe this will be easier to read and understand than, longer textblocks explaining accessibility aspects of the component.

NB Here is an example using textfield of what it could look like. Some of the points would need some extra clarification and links to relevant WCAG guidelines.

What do I have to test on my implementation of textfield?

• Is the correct input type set?
• Is an autocomplete attribute specified?
• Do error messages have clear and descriptive text?
• Are required fields clearly marked and explained?
• Is the label/help text written in plain language?
• Is the content in the prefix/suffix described in the label?
• Is the field width appropriate for the expected content?
• There is no placeholder text

We could also include a list of tests we already have tested on the component

What we test

• Do text fields have sufficient contrast against the background?
• Are the label and description properly associated with the input?
• Are error messages placed close to the field?

[mrosvik]

Relevant: #2355