I'm learning how to create navigation bars and dropdowns in Bootstrap 4, and instead of "data-target" attribute, I noticed "aria-haspopup = 'true'". Can you guys explain what this line does, and what values I can use for it? This is the full line of the code:
<a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
The aria-controls attribute identifies the element (or elements) whose contents or presence are controlled by the element on which the attribute is set, regardless of what type of interaction initiates the impacted behavior.
ARIA (Assistive Rich Internet Applications), is a spec from the World Wide Web Consortium (W3C) that was created to improve accessibility of web pages and applications by providing extra information to screen readers via HTML attributes.
WAI-ARIA refers to the Web Accessibility Initiative – Accessible Rich Internet Applications. WAI-ARIA is a technical specification written by the World Wide Web Consortium (W3C). The specification is most commonly used by developers to build interactive website content that is accessible to people with disabilities.
The value of aria-activedescendant refers to an owned element of the controlled element. For example, in a combobox, focus may remain on the combobox while the value of aria-activedescendant on the combobox element refers to a descendant of a popup listbox that is controlled by the combobox.
aria-haspopup
is not part of Bootstrap 4 but part of the Accessible Rich Internet Applications (WAI-ARIA), W3C recommendation.
According to this recommendation the aria-haspopup
attribute:
Indicates that the element has a popup context menu or sub-level menu.
This means that activation renders conditional content. Note that ordinary tooltips are not considered popups in this context.
A popup is generally presented visually as a group of items that appears to be on top of the main page content.
the goal of the aria-haspopup
attribute and of WAI-ARIA in general is to :
allow assistive technologies to convey appropriate information to persons with disabilities.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With