Page URL
https://www.telekom.de/unterwegs/for-friends-aktionscode

Issues List

Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Info and Relationships 1.3.1 (A)
Heading structure not accessible
Use of Color 1.4.1 (A)
Magenta button's keyboard focus does not have enough contrast
Observation Details

Keyboard focus of Magenta button changes background color. Difference between default and focused state does not meet minimum contrast ratio (3:1). Instead, the difference is barely visible at 1.1:1.

Remediation Notes

Ensure enough contrast (3:1) between different button states (default, focused, active, ...).

Observation Details
  • Multiple <h1> found

  • Empty <h1> found

  • All content is below <h2>, rendering the <h1> useless

Remediation Notes

Ensure there is only a single <h1> present and remove empty headings completely.

When there is only one <h1>, one <h2>, and all content of the page is nested into said <h2>, the extra heading level is unnecessary. Evaluate, removing the unnecessary heading level and placing the content below the main heading.

Accompanying Files
Observation Details

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets