{"id":34222,"date":"2025-05-22T16:13:53","date_gmt":"2025-05-22T15:13:53","guid":{"rendered":"https:\/\/reciteme.com\/au\/?p=34222"},"modified":"2026-01-28T11:03:58","modified_gmt":"2026-01-28T11:03:58","slug":"website-form-accessibility","status":"publish","type":"post","link":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/","title":{"rendered":"Web Form Accessibility: Proven Best Practices for Website Forms"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"34222\" class=\"elementor elementor-34222\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-85bb32d disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"85bb32d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d8276c\" data-id=\"5d8276c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13c4939 elementor-widget elementor-widget-ucaddon_punchline_cta\" data-id=\"13c4939\" data-element_type=\"widget\" data-widget_type=\"ucaddon_punchline_cta.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Punchline CTA -->\n<style>\/* widget: Punchline CTA *\/\n\n.punchline-bg-eaa {\n\tbackground-image:url('\/wp-content\/uploads\/2025\/01\/eumap-1.png');\n  \tbackground-color:#01349F;\n  \tbackground-position:center right;\n  \tbackground-size:cover;\n}\n\n.punchline-bg-ada {\n\tbackground-image:url('\/wp-content\/uploads\/2025\/01\/checker3Asset-2-8-1.png');\n  \tbackground-color:#06334A;\n  \tbackground-position:center right;\n  \tbackground-size:cover;\n}\n\n.punchline-bg-generic {\n\tbackground: rgb(6,51,74);\n\tbackground: linear-gradient(90deg, rgba(6,51,74,1) 0%, rgba(3,98,95,1) 100%);\n}\n\n.punchline-wrapper {\n  padding:20px 30px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  border-radius:8px;\n}\n\n.punchline-wrapper p {\n  color:white;\n  font-weight:600!important;\n  font-size:18px!important;\n  margin-bottom:0px!important;\n  padding-right:20px;\n}\n\n.punchline-wrapper a {\n    background: #FFB400;\n    border-radius: 5px !important;\n    line-height: 15px;\n    font-weight: 600;\n    font-size: 15px;\n    text-align: center;\n    color: #000;\n    padding: 15px 40px;\n  \tborder: 3px solid #FFB400;\n  transition: all ease 0.3s;\n  min-width:205px;\n}\n\n.punchline-wrapper a:hover {\n\tbackground:white;\n  color:#000;\n}\n\n@media only screen and (max-width:700px) {\n  .punchline-wrapper {\n  \tdisplay:block;\n  }\n  .punchline-wrapper a {\n  \tmargin-top:20px;\n    display:block;\n  }\n}\n\n\n<\/style>\n\n<div class=\"punchline-wrapper punchline-bg-generic\">\n    <p>\n        Get Your Free Accessibility &amp; Inclusion Toolkit\n    <\/p>\n    <a href=\"https:\/\/reciteme.com\/au\/download\/accessibility-and-inclusion-toolkit\/\">\n        Download Now\n    <\/a>\n<\/div>\n<!-- end Punchline CTA -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-aa70a44 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"aa70a44\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a76f212\" data-id=\"a76f212\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2631ba5 elementor-widget elementor-widget-text-editor\" data-id=\"2631ba5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Accessible forms are digital interfaces designed so that everyone, including people with visual, motor, or cognitive impairments, can complete and submit information effectively. By using semantic markup, clear labels, and intuitive navigation, these forms ensure equal access and a better user experience for all.<\/p><p>Beyond ethical considerations, legal standards such as the ADA, and the European Accessibility Act require compliant form design. This guide outlines what accessible forms are and why they matter for both users and organisations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-354ef2c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"354ef2c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a9a6723\" data-id=\"a9a6723\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-922e9e1 elementor-widget elementor-widget-text-editor\" data-id=\"922e9e1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Importance and benefits of form accessibility<\/h2><p>Accessible forms are essential because they ensure that users with disabilities, such as visual, motor, or cognitive impairments, can interact with web content just as efficiently as everyone else. By implementing clear labels, logical navigation, and semantic markup, organisations can meet <a href=\"https:\/\/reciteme.com\/au\/news\/understanding-the-web-content-accessibility-guidelines-wcag\/\">WCAG 2.1 standards<\/a>, which are often a requirement for regional accessibility laws.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6c49b1d disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c49b1d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b944f18\" data-id=\"b944f18\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-290e1bf elementor-widget elementor-widget-image\" data-id=\"290e1bf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Visitors-icon-300x300.png\" class=\"attachment-medium size-medium wp-image-34225\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Visitors-icon-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Visitors-icon-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Visitors-icon.png 321w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-3c88855\" data-id=\"3c88855\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ced249b elementor-widget elementor-widget-text-editor\" data-id=\"ced249b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are a multitude of different benefits that accessible forms can provide to your organisation. However, some of the key factors include:<\/p><ul><li><strong>Higher Completion Rates:<\/strong> When forms are easy to navigate and understand, users are less likely to abandon them, leading to improved conversion rates.<\/li><li><strong>Broader Audience Reach:<\/strong> Inclusive design opens the site to customers with disabilities, increasing the volume of potential customers you can find.<\/li><li><strong>Reduced Legal Risk:<\/strong> Compliance with accessibility standards mitigates the chance of costly lawsuits or fines related to non-compliance.<\/li><li><strong>Customer Loyalty:<\/strong> Seamless interactions builds trust. Additionally, satisfied users are more likely to return, recommend the site, and engage with services in the future.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-df188da disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"df188da\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52d38e9\" data-id=\"52d38e9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-47f2099 elementor-widget elementor-widget-text-editor\" data-id=\"47f2099\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In essence, investing in accessible forms is both an ethical responsibility and a strategic advantage, ensuring equal access while positively impacting the organisation\u2019s bottom line.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ddf436 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3ddf436\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ff4bb41\" data-id=\"ff4bb41\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c5f211 elementor-widget elementor-widget-text-editor\" data-id=\"4c5f211\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>The core principles of accessible form design<\/h2><p>Website forms can become accessible to people with disabilities by following the Web Content Accessibility Guidelines (WCAG) and embracing the <a href=\"https:\/\/reciteme.com\/au\/news\/pour-accessibility-principles\/\">POUR principles<\/a> (Perceivable, Operable, Understandable, and Robust).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cbe4199 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cbe4199\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-9f00343\" data-id=\"9f00343\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ef67ab7 elementor-widget elementor-widget-text-editor\" data-id=\"ef67ab7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Perceivable<\/strong> forms include descriptive labels associated with inputs using label elements, text alternatives for non-text content such as icons, clear field instructions, and sufficient colour contrast so that users with low vision or <a href=\"https:\/\/reciteme.com\/au\/news\/colour-blind-accessibility\/\">colour blindness<\/a> can detect information.<\/li><li><strong>Operable<\/strong> forms support keyboard navigation with logical focus order, avoid timed submissions without warning, and ensure interactive controls can be activated via different input methods.<\/li><li><strong>Understandable<\/strong> forms employ simple language, provide explicit error messages with guidance on how to fix issues, and maintain a consistent layout for users with cognitive impairments.<\/li><li><strong>Robust<\/strong> forms rely on semantic HTML, appropriate ARIA attributes when necessary, and proper validation to guarantee compatibility with assistive technologies and various browsers.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-36d0608\" data-id=\"36d0608\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-63e2cb7 elementor-widget elementor-widget-image\" data-id=\"63e2cb7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1-300x300.png\" class=\"attachment-medium size-medium wp-image-31754\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1-1024x1024.png 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1-768x768.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/What-are-the-levels-of-WCAG-Compliance-Header-1.png 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1209e5d disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1209e5d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d112c2\" data-id=\"9d112c2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e3621e elementor-widget elementor-widget-text-editor\" data-id=\"7e3621e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By integrating these <a href=\"https:\/\/reciteme.com\/au\/news\/best-practices-for-wcag-compliance\/\">WCAG-based practices<\/a>, designers can create inclusive forms that allow users with disabilities to interact with content, submit information accurately, and participate fully in digital experiences.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-623c694 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"623c694\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-8302eab\" data-id=\"8302eab\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e4413a0 elementor-widget elementor-widget-heading\" data-id=\"e4413a0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-medium\">Get a Free Accessibility Check of your Website<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d96d8d7 elementor-widget elementor-widget-text-editor\" data-id=\"d96d8d7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Get a free automated accessibility scan of your websites homepage. This will identify and highlight any compliance issues on your website, including inaccessible forms. Followed by recommendations on how to implement the necessary changes to make your website more accessible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5acb8ac elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"5acb8ac\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/au\/free-accessibility-check\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Run a Free Compliance Check Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-71f9e7e\" data-id=\"71f9e7e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81ea2d5 elementor-widget elementor-widget-image\" data-id=\"81ea2d5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"766\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1024x980.png\" class=\"attachment-large size-large wp-image-33845\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1024x980.png 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-300x287.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-768x735.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1536x1471.png 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-16bfaf0 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"16bfaf0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-11fdfc7\" data-id=\"11fdfc7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-53bda8a elementor-widget elementor-widget-text-editor\" data-id=\"53bda8a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Building accessible form controls<\/h2><p>The accessibility of your website forms often starts with how easy they are to use. This can include factors such as text inputs, checkboxes, select menus, and more. Here&#8217;s a close look at some of the key features you&#8217;ll need to implement when coding accessible forms on your website:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dee766b disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dee766b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-989a972\" data-id=\"989a972\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3301dae elementor-widget elementor-widget-text-editor\" data-id=\"3301dae\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Associating Labels with Inputs<\/h3><p>To ensure that each form control is clearly identified, use the <strong>&lt;label&gt;<\/strong> element to link descriptive text to an input via the <strong>&#8220;for&#8221;<\/strong> and <strong>&#8220;id&#8221;<\/strong> attributes. For example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2a2ce47 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2a2ce47\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1357243\" data-id=\"1357243\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1466b45 elementor-widget elementor-widget-text-editor\" data-id=\"1466b45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;username&#8221;&gt;Username:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;username&#8221; type=&#8221;text&#8221; name=&#8221;username&#8221; autocomplete=&#8221;username&#8221;&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6456d63 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6456d63\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e805b3c\" data-id=\"e805b3c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eca710c elementor-widget elementor-widget-text-editor\" data-id=\"eca710c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This linkage allows screen readers to announce the label when focusing on the input, and clicking the label sets focus to the control, beneficial for users with motor disabilities or small-screen devices. Because each <strong>&#8220;id&#8221;<\/strong> must be unique in the document, an input can only have one explicitly associated.<\/p><p>Alternatively, wrapping the input within its <strong>&lt;label&gt;<\/strong> eliminates the need for matching <strong>&#8220;for&#8221;<\/strong> \/ <strong>&#8220;id&#8221;<\/strong> pairs. For instance:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cf5395c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cf5395c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c0de8b9\" data-id=\"c0de8b9\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb0c69e elementor-widget elementor-widget-text-editor\" data-id=\"fb0c69e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>Email:<\/strong><br \/><strong>&lt;input type=&#8221;email&#8221; name=&#8221;email&#8221; autocomplete=&#8221;email&#8221;&gt;<\/strong><\/p><p><strong>&lt;\/label&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-47aaddf disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"47aaddf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7bacfa\" data-id=\"d7bacfa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c736a2a elementor-widget elementor-widget-text-editor\" data-id=\"c736a2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Text areas<\/h3><p>Text areas require similar treatment to text inputs but accommodate multi-line input. A <strong>&lt;textarea&gt;<\/strong> field must be paired with a <strong>&lt;label&gt;<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e960129 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e960129\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ac847e4\" data-id=\"ac847e4\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-98f109b elementor-widget elementor-widget-text-editor\" data-id=\"98f109b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;address&#8221;&gt;Enter your address:&lt;\/label&gt;&lt;br&gt;<\/strong><br \/><strong>&lt;textarea id=&#8221;address&#8221; name=&#8221;address&#8221; autocomplete=&#8221;street-address&#8221; rows=&#8221;4&#8243; cols=&#8221;50&#8243;&gt;&lt;\/textarea&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f337783 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f337783\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55f0eda\" data-id=\"55f0eda\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-73a471a elementor-widget elementor-widget-text-editor\" data-id=\"73a471a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By associating the label via <strong>for=&#8221;address&#8221;<\/strong> and <strong>id=&#8221;address&#8221;<\/strong>, screen readers announce <strong>\u201cEnter your address:\u201d<\/strong> when the user navigates to the text area. Additionally, providing an <strong>autocomplete=&#8221;street-address&#8221;<\/strong> attribute helps browsers and assistive technologies predict common address formats, streamlining user entry.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9548930 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9548930\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-46758b6\" data-id=\"46758b6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c528302 elementor-widget elementor-widget-text-editor\" data-id=\"c528302\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Checkboxes and Radio Buttons<\/h3><p>When presenting multiple checkboxes or radio buttons that form a logical group, wrap them in a <strong>&lt;fieldset&gt;<\/strong> and provide a <strong>&lt;legend&gt;<\/strong> to describe the entire set. Example for checkboxes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5ac8843 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5ac8843\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fad7864\" data-id=\"fad7864\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eaaec89 elementor-widget elementor-widget-text-editor\" data-id=\"eaaec89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;fieldset&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;legend&gt;Select your pizza toppings:&lt;\/legend&gt;<\/strong><br \/><strong>&lt;input id=&#8221;ham&#8221; type=&#8221;checkbox&#8221; name=&#8221;toppings&#8221; value=&#8221;ham&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;ham&#8221;&gt;Ham&lt;\/label&gt;&lt;br&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;input id=&#8221;pepperoni&#8221; type=&#8221;checkbox&#8221; name=&#8221;toppings&#8221; value=&#8221;pepperoni&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;pepperoni&#8221;&gt;Pepperoni&lt;\/label&gt;&lt;br&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;input id=&#8221;mushrooms&#8221; type=&#8221;checkbox&#8221; name=&#8221;toppings&#8221; value=&#8221;mushrooms&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;mushrooms&#8221;&gt;Mushrooms&lt;\/label&gt;&lt;br&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;input id=&#8221;olives&#8221; type=&#8221;checkbox&#8221; name=&#8221;toppings&#8221; value=&#8221;olives&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;olives&#8221;&gt;Olives&lt;\/label&gt;<\/strong><\/p><p><strong>&lt;\/fieldset&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fc320ac disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fc320ac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-81aecc1\" data-id=\"81aecc1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5169205 elementor-widget elementor-widget-text-editor\" data-id=\"5169205\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <strong>&lt;legend&gt;<\/strong> provides a programmatic label for the entire group; screen readers announce the legend for each individual control within the fieldset. Because some assistive technologies may repeat the legend text for each option, keep it concise. For example, \u201cSelect your pizza toppings\u201d rather than a lengthy explanation.<\/p><p>Here&#8217;s how it works for radio buttons:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b34d4b5 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b34d4b5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a22e32b\" data-id=\"a22e32b\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-97e4cb0 elementor-widget elementor-widget-text-editor\" data-id=\"97e4cb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;fieldset&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;legend&gt;Choose a shipping method:&lt;\/legend&gt;<\/strong><br \/><strong>&lt;input id=&#8221;overnight&#8221; type=&#8221;radio&#8221; name=&#8221;shipping&#8221; value=&#8221;overnight&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;overnight&#8221;&gt;Overnight&lt;\/label&gt;&lt;br&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;input id=&#8221;twoday&#8221; type=&#8221;radio&#8221; name=&#8221;shipping&#8221; value=&#8221;twoday&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;twoday&#8221;&gt;Two day&lt;\/label&gt;&lt;br&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;input id=&#8221;ground&#8221; type=&#8221;radio&#8221; name=&#8221;shipping&#8221; value=&#8221;ground&#8221;&gt;<\/strong><br \/><strong>&lt;label for=&#8221;ground&#8221;&gt;Ground&lt;\/label&gt;<\/strong><\/p><p><strong>&lt;\/fieldset&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8370a2a disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8370a2a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-44e0c70\" data-id=\"44e0c70\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5783072 elementor-widget elementor-widget-text-editor\" data-id=\"5783072\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Additionally, you should avoid nesting multiple <strong>&lt;fieldset&gt;<\/strong> elements within each other, as this can cause unpredictable behaviour in some screen readers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7eb68e5 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7eb68e5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-27f996b\" data-id=\"27f996b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4d51902 elementor-widget elementor-widget-text-editor\" data-id=\"4d51902\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Other Input Types<\/h3><p>Beyond standard text inputs, there are numerous HTML5 input types, such as <strong>password<\/strong>, <strong>email<\/strong>, <strong>tel<\/strong>, <strong>url<\/strong>, <strong>number<\/strong>, <strong>date<\/strong>, <strong>time<\/strong>, <strong>colour<\/strong>, <strong>range<\/strong>, <strong>file<\/strong>. These inputs must each have an associated <strong>&lt;label&gt;<\/strong>. For example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4139c58 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4139c58\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2f97394\" data-id=\"2f97394\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afed258 elementor-widget elementor-widget-text-editor\" data-id=\"afed258\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;birthdate&#8221;&gt;Date of Birth:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;birthdate&#8221; type=&#8221;date&#8221; name=&#8221;dob&#8221; autocomplete=&#8221;bday&#8221;&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b000cc0 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b000cc0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5af879e\" data-id=\"5af879e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f1487c3 elementor-widget elementor-widget-text-editor\" data-id=\"f1487c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Omitting labels on these specialised inputs prevents screen readers from conveying the purpose of the field, causing confusion for users relying on assistive tech. Always match <strong>&#8220;for&#8221;<\/strong> and <strong>&#8220;id&#8221;<\/strong> or wrap the input in its label, and specify autocomplete values appropriate for the field\u2019s purpose (example: <strong>autocomplete=&#8221;email&#8221;<\/strong> for email inputs) to optimise autofill and assistive tech recognition.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7358bef disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7358bef\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9091660\" data-id=\"9091660\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-000cd9c elementor-widget elementor-widget-text-editor\" data-id=\"000cd9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Basic Select Menu<\/h3><p>Select menus <strong>(&lt;select&gt;)<\/strong> must also have descriptive <strong>&lt;label&gt;<\/strong> elements:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-146965c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"146965c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e8243a1\" data-id=\"e8243a1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cd2ebc6 elementor-widget elementor-widget-text-editor\" data-id=\"cd2ebc6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;favcity&#8221;&gt;Which is your favorite city?&lt;\/label&gt;<\/strong><br \/><strong>&lt;select id=&#8221;favcity&#8221; name=&#8221;favcity&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;option value=&#8221;amsterdam&#8221;&gt;Amsterdam&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;buenosaires&#8221;&gt;Buenos Aires&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional options &#8211;&gt;<\/strong><\/p><p><strong>&lt;\/select&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-80e82c0 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"80e82c0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9b9156a\" data-id=\"9b9156a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-05c1dc3 elementor-widget elementor-widget-text-editor\" data-id=\"05c1dc3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When focused, assistive technology reads the label followed by the selected option. Unique id ensures correct association.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-679a2c4 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"679a2c4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a2108d0\" data-id=\"a2108d0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-87aa1a8 elementor-widget elementor-widget-text-editor\" data-id=\"87aa1a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Grouping Options with Optgroup<\/h3><p>For long lists, group related <strong>&lt;option&gt;<\/strong> elements using <strong>&lt;optgroup&gt;<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f72118 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f72118\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c8ea5b1\" data-id=\"c8ea5b1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-23df7fc elementor-widget elementor-widget-text-editor\" data-id=\"23df7fc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;favcity2&#8243;&gt;Which is your favorite city?&lt;\/label&gt;<\/strong><br \/><strong>&lt;select id=&#8221;favcity2&#8243; name=&#8221;favcity2&#8243;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;optgroup label=&#8221;Asia&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 80px\"><strong>&lt;option value=&#8221;delhi&#8221;&gt;Delhi&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;hongkong&#8221;&gt;Hong Kong&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional Asian cities &#8211;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;\/optgroup&gt;<\/strong><br \/><strong>&lt;optgroup label=&#8221;Europe&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 80px\"><strong>&lt;option value=&#8221;amsterdam&#8221;&gt;Amsterdam&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;london&#8221;&gt;London&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional European cities &#8211;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;\/optgroup&gt;<\/strong><br \/><strong>&lt;!&#8211; further optgroups &#8211;&gt;<\/strong><\/p><p><strong>&lt;\/select&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-726023e disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"726023e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f2670e4\" data-id=\"f2670e4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-92ebb22 elementor-widget elementor-widget-text-editor\" data-id=\"92ebb22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although <strong>&lt;optgroup&gt;<\/strong> can help visually organise options, some screen readers may ignore grouping, presenting options linearly. Do not rely on <strong>&lt;optgroup&gt;<\/strong> alone for critical context, consider additional grouping headings or <strong>aria-describedby<\/strong> to clarify structure if necessary.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8860ead disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8860ead\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d239b45\" data-id=\"d239b45\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-60eee87 elementor-widget elementor-widget-text-editor\" data-id=\"60eee87\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Multiple-Select Menus<\/h3><p>Although HTML allows <strong>&lt;select multiple&gt;<\/strong>, usability concerns limit their accessibility:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d39fc0 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d39fc0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-55b2986\" data-id=\"55b2986\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e943934 elementor-widget elementor-widget-text-editor\" data-id=\"e943934\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;favcities&#8221;&gt;What are your three favorite cities?&lt;\/label&gt;<\/strong><br \/><strong>&lt;select id=&#8221;favcities&#8221; name=&#8221;favcities&#8221; multiple size=&#8221;5&#8243;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;option value=&#8221;amsterdam&#8221;&gt;Amsterdam&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;buenosaires&#8221;&gt;Buenos Aires&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional options &#8211;&gt;<\/strong><\/p><p><strong>&lt;\/select&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0d2667b disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0d2667b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e61267a\" data-id=\"e61267a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-80bc50d elementor-widget elementor-widget-text-editor\" data-id=\"80bc50d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Users must know to hold down Control\/Command or Shift while selecting, which is not intuitive for many. Because <a href=\"https:\/\/reciteme.com\/news\/keyboard-accessibility\/\">keyboard navigation<\/a> and multi-selection vary significantly across browsers and operating systems, a group of checkboxes often provides similar functionality in a more universally accessible way.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-567f9e0 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"567f9e0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-199b1f3\" data-id=\"199b1f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-40d7501 elementor-widget elementor-widget-text-editor\" data-id=\"40d7501\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Form buttons<\/h3><p>Buttons must contain visible text, as screen readers announce the nested text of <strong>&lt;button&gt;<\/strong> elements or the value attribute of input buttons:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e798562 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e798562\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12f9388\" data-id=\"12f9388\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eb050c3 elementor-widget elementor-widget-text-editor\" data-id=\"eb050c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;button type=&#8221;submit&#8221;&gt;Search&lt;\/button&gt;<\/strong><br \/><strong>&lt;input type=&#8221;reset&#8221; value=&#8221;Reset&#8221;&gt;<\/strong><br \/><strong>&lt;button type=&#8221;button&#8221;&gt;Activate&lt;\/button&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-659a330 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"659a330\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-679d4e1\" data-id=\"679d4e1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-30b7106 elementor-widget elementor-widget-text-editor\" data-id=\"30b7106\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Avoid leaving buttons empty; an unlabeled button will be announced simply as \u201cbutton,\u201d offering no context. You should also avoid reset buttons when possible, as users may click the inadvertently. Unless a reset function is explicitly needed, such as in dynamic forms where users may want to start over, they should be omitted to prevent accidental data loss.<\/p><p>Furthermore, when using an image as a submit button <strong>&lt;input type=&#8221;image&#8221;&gt;<\/strong> it must include equivalent alt text that describes its function:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f4f50e9 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f4f50e9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6619da3\" data-id=\"6619da3\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b323be4 elementor-widget elementor-widget-text-editor\" data-id=\"b323be4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;input type=&#8221;image&#8221; src=&#8221;search-icon.png&#8221; alt=&#8221;Search&#8221;&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3725569 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3725569\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-034057f\" data-id=\"034057f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-730aae8 elementor-widget elementor-widget-text-editor\" data-id=\"730aae8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Without alt, assistive technology may only announce \u201cbutton,\u201d hiding the button\u2019s purpose. For this reason, it is a good idea to keep alt concise, such as \u201cSearch\u201d or \u201cSubmit\u201d.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ff44f39 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ff44f39\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-40402bf\" data-id=\"40402bf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-db16bcc elementor-widget elementor-widget-text-editor\" data-id=\"db16bcc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>JavaScript Jump Menus<\/h3><p>Jump menus are <strong>&lt;select&gt;<\/strong> elements configured so that changing the selected option immediately navigates to a new page. For example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-30f10b9 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"30f10b9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2512c06\" data-id=\"2512c06\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-af86d17 elementor-widget elementor-widget-text-editor\" data-id=\"af86d17\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;select onchange=&#8221;window.location.href=this.value;&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;option value=&#8221;&#8221;&gt;Select a website&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;https:\/\/webaim.org&#8221;&gt;WebAIM&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;https:\/\/google.com&#8221;&gt;Google&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional options &#8211;&gt;<\/strong><\/p><p><strong>&lt;\/select&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-630d02f disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"630d02f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3b2cb67\" data-id=\"3b2cb67\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9032119 elementor-widget elementor-widget-text-editor\" data-id=\"9032119\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When users navigate options with arrow keys, unintended navigation can occur, disorienting keyboard and screen reader users. Instead, use a standard &lt;select&gt; plus a separate &lt;button&gt; that submits or triggers navigation:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b0a024 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b0a024\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-22e4b32\" data-id=\"22e4b32\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e107a6 elementor-widget elementor-widget-text-editor\" data-id=\"7e107a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;form action=&#8221;\/navigate&#8221; method=&#8221;get&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;label for=&#8221;links&#8221;&gt;Go to a website:&lt;\/label&gt;<\/strong><br \/><strong>&lt;select id=&#8221;links&#8221; name=&#8221;site&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 80px\"><strong>&lt;option value=&#8221;webaim.org&#8221;&gt;WebAIM&lt;\/option&gt;<\/strong><br \/><strong>&lt;option value=&#8221;google.com&#8221;&gt;Google&lt;\/option&gt;<\/strong><br \/><strong>&lt;!&#8211; additional options &#8211;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;\/select&gt;<\/strong><br \/><strong>&lt;button type=&#8221;submit&#8221;&gt;Go&lt;\/button&gt;<\/strong><\/p><p><strong>&lt;\/form&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0b0d25a disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0b0d25a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eef1fa8\" data-id=\"eef1fa8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1aac11f elementor-widget elementor-widget-text-editor\" data-id=\"1aac11f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This approach ensures users can explore options via arrow keys without accidentally triggering navigation, maintaining consistency across browsers and operating systems.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-590f460 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"590f460\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-569f309\" data-id=\"569f309\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-41b1869 elementor-widget elementor-widget-text-editor\" data-id=\"41b1869\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Important Form Attributes<\/h3><p>Forms have different attributes that you need to consider, from autocomplete to required fields, and more. Let&#8217;s take a closer look:<\/p><h4>Autocomplete<\/h4><p>The <strong>autocomplete<\/strong> attribute informs the user agent about the expected value to assist in autofill. When collecting user-specific information (e.g., name, address, email, phone), use standardised <strong>autocomplete<\/strong> tokens so browsers can recognise and autofill fields consistently. Examples include:<\/p><ul><li><strong>autocomplete=&#8221;name&#8221;<\/strong><\/li><li><strong>autocomplete=&#8221;email&#8221;<\/strong><\/li><li><strong>autocomplete=&#8221;street-address&#8221;<\/strong><\/li><li><strong>autocomplete=&#8221;bday&#8221;<\/strong><\/li><li><strong>autocomplete=&#8221;tel&#8221;<\/strong><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-772c5eb disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"772c5eb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eec4cfe\" data-id=\"eec4cfe\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-900d721 elementor-widget elementor-widget-text-editor\" data-id=\"900d721\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;fname&#8221;&gt;First Name:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;fname&#8221; type=&#8221;text&#8221; name=&#8221;firstName&#8221; autocomplete=&#8221;given-name&#8221;&gt;<\/strong><\/p><p><strong>&lt;label for=&#8221;email&#8221;&gt;Email:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;email&#8221; type=&#8221;email&#8221; name=&#8221;email&#8221; autocomplete=&#8221;email&#8221;&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-91787f9 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"91787f9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f9001f4\" data-id=\"f9001f4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-05e88ed elementor-widget elementor-widget-text-editor\" data-id=\"05e88ed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Proper use of autocomplete improves usability, especially for individuals with cognitive disabilities or limited typing proficiency, by reducing the effort required to enter repetitive information.<\/p><p>In scenarios requiring privacy or security, such as sensitive forms, disable autocomplete using <strong>autocomplete=&#8221;off&#8221;<\/strong> on the <strong>&lt;form&gt;<\/strong> or specific <strong>&lt;input&gt;<\/strong> elements. However, disabling autofill can impede accessibility, so use sparingly and only when necessary:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3af03d2 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3af03d2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b4c3584\" data-id=\"b4c3584\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-636955d elementor-widget elementor-widget-text-editor\" data-id=\"636955d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;form autocomplete=&#8221;off&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;label for=&#8221;creditcard&#8221;&gt;Credit Card Number:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;creditcard&#8221; type=&#8221;text&#8221; name=&#8221;cc&#8221; autocomplete=&#8221;off&#8221;&gt;<\/strong><\/p><p><strong>&lt;\/form&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7601cc9 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7601cc9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-abe48d0\" data-id=\"abe48d0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b058bed elementor-widget elementor-widget-text-editor\" data-id=\"b058bed\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Note that some browsers ignore <strong>autocomplete=&#8221;off&#8221;<\/strong> on individual inputs when the overall form suggests user data entry; consult the HTML specification for detailed behaviour.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-151c582 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"151c582\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1b0efb7\" data-id=\"1b0efb7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-240ffa5 elementor-widget elementor-widget-text-editor\" data-id=\"240ffa5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>Required Fields<\/h4><p>Identifying required fields only with visual cues (e.g., an asterisk \u201c*\u201d) may not be conveyed to screen reader users. To ensure assistive tech announces the requirement, apply:<\/p><ul><li><strong>aria-required=&#8221;true&#8221;<\/strong> when only visual cues indicate a required field. This attribute causes assistive tech to announce \u201crequired\u201d alongside the label.<\/li><li><strong>required (HTML5)<\/strong> to both announce \u201crequired\u201d and prevent form submission if left blank. Browsers typically display a dialog or highlight when attempting to submit empty required fields.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb3de30 elementor-widget elementor-widget-text-editor\" data-id=\"bb3de30\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When using ARIA, remember that <strong>aria-required<\/strong> alone doesn\u2019t enforce validation. You should implement additional client or server-side checks to ensure required fields are not skipped.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-07b6fb8 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"07b6fb8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a079e5b\" data-id=\"a079e5b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-545297e elementor-widget elementor-widget-text-editor\" data-id=\"545297e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Invalid Fields<\/h3><p>During validation, marking invalid inputs with aria-invalid=&#8221;true&#8221; signals that the current value is erroneous, prompting assistive technology announcements like \u201cinvalid\u201d when focus lands on the input. For example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d505de7 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d505de7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-781f6c2\" data-id=\"781f6c2\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cfab00c elementor-widget elementor-widget-text-editor\" data-id=\"cfab00c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;username2&#8243;&gt;Username:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input id=&#8221;username2&#8243; type=&#8221;text&#8221; name=&#8221;username&#8221; aria-invalid=&#8221;true&#8221; autocomplete=&#8221;username&#8221;&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e8284fe disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e8284fe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d70fcbd\" data-id=\"d70fcbd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cb6e1fe elementor-widget elementor-widget-text-editor\" data-id=\"cb6e1fe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Use <strong>aria-invalid<\/strong> after form submission or on-the-fly validation to flag issues that may not be visually evident to users with low vision or colour-blindness. Keep in mind that <strong>aria-invalid<\/strong> does not affect visual styles, you must apply CSS to highlight invalid fields visually and provide accessible error messages via ARIA <strong>aria-describedby<\/strong> or live regions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0aa035e disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0aa035e\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-c964a7e\" data-id=\"c964a7e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0614ac elementor-widget elementor-widget-heading\" data-id=\"a0614ac\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-medium\">Download our Website Accessibility Checklist<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-483f1e4 elementor-widget elementor-widget-text-editor\" data-id=\"483f1e4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our Website Accessibility Checklist guides you through the essential elements of an inclusive website with simple, actionable steps. Whether you\u2019re just getting started or looking to improve your existing site, this checklist will help you create a better experience for all users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3bf9d3a elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"3bf9d3a\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/downloads.reciteme.com\/website-accessibility-checklist\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Your Checklist Here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-339ab88\" data-id=\"339ab88\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9244413 elementor-widget elementor-widget-image\" data-id=\"9244413\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-1024x1024.png\" class=\"attachment-large size-large wp-image-29711\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-1024x1024.png 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-768x768.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header.png 1080w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb96a92 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bb96a92\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f1eecbe\" data-id=\"f1eecbe\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea97314 elementor-widget elementor-widget-text-editor\" data-id=\"ea97314\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Implementing advanced form labeling strategies<\/h2><p>By default, an HTML <strong>&lt;label&gt;<\/strong> associates exactly one piece of visible text with exactly one form control via the <strong>for=&#8221;\u2026&#8221;<\/strong> and <strong>id=&#8221;\u2026&#8221;<\/strong> pairing, or by nesting the &lt;input&gt; (or other control) within the <strong>&lt;label&gt;<\/strong> element. While this approach works for most simple forms, there are three common limitations:<\/p><ul><li><strong>One-to-Many Labeling:<\/strong> A single visual text node, such as a table header, needs to label multiple inputs beneath it.<\/li><li><strong>Many-to-One Labeling:<\/strong> Multiple separate text elements, such as a heading and a subheading, together form the label for a single control.<\/li><li><strong>Invisible Labels:<\/strong> A control\u2019s purpose is clear visually, such as a search field next to a magnifying-glass icon, but no on-screen text is desired.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b17d04 elementor-widget elementor-widget-text-editor\" data-id=\"3b17d04\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>ARIA provides three attributes to address these cases while ensuring that screen readers and other assistive technologies announce the correct \u201caccessible name\u201d and\/or \u201caccessible description\u201d. This is why you should use native &lt;label&gt; whenever possible. ARIA is intended as a supplement only when HTML semantics cannot satisfy the requirements.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e925bbc disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e925bbc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e512ee7\" data-id=\"e512ee7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c9a89e elementor-widget elementor-widget-text-editor\" data-id=\"4c9a89e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>aria-labelledby<\/h3><p>Instead of pointing to a <strong>&lt;label&gt;<\/strong> element, a form control\u2019s <strong>aria-labelledby<\/strong> attribute references the <strong>&#8220;id&#8221;<\/strong> (or multiple <strong>&#8220;id&#8221; <\/strong>values, space-separated) of one or more other elements whose text content provides its label.<\/p><p>Knowing when to use each is important:<\/p><ul><li><strong>Many-to-One:<\/strong> You have several text nodes (for instance, a main heading and a smaller subheading) that together label a single input.<\/li><li><strong>One-to-Many:<\/strong> You have, say, a table header <strong>(&lt;th&gt;)<\/strong> that logically labels all inputs in that column. Rather than creating duplicate <strong>&lt;label&gt;<\/strong> elements, each input\u2019s <strong>aria-labelledby<\/strong> can reference the single header cell.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccc68cc elementor-widget elementor-widget-text-editor\" data-id=\"ccc68cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is an example of a single header labeling multiple inputs:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d2f948 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d2f948\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-adb5544\" data-id=\"adb5544\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54e32b4 elementor-widget elementor-widget-text-editor\" data-id=\"54e32b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;table&gt;<\/strong><br \/><strong>&lt;thead&gt;<\/strong><br \/><strong>&lt;tr&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;th id=&#8221;product&#8221;&gt;Product&lt;\/th&gt;<\/strong><br \/><strong>&lt;th id=&#8221;qty&#8221;&gt;Quantity&lt;\/th&gt;<\/strong><br \/><strong>&lt;th id=&#8221;price&#8221;&gt;Price&lt;\/th&gt;<\/strong><\/p><p><strong>&lt;\/tr&gt;<\/strong><br \/><strong>&lt;\/thead&gt;<\/strong><br \/><strong>&lt;tbody&gt;<\/strong><br \/><strong>&lt;tr&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;td&gt;&lt;input type=&#8221;text&#8221; name=&#8221;prod1&#8243; aria-labelledby=&#8221;product&#8221;&gt;&lt;\/td&gt;<\/strong><br \/><strong>&lt;td&gt;&lt;input type=&#8221;number&#8221; name=&#8221;qty1&#8243; aria-labelledby=&#8221;qty&#8221;&gt;&lt;\/td&gt;<\/strong><br \/><strong>&lt;td&gt;&lt;input type=&#8221;text&#8221; name=&#8221;price1&#8243; aria-labelledby=&#8221;price&#8221;&gt;&lt;\/td&gt;<\/strong><\/p><p><strong>&lt;\/tr&gt;<\/strong><br \/><strong>&lt;!&#8211; Additional rows &#8211;&gt;<\/strong><br \/><strong>&lt;\/tbody&gt;<\/strong><br \/><strong>&lt;\/table&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4b8b59e disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4b8b59e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-28f0171\" data-id=\"28f0171\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a6bfdd8 elementor-widget elementor-widget-text-editor\" data-id=\"a6bfdd8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Above, each input under \u201cProduct\u201d is labeled by the same <strong>&lt;th id=&#8221;product&#8221;&gt;Product&lt;\/th&gt;<\/strong> text. A screen reader will announce \u201cProduct\u201d when focus enters any of those product fields.<\/p><p>Here is another example for multiple text nodes labeling one input:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9f0bf44 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9f0bf44\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d9db0cb\" data-id=\"d9db0cb\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a09edfc elementor-widget elementor-widget-text-editor\" data-id=\"a09edfc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;h2 id=&#8221;addressLabel&#8221;&gt;Mailing Address&lt;\/h2&gt;<\/strong><br \/><strong>&lt;p id=&#8221;addressDesc&#8221;&gt;Include street, city, and postal code.&lt;\/p&gt;<\/strong><\/p><p><strong>&lt;input <\/strong><strong>type=&#8221;text&#8221; <\/strong><strong>id=&#8221;addressInput&#8221; <\/strong><strong>name=&#8221;address&#8221; <\/strong><strong>aria-labelledby=&#8221;addressLabel addressDesc&#8221; <\/strong><strong>aria-describedby=&#8221;addressDesc&#8221;<\/strong><strong>\/&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3295513 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3295513\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d0e1e4\" data-id=\"1d0e1e4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-edfc3f8 elementor-widget elementor-widget-text-editor\" data-id=\"edfc3f8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Above, the control\u2019s accessible name is formed by concatenating the texts from <strong>#addressLabel<\/strong> and <strong>#addressDesc<\/strong>.<\/p><p>Separately, <strong>aria-describedby<\/strong> can be used to flag \u201cInclude street, city, and postal code.\u201d as a description, which screen readers will typically read after announcing the input\u2019s name and type.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-010f23c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"010f23c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b22b897\" data-id=\"b22b897\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cf8102f elementor-widget elementor-widget-text-editor\" data-id=\"cf8102f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Handling Multiple Labels<\/h3><p>Suppose you have a grid where each cell must be labeled by both its column header and its row header (for instance, a table that lets users enter \u201cOffice extension\u201d numbers grouped by person). Rather than hard-coding a separate &lt;label&gt; for every cell, use aria-labelledby:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf70417 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf70417\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d28ca5\" data-id=\"5d28ca5\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e1da540 elementor-widget elementor-widget-text-editor\" data-id=\"e1da540\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;table&gt;<\/strong><br \/><strong>&lt;thead&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;tr&gt;<\/strong><br \/><strong>&lt;th id=\u201dnameHeader\u201d&gt;Name&lt;\/th&gt;<\/strong><br \/><strong>&lt;th id=\u201dofficeHeader\u201d&gt;Office Extension&lt;\/th&gt;<\/strong><br \/><strong>&lt;th id=\u201dphoneHeader\u201d&gt;Phone Number&lt;\/th&gt;<\/strong><br \/><strong>&lt;\/tr&gt;<\/strong><\/p><p><strong>&lt;\/thead&gt;<\/strong><br \/><strong>&lt;tbody&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;tr&gt;<\/strong><br \/><strong>&lt;th id=\u201dalice\u201d&gt;Alice&lt;\/th&gt;<\/strong><br \/><strong>&lt;td&gt;<\/strong><br \/><strong>&lt;input type=\u201dtext\u201d name=\u201dofficeAlice\u201d aria-labelledby=\u201dalice officeHeader\u201d&gt;<\/strong><br \/><strong>&lt;\/td&gt;<\/strong><br \/><strong>&lt;td&gt;<\/strong><br \/><strong>&lt;input type=\u201dtext\u201d name=\u201dphoneAlice\u201d aria-labelledby=\u201dalice phoneHeader\u201d&gt;<\/strong><br \/><strong>&lt;\/td&gt;<\/strong><br \/><strong>&lt;\/tr&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>&lt;tr&gt;<\/strong><br \/><strong>&lt;th id=\u201dbob\u201d&gt;Bob&lt;\/th&gt;<\/strong><br \/><strong>&lt;td&gt;<\/strong><br \/><strong>&lt;input type=\u201dtext\u201d name=\u201dofficeBob\u201d aria-labelledby=\u201dbob officeHeader\u201d&gt;<\/strong><br \/><strong>&lt;\/td&gt;<\/strong><br \/><strong>&lt;td&gt;<\/strong><br \/><strong>&lt;input type=\u201dtext\u201d name=\u201dphoneBob\u201d aria-labelledby=\u201dbob phoneHeader\u201d&gt;<\/strong><br \/><strong>&lt;\/td&gt;<\/strong><br \/><strong>&lt;\/tr&gt;<\/strong><\/p><p><strong>&lt;!\u2013 More rows as needed \u2013&gt;<\/strong><br \/><strong>&lt;\/tbody&gt;<\/strong><br \/><strong>&lt;\/table&gt;\u00a0<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-598c09f disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"598c09f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0f8b5c2\" data-id=\"0f8b5c2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-67aaf66 elementor-widget elementor-widget-text-editor\" data-id=\"67aaf66\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Each input referencing <strong>aria-labelledby=&#8221;alice officeHeader&#8221;<\/strong> results in assistive tech announcing \u201cAlice Office Extension\u201d as the input\u2019s accessible name. Additionally, the row header <strong>(&lt;th id=&#8221;alice&#8221;&gt;Alice&lt;\/th&gt;)<\/strong> and column header <strong>(&lt;th id=&#8221;officeHeader&#8221;&gt;Office Extension&lt;\/th&gt;)<\/strong> are both read in sequence.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fd6310b disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fd6310b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f4fb0b9\" data-id=\"f4fb0b9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e2b2fbd elementor-widget elementor-widget-text-editor\" data-id=\"e2b2fbd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>aria-describedby<\/h3><p>This label can be used to attach supplemental descriptive text (instructions, hints, error details) to a form control. Unlike <strong>aria-labelledby<\/strong>, which defines the accessible name, <strong>aria-describedby<\/strong> defines an accessible description that screen readers typically read after announcing the control\u2019s name and type.<\/p><p>Here are some examples of when this can be used:<\/p><ul><li><strong>Field-Level Instructions:<\/strong> Password must be 8\u201315 characters, including uppercase, lowercase, and a digit.<\/li><li><strong>Error Messages:<\/strong> Must match the previous password.<\/li><li><strong>Contextual Hints or Examples:<\/strong> Enter dates in MM\/DD\/YYYY format.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dd0089 elementor-widget elementor-widget-text-editor\" data-id=\"5dd0089\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here is a real world example of building a form with password requirements:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fca0f3d disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fca0f3d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4b79ebf\" data-id=\"4b79ebf\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e66399 elementor-widget elementor-widget-text-editor\" data-id=\"7e66399\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;label for=&#8221;newPassword&#8221;&gt;New Password:&lt;\/label&gt;<\/strong><br \/><strong>&lt;input <\/strong><strong>type=&#8221;password&#8221; <\/strong><strong>id=&#8221;newPassword&#8221; <\/strong><strong>name=&#8221;newPassword&#8221; <\/strong><strong>aria-describedby=&#8221;pwHint&#8221; <\/strong><strong>aria-required=&#8221;true&#8221; <\/strong><strong>autocomplete=&#8221;new-password&#8221;<\/strong><strong>&gt;<\/strong><br \/><strong>&lt;span id=&#8221;pwHint&#8221; role=&#8221;note&#8221;&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>Must be 8\u201315 characters and include letters and numbers.<\/strong><\/p><p><strong>&lt;\/span&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7db60f6 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7db60f6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1851d3a\" data-id=\"1851d3a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81f571c elementor-widget elementor-widget-text-editor\" data-id=\"81f571c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When a screen reader focuses on the password field, it will typically announce:<\/p><ul><li>\u201cNew Password, edit textbox, required\u201d<\/li><li>\u201cMust be 8\u201315 characters and include letters and numbers.\u201d<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-880d4a2 elementor-widget elementor-widget-text-editor\" data-id=\"880d4a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Additionally, <strong>aria-describedby<\/strong> can reference multiple id values if you want a combination of descriptions (i.e., hint and error message). Just separate them by a space.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b319b00 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b319b00\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b74ef87\" data-id=\"b74ef87\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f8464b elementor-widget elementor-widget-text-editor\" data-id=\"5f8464b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Invisible Labels<\/h3><p>Sometimes, designers wish to hide the visible text label, either because the control\u2019s function is already clear, such as a search field next to a magnifying-glass icon or to reduce visual clutter. In those scenarios, you must still provide an accessible label via one (and only one) of the following techniques. Do not combine two or more of these, as assistive tech will often read duplicate text.<\/p><h4>1. Hidden &lt;label&gt; (Off-Screen)<\/h4><p>You can place a &lt;label&gt; element adjacent to the control, but use CSS to move it off-screen. The label remains visible in the DOM for assistive technologies, and clicking it still focuses the associated control (provided you use for=&#8221;\u2026&#8221;). Here is an example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8637085 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8637085\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9b2965d\" data-id=\"9b2965d\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-17d42a1 elementor-widget elementor-widget-text-editor\" data-id=\"17d42a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;style&gt;<\/strong><\/p><p style=\"padding-left: 40px\"><strong>.sr-only {<\/strong><br \/><strong>position: absolute;<\/strong><br \/><strong>width: 1px;<\/strong><br \/><strong>height: 1px;<\/strong><br \/><strong>margin: -1px;<\/strong><br \/><strong>padding: 0;<\/strong><br \/><strong>border: 0;<\/strong><br \/><strong>clip: rect(0 0 0 0);<\/strong><br \/><strong>overflow: hidden;<\/strong><br \/><strong>}<\/strong><\/p><p><strong>&lt;\/style&gt;<\/strong><\/p><p><strong>&lt;label class=&#8221;sr-only&#8221; for=&#8221;searchField&#8221;&gt;Search Site&lt;\/label&gt;<\/strong><br \/><strong>&lt;input type=&#8221;search&#8221; id=&#8221;searchField&#8221; name=&#8221;search&#8221; placeholder=&#8221; &#8221; \/&gt;<\/strong><br \/><strong>&lt;button type=&#8221;submit&#8221;&gt;\ud83d\udd0d&lt;\/button&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34beed2 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34beed2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f2c2fae\" data-id=\"f2c2fae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a99dd8d elementor-widget elementor-widget-text-editor\" data-id=\"a99dd8d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>2. title Attribute<\/h4><p>For this one you should omit the &lt;label&gt; entirely, but give the &lt;input&gt; a title=&#8221;\u2026&#8221;. For example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ad07765 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ad07765\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f90250f\" data-id=\"f90250f\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8a6febb elementor-widget elementor-widget-text-editor\" data-id=\"8a6febb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;input <\/strong><strong>type=&#8221;text&#8221; <\/strong><strong>id=&#8221;searchField&#8221; <\/strong><strong>name=&#8221;search&#8221; <\/strong><strong>title=&#8221;Search Site&#8221;<\/strong><strong>\/&gt;<\/strong><br \/><strong>&lt;button type=&#8221;submit&#8221;&gt;\ud83d\udd0d&lt;\/button&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3cc3d3c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3cc3d3c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7bfd822\" data-id=\"7bfd822\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6051684 elementor-widget elementor-widget-text-editor\" data-id=\"6051684\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4>3. aria-label<\/h4><p>Assign a string directly to the aria-label attribute on the control. Any assistive technologies reading the page will use that string as the accessible name. Here is an example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b65e52 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b65e52\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8bab116\" data-id=\"8bab116\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1672b3c elementor-widget elementor-widget-text-editor\" data-id=\"1672b3c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>&lt;input <\/strong><strong>type=&#8221;text&#8221; <\/strong><strong>id=&#8221;searchField&#8221; <\/strong><strong>name=&#8221;search&#8221; <\/strong><strong>aria-label=&#8221;Search Site&#8221;<\/strong><strong>\/&gt;<\/strong><br \/><strong>&lt;button type=&#8221;submit&#8221;&gt;\ud83d\udd0d&lt;\/button&gt;<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d7314fe disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d7314fe\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-fc394a3\" data-id=\"fc394a3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fc4afba elementor-widget elementor-widget-heading\" data-id=\"fc4afba\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-medium\">Get a Free Accessibility Check of your Website<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfec039 elementor-widget elementor-widget-text-editor\" data-id=\"cfec039\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Get a free automated accessibility scan of your websites homepage. This will identify and highlight any compliance issues on your website, including inaccessible forms. Followed by recommendations on how to implement the necessary changes to make your website more accessible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24a84c2 elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"24a84c2\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/au\/free-accessibility-check\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Run a Free Compliance Check Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-9959aae\" data-id=\"9959aae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0ce6756 elementor-widget elementor-widget-image\" data-id=\"0ce6756\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"766\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1024x980.png\" class=\"attachment-large size-large wp-image-33845\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1024x980.png 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-300x287.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-768x735.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image-1536x1471.png 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/5-Checker-Website-image.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1f6d41c disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1f6d41c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-41e1b75\" data-id=\"41e1b75\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a8c3d7e elementor-widget elementor-widget-text-editor\" data-id=\"a8c3d7e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Ensuring your form is visually accessible<\/h2><p>We&#8217;ve covered a lot of the functional aspects of forms and how they should be coded already. But the visually aspect of your website forms are just as important.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-82b1781 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"82b1781\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6b4cdf9\" data-id=\"6b4cdf9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-77df0d3 elementor-widget elementor-widget-image\" data-id=\"77df0d3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/2-Colour-Contrast-checker-icon-300x300.png\" class=\"attachment-medium size-medium wp-image-34226\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/2-Colour-Contrast-checker-icon-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/2-Colour-Contrast-checker-icon-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/2-Colour-Contrast-checker-icon-768x768.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/2-Colour-Contrast-checker-icon.png 882w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5f78d88\" data-id=\"5f78d88\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be793f2 elementor-widget elementor-widget-text-editor\" data-id=\"be793f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Colour contrast<\/h3><p>Effective visual design in accessible forms begins with ensuring <a href=\"https:\/\/reciteme.com\/au\/news\/colour-contrast-accessibility\/\">sufficient colour contrast<\/a> between text, form elements, and their backgrounds. Using a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for larger text helps users with low vision distinguish labels, input fields, and instructions. When choosing colour palettes, avoid relying solely on colour to convey meaning, for example, indicating required fields or errors, since colour-blind users may miss these cues. Instead, combine colour with text labels, icons, or patterns to communicate status.<\/p><p>You can use this <a href=\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\">colour contrast checker<\/a> to help create accessible web forms.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c0e9663 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c0e9663\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-96acb26\" data-id=\"96acb26\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-10710e8 elementor-widget elementor-widget-text-editor\" data-id=\"10710e8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Accessible fonts<\/h3><p>You should also use <a href=\"https:\/\/reciteme.com\/au\/news\/accessible-font-size\/\">readable font sizes<\/a> (ideally 16px or larger) and maintain generous line-height to improve readability for users with visual or cognitive impairments. Consistent spacing around inputs and form groups not only creates a cleaner layout but also supports users who rely on screen magnification or have fine-motor challenges. Target interactive elements that are at least 44\u00d744 pixels to make clicking or tapping easier on touch devices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8df9421\" data-id=\"8df9421\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e32b92 elementor-widget elementor-widget-image\" data-id=\"0e32b92\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/07\/Font-Change-Icon-300x300.png\" class=\"attachment-medium size-medium wp-image-29364\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/07\/Font-Change-Icon-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/07\/Font-Change-Icon-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/07\/Font-Change-Icon.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-415eb97 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"415eb97\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-88a3687\" data-id=\"88a3687\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb165a6 elementor-widget elementor-widget-text-editor\" data-id=\"fb165a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>How can you test your forms are accessible?<\/h2><p>Even if a form looks and functions well visually, it may still present significant barriers if it hasn\u2019t been properly tested for accessibility. Thorough testing helps confirm that all users, regardless of ability, can complete, understand, and submit your forms successfully.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c1d4e05 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c1d4e05\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-c58bf62\" data-id=\"c58bf62\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0ef834 elementor-widget elementor-widget-image\" data-id=\"a0ef834\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/Auditing-icon-1-300x300.png\" class=\"attachment-medium size-medium wp-image-32002\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/Auditing-icon-1-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/Auditing-icon-1-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/Auditing-icon-1-768x768.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/01\/Auditing-icon-1.png 801w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7181242\" data-id=\"7181242\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e73ad5 elementor-widget elementor-widget-text-editor\" data-id=\"7e73ad5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Use an accessibility checker<\/h3><p>An automated <a href=\"https:\/\/reciteme.com\/au\/product\/website-accessibility-checker\/\">accessibility checker<\/a> can help identify common issues in form design, such as missing labels, incorrect field associations, or poor contrast. These tools can quickly scan your forms for errors and provide guidance on how to fix them. They can also be used to conduct automated checks on other elements of your website, from image alt text to colour contrasts, and more.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cdeae54 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cdeae54\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-88c760a\" data-id=\"88c760a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d052092 elementor-widget elementor-widget-text-editor\" data-id=\"d052092\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>Perform manual testing<\/h3><p>Manual testing is essential for catching usability issues that automated tools might miss. This includes testing your forms using only a keyboard to ensure all fields are accessible and that focus order is logical. You should also test with screen readers to confirm that field labels, instructions, and error messages are announced properly. Using an <a href=\"https:\/\/reciteme.com\/au\/news\/website-accessibility-checklist\/\">accessibility checklist<\/a> can help you stay organized and ensure that every aspect of your form has been reviewed for compliance with standards like WCAG.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-448e203\" data-id=\"448e203\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-45d277a elementor-widget elementor-widget-image\" data-id=\"45d277a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-300x300.png\" class=\"attachment-medium size-medium wp-image-29711\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-1024x1024.png 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header-768x768.png 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2024\/08\/Website-checklist-Header.png 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf4e9a7 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf4e9a7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7804360\" data-id=\"7804360\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-262b85c elementor-widget elementor-widget-text-editor\" data-id=\"262b85c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Final verdict: Ensure your website forms are accessible today<\/h2><p>The need for digital accessibility is growing and at the heart of this are website forms. If your domain is using any kind of website forms it&#8217;s imperative that you make the necessary adjustments to ensure they are accessible to people with disabilities. Not only is this the right thing to do ethically, but it will also protect you against legal risks, help you reach a wider audience, and drive a strong brand image. You can take the first step today by <a href=\"https:\/\/reciteme.com\/au\/free-accessibility-check\/\">checking the accessibility of your website<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e1bfa3a disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e1bfa3a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-58b70f5\" data-id=\"58b70f5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-25f7633 elementor-widget elementor-widget-text-editor\" data-id=\"25f7633\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Website form accessibility FAQs<\/h2><p>Looking for a recap or quick summary? Here are a few of our most frequently asked questions to help you get to grips with the essentials:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90ffa9d elementor-widget elementor-widget-accordion\" data-id=\"90ffa9d\" data-element_type=\"widget\" data-widget_type=\"accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1521\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-1521\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">What is an accessible form and why is it important?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1521\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-1521\"><p>An accessible form lets users with disabilities perceive, understand, navigate, and interact with inputs regardless of impairment. It ensures equitable access to services like registration or shopping, avoids legal risks, and broadens user reach by complying with WCAG principles.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1522\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-1522\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Which WCAG criteria directly affect forms?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1522\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-1522\"><p>Key WCAG 2.1 criteria include:<\/p><ul><li><strong>1.3.1<\/strong> <strong>Info and Relationships:<\/strong> Requires programmatic associations (e.g., labels) so assistive tech understands form structure.<\/li><li><strong>3.3.2 Labels or Instructions:<\/strong> Mandates clear, accessible labels\/instructions for each field.<\/li><li><strong>4.1.2 Name, Role, Value:<\/strong> Ensures form elements expose accessible names and states<\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1523\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-1523\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">How do I handle from validation and error messages accessibly?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1523\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-1523\"><p>Provide clear instructions before submission, such as format hints via descriptive text. On errors, programmatically associate messages with fields using <strong>aria-describedby<\/strong> and set <strong>aria-invalid=&#8221;true&#8221;<\/strong>. Use <strong>role=&#8221;alert&#8221;<\/strong> or an <strong>aria-live<\/strong> region so screen readers announce errors immediately.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1524\" class=\"elementor-tab-title\" data-tab=\"4\" role=\"button\" aria-controls=\"elementor-tab-content-1524\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">How do I ensure forms are keyboard accessible?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1524\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"4\" role=\"region\" aria-labelledby=\"elementor-tab-title-1524\"><p>Use native HTML controls, which are focusable by default. Maintain logical tab order following the visual layout. For custom widgets, add <strong>tabindex=&#8221;0&#8243;<\/strong> and ARIA roles\/states so keyboard users can interact consistently.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1525\" class=\"elementor-tab-title\" data-tab=\"5\" role=\"button\" aria-controls=\"elementor-tab-content-1525\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Are form CAPTCHAs inaccessible, and what are alternatives?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1525\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"5\" role=\"region\" aria-labelledby=\"elementor-tab-title-1525\"><p>Traditional image\/audio CAPTCHAs often block users with visual\/audio impairments. Use accessible alternatives like honeypot fields, simple logic\/math questions, or invisible CAPTCHAs that don\u2019t rely on visual challenges.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h3 id=\"elementor-tab-title-1526\" class=\"elementor-tab-title\" data-tab=\"6\" role=\"button\" aria-controls=\"elementor-tab-content-1526\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-right\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><span class=\"fas fa-plus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><span class=\"fas fa-minus\"><\/span><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">What\u2019s the difference between placeholders and labels?<\/a>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t<div id=\"elementor-tab-content-1526\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"6\" role=\"region\" aria-labelledby=\"elementor-tab-title-1526\"><p>Labels provide permanent field descriptions; placeholders offer temporary hints and vanish once typing starts. Always include a visible label and use placeholders only for supplementary examples, not as the sole descriptor.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f065ae1 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f065ae1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-24eefa9\" data-id=\"24eefa9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9850a0c elementor-widget elementor-widget-text-editor\" data-id=\"9850a0c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Check out our Products &amp; Services<\/h2><p>Ready to take your first steps towards digital accessibility compliance? Then see how we can support your journey with our accessibility solutions:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-953e89c elementor-section-content-space-between elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"953e89c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-d9992a3\" data-id=\"d9992a3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c5b261 elementor-widget elementor-widget-image\" data-id=\"4c5b261\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-35994\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Checker-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3366b88 elementor-widget elementor-widget-text-editor\" data-id=\"3366b88\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Web Accessibility Checker<\/b><\/p><p>Scan, detect, fix, and maintain accessibility compliance standards on your website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee0a60 elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"aee0a60\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/au\/product\/website-accessibility-checker\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">View Checker<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-af02845\" data-id=\"af02845\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e660532 elementor-widget elementor-widget-image\" data-id=\"e660532\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-35995\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/Toolbar-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cef2f72 elementor-widget elementor-widget-text-editor\" data-id=\"cef2f72\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Assistive Toolbar<br \/><\/b><\/p><p>Make your website an inclusive and customisable experience for people with disabilities.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38838a1 elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"38838a1\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/au\/product\/assistive-toolbar\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">View Toolbar<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0c1ef4b\" data-id=\"0c1ef4b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c460a5d elementor-widget elementor-widget-image\" data-id=\"c460a5d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-35996\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/11\/PDF-Remediation-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b871f5f elementor-widget elementor-widget-text-editor\" data-id=\"b871f5f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>PDF Accessibility Checker<br \/><\/b><\/p><p>Check your PDFs are compliant with accessibility standards and run automated fixes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55e0e6c elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"55e0e6c\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/au\/product\/pdf-accessibility-checker\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">View Checker<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.<\/p>\n","protected":false},"author":9,"featured_media":34223,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[107],"tags":[199],"departments":[94,96],"type_tag":[124],"flag":[],"class_list":["post-34222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-general-accessibility","departments-marketing","departments-tech","type_tag-articles"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Form Accessibility: Best Practices for Accessible Web Forms<\/title>\n<meta name=\"description\" content=\"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Form Accessibility: Best Practices for Accessible Web Forms\" \/>\n<meta property=\"og:description\" content=\"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\" \/>\n<meta property=\"og:site_name\" content=\"Recite Me\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-22T15:13:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-28T11:03:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Halpin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Halpin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\"},\"author\":{\"name\":\"Michael Halpin\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/person\/a803bb6cbfcec2867b8f9f543359cbf8\"},\"headline\":\"Web Form Accessibility: Proven Best Practices for Website Forms\",\"datePublished\":\"2025-05-22T15:13:53+00:00\",\"dateModified\":\"2026-01-28T11:03:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\"},\"wordCount\":4710,\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/au\/#organization\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg\",\"keywords\":[\"General Accessibility\"],\"articleSection\":[\"News\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\",\"url\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\",\"name\":\"Form Accessibility: Best Practices for Accessible Web Forms\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/au\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg\",\"datePublished\":\"2025-05-22T15:13:53+00:00\",\"dateModified\":\"2026-01-28T11:03:58+00:00\",\"description\":\"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage\",\"url\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg\",\"contentUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Web Form Accessibility: Proven Best Practices for Website Forms\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/reciteme.com\/au\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Form Accessibility: Proven Best Practices for Website Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/reciteme.com\/au\/#website\",\"url\":\"https:\/\/reciteme.com\/au\/\",\"name\":\"Recite Me\",\"description\":\"Recite Me Website\",\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/au\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/reciteme.com\/au\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/reciteme.com\/au\/#organization\",\"name\":\"Recite Me\",\"url\":\"https:\/\/reciteme.com\/au\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png\",\"contentUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png\",\"width\":246,\"height\":80,\"caption\":\"Recite Me\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/person\/a803bb6cbfcec2867b8f9f543359cbf8\",\"name\":\"Michael Halpin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ae2f3f545f8d0f0cf271e95cd76a081b3357c7a3f243082c7750004eede90c88?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ae2f3f545f8d0f0cf271e95cd76a081b3357c7a3f243082c7750004eede90c88?s=96&d=mm&r=g\",\"caption\":\"Michael Halpin\"},\"url\":\"https:\/\/reciteme.com\/au\/author\/michaelhalpin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Form Accessibility: Best Practices for Accessible Web Forms","description":"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_GB","og_type":"article","og_title":"Form Accessibility: Best Practices for Accessible Web Forms","og_description":"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.","og_url":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/","og_site_name":"Recite Me","article_published_time":"2025-05-22T15:13:53+00:00","article_modified_time":"2026-01-28T11:03:58+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg","type":"image\/jpeg"}],"author":"Michael Halpin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Michael Halpin","Estimated reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#article","isPartOf":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/"},"author":{"name":"Michael Halpin","@id":"https:\/\/reciteme.com\/au\/#\/schema\/person\/a803bb6cbfcec2867b8f9f543359cbf8"},"headline":"Web Form Accessibility: Proven Best Practices for Website Forms","datePublished":"2025-05-22T15:13:53+00:00","dateModified":"2026-01-28T11:03:58+00:00","mainEntityOfPage":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/"},"wordCount":4710,"publisher":{"@id":"https:\/\/reciteme.com\/au\/#organization"},"image":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg","keywords":["General Accessibility"],"articleSection":["News"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/","url":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/","name":"Form Accessibility: Best Practices for Accessible Web Forms","isPartOf":{"@id":"https:\/\/reciteme.com\/au\/#website"},"primaryImageOfPage":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage"},"image":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg","datePublished":"2025-05-22T15:13:53+00:00","dateModified":"2026-01-28T11:03:58+00:00","description":"Learn best practices for accessible web forms to improve usability, meet accessibility standards, and enhance user experience.","breadcrumb":{"@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#primaryimage","url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg","contentUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/05\/Web-Form-Accessibility-Proven-Best-Practices-for-Website-Forms-Thumbnail-copy.jpg","width":1920,"height":1080,"caption":"Web Form Accessibility: Proven Best Practices for Website Forms"},{"@type":"BreadcrumbList","@id":"https:\/\/reciteme.com\/au\/news\/website-form-accessibility\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/reciteme.com\/au\/"},{"@type":"ListItem","position":2,"name":"Web Form Accessibility: Proven Best Practices for Website Forms"}]},{"@type":"WebSite","@id":"https:\/\/reciteme.com\/au\/#website","url":"https:\/\/reciteme.com\/au\/","name":"Recite Me","description":"Recite Me Website","publisher":{"@id":"https:\/\/reciteme.com\/au\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/reciteme.com\/au\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/reciteme.com\/au\/#organization","name":"Recite Me","url":"https:\/\/reciteme.com\/au\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/","url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png","contentUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png","width":246,"height":80,"caption":"Recite Me"},"image":{"@id":"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/reciteme.com\/au\/#\/schema\/person\/a803bb6cbfcec2867b8f9f543359cbf8","name":"Michael Halpin","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ae2f3f545f8d0f0cf271e95cd76a081b3357c7a3f243082c7750004eede90c88?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ae2f3f545f8d0f0cf271e95cd76a081b3357c7a3f243082c7750004eede90c88?s=96&d=mm&r=g","caption":"Michael Halpin"},"url":"https:\/\/reciteme.com\/au\/author\/michaelhalpin\/"}]}},"_links":{"self":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/34222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/comments?post=34222"}],"version-history":[{"count":14,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/34222\/revisions"}],"predecessor-version":[{"id":36467,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/34222\/revisions\/36467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/media\/34223"}],"wp:attachment":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/media?parent=34222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/categories?post=34222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/tags?post=34222"},{"taxonomy":"departments","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/departments?post=34222"},{"taxonomy":"type_tag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/type_tag?post=34222"},{"taxonomy":"flag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/flag?post=34222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}