{"id":1591,"date":"2025-02-13T14:00:00","date_gmt":"2025-02-13T12:00:00","guid":{"rendered":"https:\/\/accessdrum.com\/?p=1591"},"modified":"2026-01-23T10:17:19","modified_gmt":"2026-01-23T08:17:19","slug":"tips-tricks-thursday-06-accessible-forms-drop-down-fields-and-date-pickers","status":"publish","type":"post","link":"https:\/\/accessdrum.com\/bg\/tips-tricks-thursday-06-accessible-forms-drop-down-fields-and-date-pickers\/","title":{"rendered":"Tips &#038; Tricks Thursday 06: Accessible Forms \u2013 Drop-Down Fields and Date Pickers"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Creating accessible drop-down fields, especially those that are read-only or have additional features like filters, requires careful consideration to ensure all users can interact with them effectively. Here are some tips for both simple and complex cases:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:28px\">01. Read-Only Drop-Down Fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For read-only drop-down fields where users need to pick a value from a list:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use ARIA Roles and Properties:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use\u00a0<code>role=\"combobox\"<\/code>\u00a0for the drop-down container.<\/li>\n\n\n\n<li>Use&nbsp;<code>aria-haspopup=\"listbox\"<\/code>&nbsp;to indicate that the element opens a listbox.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-expanded<\/code>\u00a0to indicate whether the listbox is open or closed.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-readonly=\"true\"<\/code>\u00a0to indicate that the field is read-only.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keyboard Navigation:<\/strong> Ensure users can navigate the list using the arrow keys and select an option with the Enter key.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><div role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-readonly=\"true\" aria-labelledby=\"combobox-label\" aria-describedby=\"combobox-description\u201d>\n&nbsp;&nbsp;<label id=\"combobox-label\">Choose an option:<\/label>\n&nbsp;&nbsp;<span id=\"combobox-description\">Use the arrow keys to navigate the options and press Enter to select.<\/span>\n&nbsp;&nbsp;<input type=\"text\" aria-controls=\"listbox\" aria-autocomplete=\"list\" readonly>\n&nbsp;&nbsp;<ul role=\"listbox\" id=\"listbox\">\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 1<\/li>\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 2<\/li>\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 3<\/li>\n&nbsp;&nbsp;<\/ul>\n&nbsp;&nbsp;<div id=\"live-region\" aria-live=\"polite\" aria-atomic=\"true\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:28px\">02. Date Pickers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For date pickers:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use ARIA Roles and Properties:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use\u00a0<code>role=\"combobox\"<\/code>\u00a0for the input field.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-haspopup=\"dialog\"<\/code>\u00a0to indicate that the element opens a dialog.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-expanded<\/code>\u00a0to indicate whether the calendar is open or closed.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-readonly=\"true\"<\/code>\u00a0if the input field is read-only.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keyboard Navigation:<\/strong> Ensure users can navigate the calendar using the arrow keys and select date with the Enter key.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><div role=\"combobox\" aria-haspopup=\"dialog\" aria-expanded=\"false\" aria-labelledby=\"combobox-label\" aria-describedby=\"combobox-description\">\n&nbsp;&nbsp;<label id=\"combobox-label\">Select a date:<\/label>\n&nbsp;&nbsp;<span id=\"combobox-description\">Use the calendar to pick a date. Use arrow keys to navigate and Enter to select.<\/span>\n&nbsp;&nbsp;<input type=\"text\" aria-controls=\"calendar\" aria-readonly=\"true\">\n&nbsp;&nbsp;<div role=\"dialog\" id=\"calendar\">\n&nbsp;&nbsp;&nbsp;&nbsp;<!-- Calendar structure here -->\n&nbsp;&nbsp;<\/div>\n&nbsp;&nbsp;<div id=\"live-region\" aria-live=\"polite\" aria-atomic=\"true\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:28px\">03. Complex Drop-Down with Filter Field<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For date pickers:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use ARIA Roles and Properties:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use\u00a0<code>role=\"combobox\"<\/code>\u00a0for the drop-down container.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-haspopup=\"listbox\"<\/code>\u00a0to indicate that the element opens a listbox.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-expanded<\/code>\u00a0to indicate whether the listbox is open or closed.<\/li>\n\n\n\n<li>Use\u00a0<code>aria-controls<\/code>\u00a0to associate the filter input with the list.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Filter Field:<\/strong> Ensure the filter field is focusable and can be navigated to using the keyboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Keyboard Navigation:<\/strong> Allow users to type in the filter field to narrow down the list and the keyboard navigation (e.g., arrow keys, Tab) must work across both the filter and list elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><div role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-labelledby=\"combobox-label\" aria-describedby=\"combobox-description\">\n&nbsp;&nbsp;<label id=\"combobox-label\">Filter options:<\/label>\n&nbsp;&nbsp;<span id=\"combobox-description\">Type to filter the options. Use arrow keys to navigate and Enter to select.<\/span>\n&nbsp;&nbsp;<input type=\"text\" aria-controls=\"listbox\" aria-autocomplete=\"list\" placeholder=\"Filter options...\">\n&nbsp;&nbsp;<ul role=\"listbox\" id=\"listbox\">\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 1<\/li>\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 2<\/li>\n&nbsp;&nbsp;&nbsp;&nbsp;<li role=\"option\">Option 3<\/li>\n&nbsp;&nbsp;<\/ul>\n&nbsp;&nbsp;<div id=\"live-region\" aria-live=\"polite\" aria-atomic=\"true\"><\/div>\n<\/div><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:28px\">04. Additional Tips<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Clear Context:<\/strong> Use <code>aria-labelledby=\"combobox-label\"<\/code> to associate the combobox with its label and <code>aria-describedby=\"combobox-description\"<\/code> to associate the combobox with additional instructions on how to use it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Focus Management:<\/strong> Ensure that focus is managed correctly when the drop-down or calendar is opened and closed, i.e. the focus shifts to the dropdown list \/ calendar when activated and moves back to the field once a selection is made.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Screen Reader Announcements:<\/strong> Use ARIA live regions to announce changes in the list or calendar to screen readers. The <code>aria-atomic=\"true\"<\/code> attribute ensures that the entire content of the live region is announced when it changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Testing:<\/strong> Regularly test your implementation with screen readers and keyboard navigation to ensure accessibility.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating accessible drop-down fields, especially those that are read-only or have additional features like filters, requires careful consideration to ensure [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1557,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[610,609,13],"tags":[184,287,286,288,222,223,221,38,206,207],"class_list":["post-1591","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-for-content-creators","category-for-developers","category-tips","tag-aria","tag-date-pickers","tag-drop-downs","tag-filters","tag-focus","tag-forms","tag-keyboard-navigation","tag-screen-reader","tag-tips-tricks","tag-tips-tricks-thursday"],"uagb_featured_image_src":{"full":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday.webp",1024,1024,false],"thumbnail":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday-150x150.webp",150,150,true],"medium":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday-300x300.webp",300,300,true],"medium_large":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday-768x768.webp",768,768,true],"large":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday.webp",1024,1024,false],"1536x1536":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday.webp",1024,1024,false],"2048x2048":["https:\/\/accessdrum.com\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-28-14.10.23-Tips-Tricks-Thursday.webp",1024,1024,false]},"uagb_author_info":{"display_name":"Angel Petrov","author_link":"https:\/\/accessdrum.com\/bg\/author\/angel-petrov\/"},"uagb_comment_info":0,"uagb_excerpt":"Creating accessible drop-down fields, especially those that are read-only or have additional features like filters, requires careful consideration to ensure [&hellip;]","_links":{"self":[{"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/posts\/1591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/comments?post=1591"}],"version-history":[{"count":12,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/posts\/1591\/revisions"}],"predecessor-version":[{"id":1919,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/posts\/1591\/revisions\/1919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/media\/1557"}],"wp:attachment":[{"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/media?parent=1591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/categories?post=1591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/accessdrum.com\/bg\/wp-json\/wp\/v2\/tags?post=1591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}