{"id":262,"date":"2021-02-02T10:44:18","date_gmt":"2021-02-02T10:44:18","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=262"},"modified":"2023-02-09T10:45:08","modified_gmt":"2023-02-09T10:45:08","slug":"haspopup-haspoop","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/02\/02\/haspopup-haspoop\/","title":{"rendered":"hasPopup hasPoop"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-296 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/02\/smudge.jpg\" alt=\"cartoon faces of a perfect 50's american family, the 2 kids have cabbage leaves in their hands\" width=\"640\" height=\"179\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/02\/smudge.jpg 640w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/02\/smudge-300x84.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><strong>Update: 09\/02\/2023<\/strong> &#8211; retested in latest JAWS and NVDA, no change to <a href=\"#results\">results reported<\/a> in 2021<\/p>\n<p>In theory <a href=\"https:\/\/www.w3.org\/TR\/wai-aria\/#aria-haspopup\"><code>aria-haspopup<\/code><\/a> could 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<h2>The Theory<\/h2>\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\"><a href=\"https:\/\/rawgit.com\/w3c\/aria\/master\/#h-note-59\"><strong>Note:<\/strong><\/a><br \/>\nThis property is being deprecated as a global property in ARIA 1.2. In future versions it will only be allowed on roles where it is specifically supported.<\/p>\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 aria-haspopup in accessibility APIs.<\/li>\n<li class=\"note\">The support for <code>aria-haspopup<\/code> is <em>patchy<\/em> across popular Screen readers.<\/li>\n<li class=\"note\">The patchy support in Screen readers means <code>aria-haspopup<\/code> is not currently a practical method to <em>robustly<\/em> convey 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<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 \u274c<\/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 \u274c<\/td>\n<\/tr>\n<tr>\n<th>listbox<\/th>\n<td>button menu \u274c<\/td>\n<td>link hasPopUp listbox \u2714\ufe0f<\/td>\n<td>menu button subMenu \u274c<\/td>\n<td>subMenu link \u274c<\/td>\n<td>listbox pop-up button \u2714\ufe0f<\/td>\n<td>listbox pop-up link \u2714\ufe0f<\/td>\n<td>button \u274c<\/td>\n<td>link \u274c<\/td>\n<\/tr>\n<tr>\n<th>tree<\/th>\n<td>button menu \u274c<\/td>\n<td>link hasPopUp tree \u2714\ufe0f<\/td>\n<td>menu button subMenu \u274c<\/td>\n<td>subMenu link \u274c<\/td>\n<td>tree pop-up button \u2714\ufe0f<\/td>\n<td>tree pop-up link \u2714\ufe0f<\/td>\n<td>button \u274c<\/td>\n<td>link \u274c<\/td>\n<\/tr>\n<tr>\n<th>grid<\/th>\n<td>button menu \u274c<\/td>\n<td>link hasPopUp grid \u2714\ufe0f<\/td>\n<td>menu button subMenu \u274c<\/td>\n<td>subMenu link \u274c<\/td>\n<td>grid pop-up button \u2714\ufe0f<\/td>\n<td>grid pop-up link \u2714\ufe0f<\/td>\n<td>button \u274c<\/td>\n<td>link \u274c<\/td>\n<\/tr>\n<tr>\n<th>dialog<\/th>\n<td>button menu \u274c<\/td>\n<td>link hasPopUp dialog \u2714\ufe0f<\/td>\n<td>menu button subMenu \u274c<\/td>\n<td>subMenu link \u274c<\/td>\n<td>dialog pop-up button \u2714\ufe0f<\/td>\n<td>dialog pop-up link \u2714\ufe0f<\/td>\n<td>button \u274c<\/td>\n<td>link \u274c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\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>Oh 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>has pop up 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;has pop up 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: \" has pop up 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\" src=\"https:\/\/www.youtube.com\/embed\/QoYiQ8Qsozk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: 09\/02\/2023 &#8211; retested in latest JAWS and NVDA, no change to results reported in 2021 In theory aria-haspopup could be really useful as a hint to screen reader peeps as to what type of content will pop up when they activate a control. The Theory values for aria-haspopup Value Description false (default) Indicates the [&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-262","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility","tag-grid"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/262","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=262"}],"version-history":[{"count":37,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":852,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/262\/revisions\/852"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}