Accompanying Files
Observation Details
Filter button is not accessible. All filtering is impossible to be operated by keyboard.
Inside filter dialog window, only collapsible and "main buttons" at dialog window bottom are accessible via keyboard navigation. All other elements are not.
All interactive elements MUST be accessible via keyboard. As a Level A success criterion, it is crucial for operating a website.
Remediation Notes
Ensure complete navigation and operation by keyboard is possible. All interactive elements MUST be reachable by keyboard.
Only use semantic HTML elements to create interactive elements to ensure the base accessibility. If building custom interactive elements instead, you MUST refer to something like BFIT-Bund Handreichung "Accessible design of user interface elements" to ensure all necessary functionality is available. This MUST be done for all interactive elements that are custom built. Every button, every input, every link, ... Thus, using proper semantic HTML will decrease time and necessary effort to complete dramatically.
Please refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.
For example, filtering dialog window should use buttons, radio button groups, checkmark groups, etc. instead of relying on dozens/hundreds of nested <div> to "rebuild" functionality, native HTML elements already deliver.
The "Filter" button to open the filter dialog window looks as follows:
<div class="... clickable" data-qa="LST_FilterButton">
<i class="..." id="svg_wrapper_undefined">
<svg width="1em" height="1em" viewBox="0 0 20 20" color="currentColor">
<path>...</path>
</svg>
</i>
<p class="...">Filter</p>
</div>When it could just be:
<button><svg aria-hidden="true">...</svg>Filter</button>