Accessibility and quality issues found in automatic tests for designsystemet.no

[Camulos]

Description of the bug

Automatic testing of designsystemet.no, tools used:

• Siteimprove
• Sortsite

Findings in categories:

• Accessibility
• Errors
• Usability
• Standards / Web
• Compatibility

Accessibility findings in WCAG categories A and AA should be prioritized.

Images from Sortsite (20. september 2024)

Steps To Reproduce

Scan using automatic tools.

Additional Information

No response

### Tasks
- [ ] AAA - Some interactive elements are smaller than 44x
- [ ] ARIA - Skip link is not inside a landmark
- [ ] AAA - Our accent color do not have enough contrast on links and buttons to pass enhanced contrast requirements
- [ ] A - Add empty alternative texts to decorative SVGs
- [ ] Enhancment - Documentation pages do not start with a H1
- [ ] A - Add text alternative to videoes (iframes)
- [ ] Enhancment - Headers on front page and component overview have no content
- [ ] AAA - FontSize on front page is in px
- [ ] AA - Comments inside code snippets have low contrast
- [ ] A - A video plays longer than 5 seconds, without a way to pause it. (Sortsite scan)
- [ ] A - PDFs need title, language tag and tags for accessibility (Sortsite scan)
- [ ] A - Document title must not be blank. (Sortsite scan) - Vimeo embed
- [ ] A - alt text should not contain placeholders like 'picture' or 'spacer'. (Sortsite scan) - "image" alt text
- [ ] AA - Phrases in a different language should be in a span or div with a lang attribute. (Sortsite scan) - artikler med kode
- [ ] AAA - Several links on a page share the same link text, but go to different destinations.

[Camulos]

Level A finding in Sortsite: "A video plays longer than 5 seconds, without a way to pause it." and "Avoid animated images over 5 seconds long that can't be paused or stopped." Relates to WCAG 2.2.2 Pause, stop, hide Found 2 times, animations on front-page Respects user setting for reduced animations? Yes! As the animations is looped, and the content is not related to real-time updates/events it may be necessary to also give the user means to stop the animation by interacting with it. However as it respects the user preferences it could be that this issue is not critical. (For discussion)

[Camulos]

Level A finding in Sortsite:

• "Document title must not be blank."
• "PDFs must be tagged to be accessible by screen readers."
• "Use the lang attribute to identify the language of the page."

Relates to WCAG success criterion

• 2.4.2 Page titled.
• 1.3.1 Info and relationships
• 3.1.1 Language of page

Found 3 times in PDFs uploaded to the site: The first two documents is generated from Confluence using the save as PDF feature, the documents should have been adjusted in Acrobat Pro before uploading here. The third document seem to be related to "Dødsfall og arv", based on the link-text.

The PDFs is used in this page: https://www.designsystemet.no/grunnleggende/introduksjon/designprinsipper (found from the footer urls on the frontpage)

Adding title and language-tag is fairly simple for PDFs, but if this is something we want to do, there may be other issues as well that the accessibility scan in Acrobat would find. The tagging for accessibility may be more of a challenge to amend after the documents have been created.

It is possible that the content of these documents is easiest made available and recreated as web-pages?

[Camulos]

Level A finding in Sortsite: "SVG elements with graphic role attributes must have an accessible name." (SVG elements with role=img, role=graphics-document or role=graphics-symbol need an accessible name provided by the SVG title element or an ARIA label.) Relates to WCAG success criterion: 1.1.1 Non-text content

Found on 28 pages, multiple times on some pages

It looks like this is a problem almost everywhere there is any SVG-files, for example the three icons used to illustrate the 3 main call to action cards from the front page.

Many of these SVGs could be hidden with aria hidden, but even if hidden they should most likely be given an labelled by and their first child should be an title?

[mimarz]

Moving this to an epic as we'll have different sub-tasks to fix this.

[Camulos]

Level A finding in Sortsite: "Document title must not be blank." Relates to WCAG success criterion 4.1.2 Name, Role, Value

Found 2 places and it looks like it is when we embed video from Vimeo:

• https://www.designsystemet.no/bloggen/2023/derfor-trenger-vi-et-felles-designsystem
• https://www.designsystemet.no/bloggen/2024/v1rc1

The frames/iframes need to have the title-attribute set to avoid SR read the filename (urls?) instead.

[Camulos]

Level A finding in Sortsite: "Element li not allowed as child element in this context." Relates to WCAG success criterion 1.3.1 Info and Relationships

Found on this page: https://www.designsystemet.no/grunnleggende/designelementer/farger In selections for brand or mode here:

There are li-elements that are not set inside either ol or ul in these dropdowns.

[Camulos]

Level A finding in Sortsite: "alt text should not contain placeholders like 'picture' or 'spacer'." Relates to success criterion 1.1.1 Non-text Content

In this page: https://www.designsystemet.no/grunnleggende/designelementer/ikoner there is an image that uses the alt text "image" here:

[Camulos]

Level AA finding in Sortsite: "Phrases in a different language should be in a span or div with a lang attribute." Relates to success criterion 3.1.2 Language of parts

Found in this page: https://www.designsystemet.no/grunnleggende/for-utviklere/komposisjon Every time an code-example is inserted in the text, the SR will try to read them in Norwegian, however the codes should be read in english? Add span for each and add lang="en" for each such span?

[Camulos]

Level AAA finding "Several links on a page share the same link text, but go to different destinations." Relates to WCAG success criterion 2.4.9 Link purpose (Link Only) NB: AAA!

Found on 4 pages: https://www.designsystemet.no/bloggen/2024/v1rc1 https://www.designsystemet.no/monstre/feilmeldinger https://www.designsystemet.no/monstre/systemvarsler Link text: "Github" is used for 2 different urls in each of the pages above.

https://www.designsystemet.no/grunnleggende/introduksjon/designprinsipper Link text "Design principles" is used for 3 different urls.

Amend by writing unique link texts for each url, reflecting the topic on the linked-to-page.