'it depends™').Ī common criticism of disclosure widgets is that they make the discoverability of information difficult, and this find-in-page reveal helps mitigate that criticism. The following and will automatically open: Search for "heyo" instead of toggling me! Search for the word “heyo” if you’re using Chrome or Edge. Now, if a user performs a find-in-page (e.g., Ctrl or Command + F keys) when using a Chromium browser, then the content of these disclosure widgets can become discoverable. Previously, when a element lacked the open attribute, all of its descendant elements, except for the element, would be completely hidden to all users. Something to keep in mind as you determine just how important it is to restyle an element whose semantics are, at least presently, semi-reliant on their default styling. VoiceOver, JAWS and NVDA all have an issue with consistently announcing the toggled state of the disclosure widget if this marker is removed. However, Firefox and VoiceOver alone is not the only pairing that is impacted by the removal of the default triangle marker. If removing this marker so you can insert your own custom chevron or other visual expanded/collapsed state marker, it will actually make the state of the widget unclear with Firefox and VoiceOver, since the announcement of the default triangle direction is the only way state is communicated in that pairing. And here’s the Firefox bug I filed for this silliness. This can lead to some ‘interesting’ (ridiculous) announcements such as “black pointing small triangle” being part of the element’s accessible name. It’s worth noting that with Firefox in particular, it exposes the default disclosure widget triangle marker as part of the ’s accessible name. Impact of removing the default disclosure triangle Impact of styling a summary element? by Scott ( CodePen. The following is a quick example of how one could use the summary::after pseudo-element selector to create a CSS-only state indicator. Learn how the element is exposed to AT:ĭetails > summary How it is exposed is contingent on the platform/browser and screen reader pairing. However, its role may also be announced as “summary”, or even as a “disclosure triangle” because that’s a choice someone made on purpose… and even sometimes (unfortunately) no role at all. The element is ‘supposed to be’ exposed to assistive technologies as having a “ button” role. Generally, the element will expose an “expanded” or “collapsed” state, correlating to the open attribute existing or not on the parent, and thus programmatically conveying whether the associated content is shown or hidden. Interacting with the element will toggle the open attribute of its parent. It serves as its “legend” or “caption” as a means to represent the further contents of the element. The element, the only child content of the that will be persistently visible regardless of the widget’s state, acts as the disclosure widget trigger. While the attribute is used on the element, the state is programmatically communicated by its required element. When present it represents the widget being in the expanded state, and when absent the collapsed state. The open attribute of the element is used to modify the expanded or collapsed state of the widget. Nor is generally expected to be exposed to assistive technologies. The element serves as the containing element for the widget, though it is not expected to be directly interacted with by users. HTML classifies both elements as “interactive elements”. Yes, IE11 is no longer supported, but that doesn’t mean it’s been erased from existence. These native disclosure widgets function without JavaScript, unless you need to support legacy browsers. HTML’s and elements can be used to create native disclosure widgets - an expand/collapse widget where more information or interactive controls related to a topic (identified via the subtree content of the, or text preceding the disclosure widget) can be found. And elements, but there is more to tell, and there have been some changes since I last wrote at length about them in 2018.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |