Aktionen (3 issues)

Carousel navigation / pagination focused after content
User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order

Alle Geräte (3 issues)

Clicking button "Weitere Geräte anzeigen" is not setting the right focus
User-activated dynamic content not in correct focus order
Filter Dialog Window not in order

Android Betriebssystem (1 issues)

Carousel navigation and pagination buttons in mixed order

Apple (2 issues)

User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order

Apple Watch Familienkonfiguration (1 issues)

User-activated dynamic content not in correct focus order

Apple iPad Air 11 2025 (2 issues)

User-activated dynamic content not in correct focus order
Non-interactive element is focusable

Handy Verkaufen (1 issues)

Nested elements focused before outer element is focused

Kider Uhr GPS Oneshop (1 issues)

User-activated dynamic content not in correct focus order

Kids-Watch (2 issues)

User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order

Magenta TV Streaming Dienste Partner DAZN (2 issues)

User-activated dynamic content not in correct focus order
Element without interactive function is focusable

Magenta Tarife Young (2 issues)

User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order

Roaming Optionen (4 issues)

Visually hidden elements in focus order are not shown on focus
User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order
Closing "Ländergruppe" dialog window does not set focus to opening element
User-activated dynamic content not in correct focus order

Smartphone Tarife (3 issues)

User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order
Non-interactive element is focusable

Smartphones (3 issues)

Clicking button "Weitere Geräte anzeigen" is not setting the right focus
User-activated dynamic content not in correct focus order
Filter Dialog Window not in order

Smartwatches (2 issues)

User-activated dynamic content not in correct focus order
Filter Dialog Window not in order

Sport (3 issues)

"Empfehlung ansehen" link in pop-up is out of order
User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order

Sport Megasport Option (4 issues)

User-activated dynamic content not in correct focus order
Focus order in stage section (pause animation)
Sports channel logo buttons duplicated
Element without interactive function is focusable

Tablets (2 issues)

User-activated dynamic content not in correct focus order
Filter Dialog Window not in order

Tastenhandys (2 issues)

User-activated dynamic content not in correct focus order
Filter Dialog Window not in order

Telefonieren SMS Ins Ausland (2 issues)

Visually hidden elements in focus order are not shown on focus
User-activated dynamic content not in correct focus order

Travel Mobil Optionen (2 issues)

Visually hidden elements in focus order are not shown on focus
User-activated dynamic content not in correct focus order

Travel Surf (1 issues)

User-activated dynamic content not in correct focus order

Vertragsverlängerung (4 issues)

User-activated dynamic content not in correct focus order
User-activated dynamic content not in correct focus order
Closing dialog does not set the right focus
Content of hidden accordion area is keyboard focusable

Xiaomi 15 (2 issues)

User-activated dynamic content not in correct focus order
Non-interactive element is focusable

iPad Vergleich (1 issues)

Visually hidden elements in focus order are not shown on focus

iPhone Erleben (2 issues)

Visually hidden elements in focus order are not shown on focus
User-activated dynamic content not in correct focus order

iPhone Vergleich (1 issues)

Visually hidden elements in focus order are not shown on focus
Observation Details

Dialog windows "So verlängern Sie Ihren Vertrag" and "So wechseln Sie Ihren Tarif" can be opened and closed via keyboard navigation. Closing the dialog window does not set the focus to the right element.

Closing a dialog window must reset the focus to the previously focused element that was used to open the dialog window.

Remediation Notes

On closing a dialog window, the keyboard focus must be set to the element that previously opened the dialog window.

A better approach would be, using the <dialog> element.

Accompanying Files
Observation Details

Content, including interactive elements, in hidden accordion areas are reachable via keyboard navigation.

Using TAB / SHIFT + TAB, links in collapsed accordion items can be reached. See the attached screenshot for a focus order visualization.

Remediation Notes

Hidden areas and their contents must not receive keyboard focus. If using ARIA attributes to extend accessibility for the accordion and aria-hidden="true" is used on collapsed accordion items, ensure also using display: none; in CSS styles for said collapsed accordion items as well.

Evaluate the use of <detail> + <summary> constructs to build a more accessible base-line accordion.

Priority: Moderate Unknown Page: Roaming Optionen Observation Permalink
Observation Details

Remediation Notes

After opening dialog window via keyboard and closing the dialog window via keyboard again, the focus must be set to the element that initiated the opening of the dialog window.

Priority: Moderate Unknown Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

From filter button, a dialog window with filtering options opens. There is one focusable element in that dialog window which is ordered after all main content.

Remediation Notes

Ensure, contents of the filtering dialog window are in correct focus order (after filter button)

Priority: Serious Medium Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

Loading more products into product list by clicking "Weitere Geräte anzeigen" should move the focus, so that the first dynamically added element becomes the next focusable element. This is not the case.

Using keyboard navigation, after clicking the button, the content is correctly loaded, but the focus is set in a way, so that the next focusable element (pressing TAB) is the button again; this means, navigating the product list by keyboard becomes nearly impossible

Using a screen reader to navigate (see attached GIF screencast),

  • after clicking the button, the content is loaded correctly

  • screen reader announces the change in URL (adding "?currentPage=2&tariffld=MF_17496&itemPerPage=12&e

    xcludedCurrentPage=1&bp=acquisition")

  • focus is set, so that to the next focusable element is the last element that was focused before the button. In this case, the price of the previous product card, which, while not being exactly what is needed, at least is not wrong

This however only works, when arriving at the button from the "right direction". Selecting the button from the next element in the DOM results in the focus being set to this exact element after dynamically loading of the new products. This way, the focus is set to after the product list and navigating to newly added devices is again nearly impossible

Remediation Notes

Important note:

While technically, this behavior does not completely remove access which would be needed to justify priority 1 "Critical", the combination of this issue with other issues, limiting the user experience with keyboard and screen reader navigation immensely already, still does make this issue a critical one.

Treating it as such in the current state, keyboard and screen reader users might not at all be able to navigate more than one page of products in the product list within the shop, is highly recommended.


Ensure, clicking the button "Weitere Geräte anzeigen" will result in:

  • Loading more products into the product list

  • Not announcing change of query parameters in the URL, as long as the change is not useful information to be announced

  • But ideally do announce the change of content (e.g. by using an ARIA live region and announce "X weitere Geräte werden angezeigt")

  • Setting the focus to the first focusable element before the first newly added element

    • This must be indicated by DOM structure, not by the element that was focused before the button was focused

    • This must work with keyboard and screen reader navigation alike

Accompanying Files
Observation Details

The carousel "Demnächst live" is focusable even when no interactive element is functioning. See desktop viewport.

Priority: Serious Low Page: Sport Observation Permalink
Accompanying Files
Observation Details

The pop-up window with "Empfehlung ansehen" link (element 15 in screenshot) is focused after the options (elements 3-14 in screenshot). The link is focusable, even if no selection is made and no "Empfehlung" was set. The "Empfehlung" is set when selecting elements in "Welchen Sport wollen Sie live bei MagentaTV sehen?".

Remediation Notes

The link "Empfehlung ansehen" should be in order after selecting sports channels, not after the tariff options.

The link should not be focusable at all when there is no selection made before.

Accompanying Files
Observation Details

While having the animation pause button as the first interactive element after the navigation does make sense, the visual presentation does not match the focus order. As the footnote that is focused after, is visually quite small, perception of the focus state can be an issue, as the eyes try to find a focussed state after the pause button.

Remediation Notes

Place the animation pause button in the top left corner to avoid mismatches between expected and actual focus order.

Accompanying Files
Observation Details

The buttons in section "Das komplette Sport Programm" with sports channel logos are duplicated. The HTML structure is as follows:

<div class="styles_Program__switch__10Eau">
  <button type="button"><img alt="Wow Logo" src="..." /></button>
  <button type="button"><img alt="Dazn Logo" src="..." /></button>
  <button type="button"><img alt="MagentaSport" src="..." /></button>
  <div class="styles_Program__switch-window__dWIIF">
    <div>
      <button type="button"><img alt="Wow Logo" src="..." /></button>
      <button type="button"><img alt="Dazn Logo" src="..." /></button>
      <button type="button"><img alt="MagentaSport" src="..." /></button>
    </div>
  </div>
</div>

This leads to three buttons not being visibly focused before reaching the actual buttons. See screenshot for jump from element 8 to element 12 in focus order. Elements 9-11 are the "hidden" buttons.

Remediation Notes

Ensure, cleaning up code, by removing duplicate and unused parts to provide clean, semantic HTML code.

Side note: Consider, moving the section to a tab group structure to match visual presentation, functionality, and code markup.

Accompanying Files
Observation Details

The carousel "Demnächst live" is focusable even when no interactive element is functioning. See desktop viewport.

Priority: Serious High Page: Apple Observation Permalink
Observation Details
  • Footnote Dialog Window


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Observation Details

Footnote dialog window is not keyboard accessible.


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Observation Details

Elements that are visually hidden, including but not limited to

  • skip links

  • interactive elements in dialog windows

  • interactive elements in collapsed accordion items

should not receive keyboard focus.

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Observation Details

All keyboard accessible dialog windows can be opened and closed. But the focus does not remain on (or is returned to) the triggering element.


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Serious High Page: Sport Observation Permalink
Observation Details

Footnote icon does not receive focus on dialog window close


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Serious High Page: Kids-Watch Observation Permalink
Observation Details

Footnote dialog window is not keyboard accessible.


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Observation Details

Footnote dialog window is not keyboard accessible.


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Serious Low Page: Aktionen Observation Permalink
Observation Details

The navigation and pagination buttons for offer carousels are focused after the carousel content, rendering them a lot less useful to users of keyboard navigation and assistive technology. While the focus order "content → navigation" is not per se a failure of this criterion, it arguably defies the navigation's purpose, to access it after the content.

See e.g.

The focus order in the carousel should be appropriate to the work task.

BFIT-Bund Handreichung "Accessible design of user interface elements – Carousel"

or, while not being the same use-case still can be applied here:

The rotation control button is the first element in the screen reader reading order.

ARIA Authoring Practices Guide (APG) "Auto-Rotating Image Carousel Example with Buttons for Slide Control"

Priority: Serious High Page: Aktionen Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Serious High Page: Shop Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Moderate Unknown Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

From filter button, a dialog window with filtering options opens. There is one focusable element in that dialog window which is ordered after all main content.

Remediation Notes

Ensure, contents of the filtering dialog window are in correct focus order (after filter button)

Priority: Serious Medium Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

Loading more products into product list by clicking "Weitere Geräte anzeigen" should move the focus, so that the first dynamically added element becomes the next focusable element. This is not the case.

Using keyboard navigation, after clicking the button, the content is correctly loaded, but the focus is set in a way, so that the next focusable element (pressing TAB) is the button again; this means, navigating the product list by keyboard becomes nearly impossible

Using a screen reader to navigate (see attached GIF screencast),

  • after clicking the button, the content is loaded correctly

  • screen reader announces the change in URL (adding "?currentPage=2&tariffld=MF_17496&itemPerPage=12&e

    xcludedCurrentPage=1&bp=acquisition")

  • focus is set, so that to the next focusable element is the last element that was focused before the button. In this case, the price of the previous product card, which, while not being exactly what is needed, at least is not wrong

This however only works, when arriving at the button from the "right direction". Selecting the button from the next element in the DOM results in the focus being set to this exact element after dynamically loading of the new products. This way, the focus is set to after the product list and navigating to newly added devices is again nearly impossible

Remediation Notes

Important note:

While technically, this behavior does not completely remove access which would be needed to justify priority 1 "Critical", the combination of this issue with other issues, limiting the user experience with keyboard and screen reader navigation immensely already, still does make this issue a critical one.

Treating it as such in the current state, keyboard and screen reader users might not at all be able to navigate more than one page of products in the product list within the shop, is highly recommended.


Ensure, clicking the button "Weitere Geräte anzeigen" will result in:

  • Loading more products into the product list

  • Not announcing change of query parameters in the URL, as long as the change is not useful information to be announced

  • But ideally do announce the change of content (e.g. by using an ARIA live region and announce "X weitere Geräte werden angezeigt")

  • Setting the focus to the first focusable element before the first newly added element

    • This must be indicated by DOM structure, not by the element that was focused before the button was focused

    • This must work with keyboard and screen reader navigation alike

Priority: Moderate Unknown Page: Smartwatches Observation Permalink
Accompanying Files
Observation Details

From filter button, a dialog window with filtering options opens. There is one focusable element in that dialog window which is ordered after all main content.

Remediation Notes

Ensure, contents of the filtering dialog window are in correct focus order (after filter button)

Priority: Moderate Unknown Page: Tastenhandys Observation Permalink
Observation Details

From filter button, a dialog window with filtering options opens. There is one focusable element in that dialog window which is ordered after all main content.

Remediation Notes

Ensure, contents of the filtering dialog window are in correct focus order (after filter button)

Priority: Moderate Unknown Page: Tablets Observation Permalink
Accompanying Files
Observation Details

From filter button, a dialog window with filtering options opens. There is one focusable element in that dialog window which is ordered after all main content.

Remediation Notes

Ensure, contents of the filtering dialog window are in correct focus order (after filter button)

Observation Details

Footnote dialog window is not keyboard accessible.


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Priority: Serious Medium Page: iPhone Erleben Observation Permalink
Accompanying Files
Observation Details

Elements that are visually hidden should not receive keyboard focus.

See links "Gerät ändern", "Wie wird der Wrt berechnet", "Weitere Informationen"

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Observation Details
  • Footnotes

  • Info icon dialog windows

  • Tarifdetails dialog window

  • PlusKarte dialog window


When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Accompanying Files
Observation Details

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.

Remediation Notes

Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:

<button>
  <svg aria-hidden="true">...</svg>
  <span>Anmelden</span>
</button>
Accompanying Files
Observation Details

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.

Remediation Notes

Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:

<button>
  <svg aria-hidden="true">...</svg>
  <span>Anmelden</span>
</button>
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Content out of focus order found:

  • Footnote dialog window is not keyboard accessible.

Remediation Notes

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.

Priority: Serious High Page: Xiaomi 15 Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Content out of focus order found:

  • Footnote dialog window is not keyboard accessible.

Remediation Notes

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.

Priority: Moderate Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.

Same goes for sidebar buttons

  • Tarif ändern

  • Tarif entfernen

  • Preisübersicht anzeigen

Remediation Notes

Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:

<button>
  <svg aria-hidden="true">...</svg>
  <span>Anmelden</span>
</button>
Accompanying Files
Observation Details

The carousel in section "Android-Handys völlig neu erleben - mit Google AI" uses navigation buttons and pagination buttons. The focus order is

  1. Navigation – Previous

  2. Pagination

  3. Navigation – Next

Remediation Notes

When using pagination and navigation on a carousel, the mechanisms should be independently usable.

Priority: Serious Medium Page: iPad Vergleich Observation Permalink
Observation Details

Elements that are visually hidden.

  • interactive elements in collapsed content

should not receive keyboard focus:

  • "Weitere Details anzeigen"

  • "Mehr anzeigen"

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Observation Details

Elements that are visually hidden.

  • interactive elements in collapsed content

should not receive keyboard focus:

  • "Weitere Details anzeigen"

  • "Mehr anzeigen"

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Accompanying Files
Observation Details

Elements that are visually hidden, including but not limited to

  • skip links

  • interactive elements in dialog windows

  • interactive elements in collapsed accordion items

should not receive keyboard focus.

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window "Länder der EU", "1", "2", "Ländergruppe EU", ...

  • Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Ländergruppe Dialog windows do not set focus on triggering element after being closed; use semantic dialog elements instead.

Remediation Notes

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.

Accompanying Files
Observation Details

Elements that are visually hidden, including but not limited to

  • skip links

  • interactive elements in dialog windows

  • interactive elements in collapsed accordion items

should not receive keyboard focus.

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window "Länderliste..."

  • Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Ländergruppe Dialog windows do not set focus on triggering element after being closed; use semantic dialog elements instead.

Remediation Notes

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.

Priority: Serious High Page: Travel Surf Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

    • "Länderliste..."

    • ! Footnote "Pässe jetzt schon im Inland reservieren unter pass.telekom.de!" (does not use global footnote)

  • Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Ländergruppe Dialog windows do not set focus on triggering element after being closed; use semantic dialog elements instead.

Remediation Notes

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.

Accompanying Files
Observation Details

The device cards in "Jetzt altes Smartphone verkaufen und von attraktiven Ankaufsaktionen profitieren" can be focused. The nested elements inside (footnote, CTA button) are focused before the card itself is focused

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.

Global Scope Priority: Serious High Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

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.