1.4.13.AA. Content on Hover or Focus (high)
As a low-vision person,
I want that:
Elements / text appearing on mouse hover or keyboard focus to be:
- Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
- Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
So that
- Users with low vision can view content on hover or focus without reducing the desired magnification level. Currently, they may not have enough time to perceive additional content without distraction.
- Users with low pointer accuracy can dismiss unintentionally triggered additional content.
It is important to provide a design that allows users to perceive the additional content and dismiss it without disrupting their page experience.
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
15 | Pop-up information does not allow mouse hover: .Stat Data Explorer (BETA) | Hovering the mouse over the input field displays a custom pop-up. Moving the mouse from input field to the pop-up dismisses the pop-up. So User with low vision often magnify the screen content and move the magnified area (the viewport) around the screen via the mouse cursor. Therefore, it is important that the mouse cursor can be positioned above content. If pop-up information is dismissed when the cursor is moved towards it, low vision users cannot read the information. |
Ensure the pop-up remains open when the user moves the cursor to the pop-up, for example by position the pop-up adjacent to the input field and amending the even handlers to allow the pop-up to stay open. Note: This Success Criterion does not apply to content supplied via the 'title' attribute. |
|
'' | .Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 | ------ | Ensure the help pop-up allows users to move the cursor to the pop-up and ensure the pop-up closes when the Escape key is pressed. Additionally, add the attribute role="img" to the image to ensure the 'aria-label' attribute is read by screen readers, and remove the 'focusable' attribute as this can interfere with keyboard accessibility. As the character used to mark the filters is the bullet character, this should be mentioned in the help text. Consider using the word "pinned" as this seems to be the word that has been added to the specific filters using hidden text. Also see: #808 |
|
'' | .Stat Data Explorer (BETA) | Ensure the pop-up that shows the full filter path enables users to move the cursor to the pop-up. Additionally, as this pop-up obscures content, ensure the pop-up closes when the Escape key is pressed. This can be managed via an 'onkeydown' event handler on the element. |
||
16 | Issue 16 Content available on hover .Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 | Users can tab to the copyright symbol to see the Terms and Conditions link, but when they press tab the popup disappears. Keyboard focus then moves to the link, however it is hidden for users. So users may not be able to access the Terms and Conditions page. |
It is recommended to include the terms and conditions as a standard link as part of the footer text and avoid hiding the extra content. |
|
The link of 'Terms & conditions' can be moved directly to the copyright symbol, making the text 'Terms & conditions' in the hover unclickable. In this case, the copyright symbol must take the colour of actionable items. The screen reader should then mentioned Copyright Terms and Conditions. More spaces should be added between the Copyright button and the link to the dataflow name to visually separate the both actions. |
Edited by SSandrine