Accessibility settings allow you to control how the rest of your webpage behaves while a modal gate is open. These settings help ensure modal gates are accessible to users of assistive technologies and follow current accessibility best practices.
Note: These settings only apply to modal gates. Inline gates are not affected.
Configuring accessibility settings
To configure these settings:
Go to Setup > Settings > Accessibility.
Adjust the settings as required.
Click Update.
Note: Only account administrators can access these settings.
Inert page elements when opening modal
When enabled, Formulayt will mark other top-level page elements as hidden and inert while a modal gate is open.
This setting is enabled by default and is recommended for most websites as it aligns with current accessibility guidance.
When a modal gate opens, Formulayt will:
Add aria-hidden="true" to other top-level page elements, hiding them from assistive technologies.
Apply the inert attribute where supported, preventing users from interacting with those elements.
Restore the previous state of these elements when the modal gate is closed.
If you experience compatibility issues with third-party components on your website, you can temporarily disable this setting while investigating the cause.
Why are page elements made inert?
When a modal gate opens, users should only be able to interact with the modal itself. This is recommended by the Web Accessibility Initiative (WAI) as it prevents keyboard focus and screen readers from accessing content behind the modal.
When enabled, Formulayt will:
Hide page elements outside the modal from assistive technologies.
Make those elements inert, prevent users from interacting with those elements while the modal is open.
Restore the page to its normal state when the modal is closed.
This helps create a more accessible experience for keyboard users and screen readers.
Inert exceptions
Some websites contain elements that should remain interactive even while a modal gate is open or you may wish to add exceptions for third-party components to remain available while a modal gate is open, such as:
Live chat widgets
Accessibility tools
Cookie consent banners
Essential site notifications
Note: Only add exceptions where there is a genuine requirement for users to continue interacting with those elements while a modal gate is displayed.
The Inert exceptions setting allows you to exclude these elements from being made hidden or inert.
To add an exception:
Enter the CSS class name of the element you want to exclude.
Add one class name per line.
Save your changes.
Formulayt will ignore:
Any top-level page element with one of the specified CSS classes.
Any top-level page element containing an element with one of the specified CSS classes.
This allows components such as consent managers, chat widgets, or other page overlays to remain active while a modal gate is open.
Enter class names only. Do not include the leading ..
Example
If your website contains a live chat widget with the CSS class:
live-chat
Adding this class as an exception allows the chat widget to remain available while a modal gate is open.
Summary
Accessibility settings help ensure modal gates follow accessibility best practices by preventing interaction with the rest of the webpage while a modal is open.
These settings only affect modal gates.
Enabling Inert page elements when opening modal follows current WAI accessibility guidance.
Formulayt adds aria-hidden="true" and, where supported, the inert attribute to other top-level page elements while a modal is open.
The previous state of these elements is restored when the modal closes.
Inert exceptions allow specific page elements to remain interactive when required.
Exceptions can be applied to a top-level element with the specified class or to a top-level element containing that class.
Only account administrators can modify these settings.