🔗ally.maintain.hidden

Sets aria-hidden="true" on insignificant branches.

🔗Description

This allows an application to make sure no elements other than the exempted are exposed to the Accessibility Tree. This is necessary when rendering modal dialogs to prevent screen readers from accessing supposedly inert content.

ally.maintain.hidden observes DOM manipulations and automatically hides newly added elements when necessary.

🔗Usage

var handle = ally.maintain.hidden({
  context: '.within-filter-selector',
  filter: '.except-filter-selector',
});

handle.disengage();

🔗Arguments

Name	Type	Default	Description
context	`<selector>`	`documentElement`	The scope of the DOM in which to search. The first element of a collection is used.
filter	`<selector>`	`null`	The significant elements to exclude from being disabled.

🔗Returns

A <service> interface, providing the handle.disengage() method to stop the service.

🔗Examples

🔗Example: ally.maintain.hidden Example

ally.maintain.hidden Example on jsbin.com

play with the example on jsbin.com or open the source document

🔗Notes

NOTE: Internet Explorer 10 will not update changes made to elements within the inert sub-trees, because it does not support MutationObserver and Mutation Events are too much of a burden.

🔗Related resources

ally.maintain.disabled is a service disabling interactive elements in the DOM
ally.get.insignificantBranches is used to identify the elements to hide

ally.js