Page Elements

Page Elements

Modals #

Does preventing a modal from being hidden by clicking the background violate accessibility requirements? – This page demonstrates how to make a modal window as accessible as possible to assistive technology users. Modal windows are especially problematic for screen reader users. Often times the user is able to “escape” the window and interact with other parts of the page when they should not be able to. This is partially due to the way screen reader software interacts with the Web browser. 

Modal Dialog Example | WAI-ARIA Authoring Practices 1.2 (

Give the modal an ARIA aria-describedby attribute which will be linked to the id of some visually hidden text which describes the modal’s function, and how to exit it. A screen reader will read this information upon being focused on the modal 

Generally, modals are pieces of text that pop up inside of the main web page window, prompting you to an action or giving you a reminder. Modals should be used sparingly. Much like alerts, they disrupt the flow of what a user is doing if they cannot control the opening of a modal. If the user can control the opening and closing of the modal with buttons, that is a much better alternative. 

ARIA Modal guided accessibility test – axe DevTools  #

ARIA Modal guided accessibility test – axe DevTools 

Accessible Modal Dialogs   #

Accessible Modal Dialogs — A11ycasts #19 

iFrames #

Iframe element has non-empty accessible name – This rule applies to iframe elements that are included in the accessibility tree and that can be accessed by sequential focus navigation.

Page Elements

Powered by BetterDocs

Scroll to top