14 issues found on Apple

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.

Containers of any type (e.g. badges, teasers, stages) must not use fixed dimensions, if they contain text content.

Ensure, only using one single main landmark per page. The main landmark should also be at the top level. No content should live outside of landmarks.

Decorative images must use null alt attributes.

All non-decorative images must have a text alternative that serves an equivalent purpose of the image.

Ensure, making all informative content of the images (text, device choice, device specifics, logos, etc.) accessible through text.

If there is no way around using the delivered assets, this can be done by adding a visually hidden (screen reader only) CSS class, replicating the text and non-text content text alternative.

Example for a visually hidden class by Chris Coyer:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Ensure, links do not rely on color alone to be differentiated from (surrounding) body text. Preferably use underline to indicate text links as it is the default –thus user friendly– method.

Ideally, use link text to convey purpose directly and choose different link text content for each target. If not possible, and link texts are enriched by ARIA attributes, ensure the visible label is used as the first part of the accessible name in the exact wording. If the visible label is "Mehr Infos", the accessible name can be enriched to say "Mehr Infos über XYZ".

All headings must use semantic HTML elements (<h1>, <h2>, <h3>, ...). Ensure, adding text alternative to the images to convey displayed heading structure in text as well.

Choose remediation option, depending on definition of text content's purpose

• Use generic paragraph <p> for the "subline" text

• Combine heading <h1> and subline into one, e.g. following the structure <h1>Wir haben alle Neuheiten von Apple <span>Jetzt im besten Netz Deutschlands erleben</span></h1>

Ensure, all interactive elements' target size is at least 24×24px.

While this does not necessarily mean, e.g. an icon itself must be 24×24px, the clickable area around it counts as the target size, if there is no overlapping interactive element in that area. Ideally, the element's visual boundaries adhere to the minimum target size of 24×24px itself.

Ensure, for all dynamically added content that can be activated by user,

• focus cannot be set to focusable elements inside content, before content is being visually added (e.g. collapsed accordion items, or not yet opened dialog windows)

• dynamic content should be placed directly below the triggering element in the DOM order

• Opening e.g. a dialog window, will set the focus on the first focusable element inside the dialog window

• Activating a "Load more" button must ensure, focus, after content is loaded, either

  • is set to the first focusable element of newly loaded content or

  • is set to the first preceding focusable element of newly loaded content.

Ensure, for all dynamically added and then removed content that can be activated by user,

• keyboard focus

  • remains (e.g. collapsing/expanding accordion items) on the triggering element or

  • is set to (e.g. opening and closing a dialog window) the triggering element again.

When opened,

• dialog windows must receive keyboard focus and

• keyboard focus must be trapped inside the dialog window.

Ensuring placed and trapped keyboard focus to the opened dialog window will remediate this issue, as no interactive element outside of the opened dialog window should be focusable, thus cannot be focus obscured.

For more information about technical requirements of modal dialogs, refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Modal Dialog". Also, consider/evaluate use of HTML dialog element <dialgo>. See HTML specifications – The dialog element and Can I Use – Dialog for browser support information.

Ensure, only using textual elements for text content and do not use text in graphics.

If it is absolutely necessary to do so, ensure purpose equivalent text alternatives (see 1.1.1 Non-text Content) are accessible for all informative content of all images.