Menu
I have it on good authority that aria-haspopup is appropriate for sub-menus (such as a popup context menu or sub-level menu). It's used on jQuery UI Selectmenu and also used in this great example.
What I've not been able to find out is whether aria-haspopup is applicable in the following 2 examples:
target="_blank" Is aria-haspopup appropriate in those situations? If not, are there ARIA attributes that should be used instead?
343
ARIA attributes can be used to make unsemantic HTML more accessible to screen reader users. For example, a developer who is struggling to style a native checkbox across multiple browsers might decide to use a div and some JavaScript to emulate one.
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.
The aria-label attribute defines a string value that labels an interactive element. The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. The aria-level attribute defines the hierarchical level of an element within a structure.
At this time, ARIA is not supported by all technologies. However, support for ARIA is most definitely growing. Those who do support ARIA include browsers, AT (i.e. screen readers, magnifiers, text-to-speech, etc.), applications, and JavaScript toolkits.
Officially it should be used only for menus or sub-menus, from the ARIA spec 1.0:
Indicates that the element has a popup context menu or sub-level menu.
The Whatsock style guide covers this under the 'modals' section:
It might sound like a good idea to notify screen reader users that a 'Popup' is attached by adding the attribute aria-haspopup="true" to the triggering element, but this is not a good idea. ... In short, don't use aria-haspopup unless you are triggering a menu.
There is some discussion about expanding the meaning in future revisions, but for the moment assume it is for menus.
I gave an answer about Bootstrap's tooltips which should help.
For pop-up browser windows, those are announced by screen readers anyway, no extra markup is needed. (NB: It helps to include a visual indicator of a new window for screen magnifier users.)
96
The WAI-ARIA 1.1 spec (which is the current one at the time of writing) expands the use of aria-haspopup compared to the 1.0 spec:
[
aria-haspopup] indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.A popup element usually appears as a block of content that is on top of other content. Authors MUST ensure that the role of the element that serves as the container for the popup content is
menu,listbox,tree,grid, ordialog, and that the value ofaria-haspopupmatches the role of the popup container.
So you should set the value of aria-haspopup to the same value as the role attribute on the triggered element. If set to true it will be interpreted as menu to align with the 1.0 spec where aria-haspopup was only meant for menus.
Note this however about tooltips (like Bootstrap popovers):
A
tooltipis not considered to be a popup in this context.
Pop-up browser windows are not HTML elements on the page so anchor elements with target="_blank" should not have a aria-haspopup attribute.
45
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
