{"id":918,"date":"2023-06-20T12:39:40","date_gmt":"2023-06-20T12:39:40","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=918"},"modified":"2023-09-04T13:19:27","modified_gmt":"2023-09-04T13:19:27","slug":"aria-haspopup-less-is-more","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2023\/06\/20\/aria-haspopup-less-is-more\/","title":{"rendered":"aria-hasPopUp less is more"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-920 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/06\/laff.jpg\" alt=\"It's Patrick Lauke and the poop less party people, gurning and grinning in celebration of hasPopUp's improved support!\" width=\"953\" height=\"423\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/06\/laff.jpg 953w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/06\/laff-300x133.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/06\/laff-768x341.jpg 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/p>\n<p><strong>Updated 4th September 2023<\/strong><\/p>\n<p>I first tested and reported support in the critically acclaimed 2021 article <a href=\"https:\/\/html5accessibility.com\/stuff\/2021\/02\/02\/haspopup-haspoop\/\">hasPopup hasPoop<\/a>. I then retested <strong>09\/02\/2023<\/strong> \u2013\u00a0 JAWS and NVDA, no change to\u00a0<a href=\"https:\/\/html5accessibility.com\/stuff\/2021\/02\/02\/haspopup-haspoop\/#results\">results reported<\/a> in 2021.<\/p>\n<h2>Movement at the station<\/h2>\n<p>latest testing&#8230;<\/p>\n<h3>Elation<\/h3>\n<p>The latest version of JAWS 2023 June update (released 20\/6\/2023) now supports all <code>aria-haspopup<\/code> values on <code>button<\/code> and <code>link<\/code>.<\/p>\n<p>The latest version of NVDA 2023.2\u00a0 (released 4\/9\/2023) now supports all <code>aria-haspopup<\/code> values on <code>button<\/code> and <code>link<\/code>.<\/p>\n<h3>Despondency no more<\/h3>\n<p><del>I thought NVDA had also implemented the same support recently, but on testing it found that although support has been implemented it has not yet made it into the release version.\ud83d\ude11<\/del><\/p>\n<h3>Relief<\/h3>\n<p><iframe loading=\"lazy\" src=\"https:\/\/front-end.social\/@matuzo\/111005424059122602\/embed\" width=\"500\" height=\"250\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h3>Minimalism<\/h3>\n<p>I also found that Narrator now announces &#8220;has pop up&#8221; when the attribute is present on links and buttons, but does not announce the token values.<\/p>\n<h2>The Theory<\/h2>\n<p>In theory <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#aria-haspopup\"><code>aria-haspopup<\/code><\/a> can be really useful as a hint to screen reader peeps as to what type of content will <em>pop up<\/em> when they activate a control.<\/p>\n<table>\n<caption>values for <code>aria-haspopup<\/code><\/caption>\n<thead>\n<tr>\n<th>Value<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>false (default)<\/th>\n<td>Indicates the element does not have a popup.<\/td>\n<\/tr>\n<tr>\n<th>true<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#menu\"><code>menu<\/code><\/a>.<\/td>\n<\/tr>\n<tr>\n<th>menu<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#menu\"><code>menu<\/code><\/a>.<\/td>\n<\/tr>\n<tr>\n<th>listbox<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#listbox\"><code>listbox<\/code><\/a>.<\/td>\n<\/tr>\n<tr>\n<th>tree<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#tree\"><code>tree<\/code><\/a>.<\/td>\n<\/tr>\n<tr>\n<th>grid<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#grid\"><code>grid<\/code><\/a>.<\/td>\n<\/tr>\n<tr>\n<th>dialog<\/th>\n<td>Indicates the popup is a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#dialog\"><code>dialog<\/code><\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\"><strong>Note:<\/strong><br \/>\nThis property is deprecated as a <strong>global property<\/strong> in ARIA 1.2.<\/p>\n<p class=\"note\">Roles it can used on:<\/p>\n<ul>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#application\"><code>application<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#button\"><code>button<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#combobox\"><code>combobox<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#gridcell\"><code>gridcell<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#link\"><code>link<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#menuitem\"><code>menuitem<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#slider\"><code>slider<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#tab\"><code>tab<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#textbox\"><code>textbox<\/code><\/a><\/li>\n<li><a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#treeitem\"><code>treeitem<\/code><\/a><\/li>\n<\/ul>\n<h2>The Current Reality<\/h2>\n<ul>\n<li class=\"note\">Results from the <a href=\"https:\/\/cdpn.io\/stevef\/debug\/eYBmQaw\">test file<\/a>, using latest browser, OS and screen reader versions:\n<ul>\n<li class=\"note\">Modern browsers expose <code>aria-haspopup<\/code> in accessibility APIs.<\/li>\n<li class=\"note\">The support for <code>aria-haspopup<\/code> is <strong>now good in latest JAWS<\/strong>, is better in latest Narrator,<\/li>\n<li class=\"note\">The support for <code>aria-haspopup<\/code> is <strong>now good in latest <\/strong>NVDA<\/li>\n<li class=\"note\"><code>aria-haspopup<\/code> is <strong>now<\/strong>\u00a0a practical method to <em>robustly<\/em>\u00a0convey information to screen reader users on Windows about pop ups of type <code>listbox<\/code>, <code>grid<\/code>, <code>tree<\/code> or <code>dialog<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"overflow-x: scroll;overflow-y: auto;\">\n<table>\n<caption id=\"results\" tabindex=\"-1\"><em>selected<\/em> screen reader announcements for <code>aria-haspopup<\/code><\/caption>\n<thead>\n<tr>\n<th>Value<\/th>\n<th>JAWS<\/p>\n<p><code>&lt;button&gt;<\/code><\/th>\n<th>JAWS<\/p>\n<p><code>&lt;a&gt;<\/code><\/th>\n<th>NVDA<\/p>\n<p><code>&lt;button&gt;<\/code><\/th>\n<th>NVDA<\/p>\n<p><code>&lt;a&gt;<\/code><\/th>\n<th><strong>VoiceOver<\/strong><\/p>\n<p><code>&lt;button&gt;<\/code><\/th>\n<th><strong>VoiceOver<\/strong><\/p>\n<p><code>&lt;a&gt;<\/code><\/th>\n<th>Narrator<\/p>\n<p><code>&lt;button&gt;<\/code><\/th>\n<th>Narrator<\/p>\n<p><code>&lt;a&gt;<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>false (default)<\/th>\n<td>button \u2714\ufe0f<\/td>\n<td>link \u2714\ufe0f<\/td>\n<td>button \u2714\ufe0f<\/td>\n<td>link \u2714\ufe0f<\/td>\n<td>button \u2714\ufe0f<\/td>\n<td>link \u2714\ufe0f<\/td>\n<td>button \u2714\ufe0f<\/td>\n<td>link \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>true<\/th>\n<td>button menu \u2714\ufe0f<\/td>\n<td>link hasPopUp menu \u2714\ufe0f<\/td>\n<td>menu button subMenu \u2714\ufe0f<\/td>\n<td>subMenu link \u2714\ufe0f<\/td>\n<td>menu pop-up button \u2714\ufe0f<\/td>\n<td>Menu pop-up link \u2714\ufe0f<\/td>\n<td>button collapsed \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>menu<\/th>\n<td>button menu \u2714\ufe0f<\/td>\n<td>link hasPopUp menu \u2714\ufe0f<\/td>\n<td>menu button subMenu \u2714\ufe0f<\/td>\n<td>subMenu link \u2714\ufe0f<\/td>\n<td>menu pop-up button \u2714\ufe0f<\/td>\n<td>Menu pop-up link \u2714\ufe0f<\/td>\n<td>button collapsed \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>listbox<\/th>\n<td>button hasPopUp listbox \u2714\ufe0f<\/td>\n<td>link hasPopUp listbox \u2714\ufe0f<\/td>\n<td>menu button opens list \u2714\ufe0f<\/td>\n<td><span style=\"letter-spacing: -0.315px;\">opens list, link<\/span>\u2714\ufe0f<\/td>\n<td>listbox pop-up button \u2714\ufe0f<\/td>\n<td>listbox pop-up link \u2714\ufe0f<\/td>\n<td>button hasPopUp \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>tree<\/th>\n<td>button hasPopUp tree \u2714\ufe0f<\/td>\n<td>link hasPopUp tree \u2714\ufe0f<\/td>\n<td>menu button opens tree \u2714\ufe0f<\/td>\n<td><span style=\"letter-spacing: -0.315px;\">opens tree, link<\/span>\u2714\ufe0f<\/td>\n<td>tree pop-up button \u2714\ufe0f<\/td>\n<td>tree pop-up link \u2714\ufe0f<\/td>\n<td>button hasPopUp \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>grid<\/th>\n<td>button hasPopUp grid \u2714\ufe0f<\/td>\n<td>link hasPopUp grid \u2714\ufe0f<\/td>\n<td>menu button opens grid \u2714\ufe0f<\/td>\n<td><span style=\"letter-spacing: -0.315px;\">opens grid, link<\/span>\u2714\ufe0f<\/td>\n<td>grid pop-up button \u2714\ufe0f<\/td>\n<td>grid pop-up link \u2714\ufe0f<\/td>\n<td>button hasPopUp \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<tr>\n<th>dialog<\/th>\n<td>button hasPopUp dialog \u2714\ufe0f<\/td>\n<td>link hasPopUp dialog \u2714\ufe0f<\/td>\n<td>button opens dialog \u2714\ufe0f<\/td>\n<td><span style=\"letter-spacing: -0.315px;\">opens dialog, link<\/span>\u2714\ufe0f<\/td>\n<td>dialog pop-up button \u2714\ufe0f<\/td>\n<td>dialog pop-up link \u2714\ufe0f<\/td>\n<td>button hasPopUp \u2714\ufe0f<\/td>\n<td>link hasPopUp \u2714\ufe0f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p class=\"note\">Note that how the UI is conveyed aurally differs across screen reader. This is definitely not something that we need concern ourselves with. There is no normative or informative document as to how HTML UI is to be announced to people by screen readers.<\/p>\n<h2><em>Legacy poop!<\/em> What can we do?<br \/>\n<em>Some<\/em> suggestions<\/h2>\n<p>Leave the <code>aria-haspop<\/code> attribute off an element in cases where the <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2015\/10\/thus-spoke-html\/\">Aural UI<\/a> is misleading\/incorrect and instead:<\/p>\n<p>Add the hint to the accessible name, for example:<\/p>\n<p><code>&lt;button aria-label=\"pick a date - <em><strong>opens grid<\/strong><\/em>\"&gt;pick a date&lt;\/button&gt;<\/code><\/p>\n<p>or use <code>aria-describedby<\/code>:<\/p>\n<p><code>&lt;button aria-describedby=\"grid\"&gt;pick a date&lt;\/button&gt;<\/code><\/p>\n<p><code>&lt;span hidden id=\"grid\"&gt;opens grid&lt;\/span&gt;<\/code><\/p>\n<p>or use CSS <code>:after<\/code><\/p>\n<pre><code>&lt;button id=\"grid\"&gt;pick a date&lt;\/button&gt;\r\n#grid::after \r\n{content: \" opens grid\"; \r\nclip: rect(0 0 0 0); \r\nclip-path: inset(50%);\r\nheight: 1px;\r\noverflow: hidden;\r\nposition: absolute;\r\nwhite-space: nowrap; \r\nwidth: 1px; }<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-theme-id=\"5390\" data-default-tab=\"html,result\" data-user=\"stevef\" data-slug-hash=\"vYyOeKz\" data-pen-title=\"suggested aria-haspopup work arounds\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/vYyOeKz\"><br \/>\nsuggested aria-haspopup work arounds<\/a> by steve faulkner (<a href=\"https:\/\/codepen.io\/stevef\">@stevef<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\n<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/oXrbMDww9ss\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated 4th September 2023 I first tested and reported support in the critically acclaimed 2021 article hasPopup hasPoop. I then retested 09\/02\/2023 \u2013\u00a0 JAWS and NVDA, no change to\u00a0results reported in 2021. Movement at the station latest testing&#8230; Elation The latest version of JAWS 2023 June update (released 20\/6\/2023) now supports all aria-haspopup values on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[8],"class_list":["post-918","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility","tag-grid"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=918"}],"version-history":[{"count":23,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/918\/revisions"}],"predecessor-version":[{"id":962,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/918\/revisions\/962"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}