21 issues found on 5G Netz

Ensure, text stays legible with increased text spacing. This can be done by

using (semi-)transparent background color on the container

using a background image that can handle increased text spacings

reflowing text content independently of image content, so that e.g. text wraps into multiple columns to be kept in the top section of the image

Evaluate removing overflow: hidden.

Ensure to provide a mechanism to pause, stop, hide for all moving objects / animations that automatically start and last longer than 5 seconds.

Also ensure to respect user preferences like prefers-reduced-motion, and reduce animation. You can use a media query as follows to wrap all animation to ensure animations are only shown to users that want to see them. (Side note: this is not a stand-alone remediation for the issue; it is an additional step. The pause, stop, hide mechanism must exist anyways)

@media screen and (prefers-reduced-motion: reduce) { }

Multiple issues need to be remediated for the news tile's links. Ideally the tile should follow a semantic HTML "card" structure as outlined in numerous observations before already.

To just remediate the link purpose issue of the given observation, the link's accessible name (coming from the images alt right now) must communicate the link's purpose. For the "Mehr erfahren" link, one option could be use an id on the tile's heading and use it to label the link like this: <a href="..." aria-labelledby="news-card-heading-testsieger" id="news-card-link-testsieger">Mehr erfahren</a>. When doing so, ensure the heading actually describes the link's purpose.

It is however not recommended to just fix this, as the tile (card) has more issues that could be remediated by following the structure of a semantically correct marked up HTML card:

A good idea about the card structure can be found in observation "Content card link purpose not determinable" (2.4.4 Link Purpose (In Context)) for audit sample "Tarife". Basically, you limit one card (<article>) to one link (<a>), place the card's heading as the first card's first child element and visually place the image at the top by using CSS order.

Ideally, the text content should be wrapped / reflowed by the browser and there should be as little "restriction" as possible.

To enforce a space character –instead of using CSS styles– make use of the non-breaking space HTML entity   and mark up the heading as <h2>Schon jetzt sind über 98&nbsp;% von Deutschland #DABEI</h2>. This helps, keeping the code clean and simple and does not rely on CSS, when HTML can already handle the issue.

Ensure a good content structure. All content that follows an HTML heading element should be described by that heading element.

It often helps, abstracting from any styling and looking at the document outline and content structure as it would appear in a word processing application or text editor. The main heading <h1> of the page should describe topic / purpose of the whole page. Headings of level 2 divide the page into "sections". Each level of heading hierarchy should follow the same idea. Headings of level 3 divide a "section" into "sub-sections", a.s.o.

Dialog windows must be made accessible. They must trap the keyboard focus when opened and must not allow scrolling of the page and focusing of underlying interactive elements. This will remediate the obscuring of focused elements.

Ensure always using semantic HTML button elements for buttons. Only use HTML links for directing the user to another resource.

Evaluate combination of button and link into one button like this:

<button>
  <svg><title>Video abspielen</title> ...</svg>
  Ihre Vorteile im größten 5G-Netz Deutschlands
</button>

Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Ensure interactive elements like links are distinguishable from body text in more ways than just by color. Ideally, links are underlined. Ideally, links also all look the same. This issue can be remediated by using one link component for all links, ensuring consistency in functionality and design.

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

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

Opening a dialog window with the keyboard must set the focus into the dialog window. Preferably onto the close button as the first interactive element in the dialog window. The focus must also be trapped inside the dialog window so the underlying page cannot be reached by keyboard while the dialog window is opened.

A better approach would be to use a <dialog> element for dialog windows.

Headings should be the first elements within sections as they describe all following content in said section. Ensure correct content structure by outlining all sections, headings and content.

Besides a correct content structure, immediate remediation for this issue can be done in the following ways:

• Create one heading out of eyebrow and heading, using <h2>Mehr Speed – Boostet Sie ins nächste Level</h2>

• Move eyebrow below heading in DOM order (<h2>Boostet Sie ins nächste Level</h2><p>Mehr Speed</p>) and visually display as eyebrow by using CSS order: -1 on the eyebrow

There are two routes to go for remediation.

1. Arguably, the informational content of the video trailer is already part of the page's text content. If all informational content of the video fits this, the video can be declared a "media alternative for text" and would be exempt of this success criterion. Doing so however requires explicit, clear labelling as such media alternative.

2. An alternative presentation of the visual contents of the video must be offered, presenting equivalent information either as text alternative or as an audio track

Be advised, route (1) "Media Alternative for Text" only works, if and when all informational content of the video already exists outside the video as text content. If any content is missing in the text content, the alternative presentation in route (2) must be used.

Ensure understanding the purpose of the used imagery and create a purpose equivalent text alternative to be accessible to e.g. screen readers by describing image's purpose in text or using the image's alt attribute.

Usually, images' text alternatives should also be unique. As the alternatives must be purpose equivalent and using multiple images for the exact same purpose would be a rare occasion, so should be the use of the same text alternative. If the purpose indeed is the exact same, evaluate the need to include this duplication in content.

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

Do not use semantic lists for non-list content. But do use semantic list for all list content.

Ensure, links can be differentiated from surrounding text content by at least one other visually perceivable factor. Preferably use underline to indicate link text as it is browser default and known pattern to users.