![]() If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true.That is, if there are other visually persistent elements, they are not included inside the heading element. ![]() The button element is the only element inside the heading element.If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used.The title of each accordion header is contained in an element with role button.Įach accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.End (Optional): When focus is on an accordion header, moves focus to the last accordion header.Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.If focus is on the first accordion header, either does nothing or moves focus to the last accordion header. Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header.If focus is on the last accordion header, either does nothing or moves focus to the first accordion header. Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header.Shift + Tab: Moves focus to the previous focusable element all focusable elements in the accordion are included in the page Tab sequence.Tab: Moves focus to the next focusable element all focusable elements in the accordion are included in the page Tab sequence.Some implementations require one panel to be expanded at all times and allow only one panel to be expanded so, they do not support a collapse function. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel. When focus is on the accordion header for a collapsed panel, expands the associated panel. And, in some cases, a snippet of the hidden content may also be visually persistent.Īccordion Example: demonstrates a form divided into three sections using an accordion to show one section at a time. In some accordions, there are additional elements that are always visible adjacent to the accordion header.įor instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section. Accordion Panel: Section of content associated with an accordion header. Terms for understanding accordions include: Accordion Header: Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content. The headings function as controls that enable users to reveal or hide their associated sections of content.Īccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page. An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |