{"id":3552,"date":"2026-02-11T09:58:09","date_gmt":"2026-02-11T09:58:09","guid":{"rendered":"https:\/\/codingfix.com\/?p=3552"},"modified":"2026-02-13T16:22:19","modified_gmt":"2026-02-13T16:22:19","slug":"accessible-forms-in-wordpress-labels-errors-and-aria","status":"publish","type":"post","link":"https:\/\/codingfix.com\/accessible-forms-in-wordpress-labels-errors-and-aria\/","title":{"rendered":"Accessible Forms in WordPress: Labels, Errors and ARIA Done Right"},"content":{"rendered":"\n<div id=\"gspb_text-id-gsbp-348ad70\" class=\"gspb_text gspb_text-id-gsbp-348ad70 \">Forms are where accessibility problems become real usability problems.<br><br>A contact form that <em>submits<\/em> but doesn\u2019t announce errors, a modal that traps focus, or an input without a proper label can make a WordPress site unusable for keyboard and screen reader users \u2014 even if everything looks fine visually.<br><br>Let\u2019s break down what actually matters when building accessible forms in WordPress.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h2 id=\"gspb_heading-id-gsbp-e9d928e\" class=\"gspb_heading gspb_heading-id-gsbp-e9d928e \">Accessible Forms in WordPress: Labels, Errors and ARIA Done Right<\/h2>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ol><li><a href=\"#labels-are-not-optional\">Labels Are Not Optional<\/a><\/li><li><a href=\"#aria-label-vs-label-when-to-use-each\">aria-label vs  (When to Use Each)<\/a><\/li><li><a href=\"#accessible-error-messages-aria-live-matters\">Accessible Error Messages: aria-live Matters<\/a><\/li><li><a href=\"#focus-management-in-modals-and-dynamic-forms\">Focus Management in Modals and Dynamic Forms<\/a><\/li><li><a href=\"#aria-roles-for-custom-form-components\">ARIA Roles for Custom Form Components<\/a><\/li><li><a href=\"#how-to-test-color-contrast-properly-1\">Form Plugins: What They Get Right (and What They Don\u2019t)<\/a><\/li><li><a href=\"#how-to-test-color-contrast-properly-1-1\">A Practical Accessibility Checklist for WordPress Forms<\/a><\/li><li><a href=\"#how-to-test-color-contrast-properly-1-1-2\">Final Thought<\/a><\/li><\/ol><\/nav><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"labels-are-not-optional\">Labels Are Not Optional<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-1652afc\" class=\"gspb_text gspb_text-id-gsbp-1652afc \">Every form control must have an explicit label.<br><br>This is not a stylistic recommendation \u2014 it\u2019s a WCAG requirement.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-3cac354\" class=\"gspb_heading gspb_heading-id-gsbp-3cac354 \">What works<\/h4>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;label for=\"email\">Email address&lt;\/label>\n&lt;input id=\"email\" type=\"email\" \/><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">label<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">for<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">email<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Email address&lt;\/<\/span><span style=\"color: #F286C4\">label<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">input<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">id<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">email<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">type<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">email<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-1a96b4a\" class=\"gspb_heading gspb_heading-id-gsbp-1a96b4a \">What doesn\u2019t<\/h4>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-593c708\" id=\"gspb_iconsList-id-gsbp-593c708\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Placeholder-only labels<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Icons without text<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Visually hidden labels removed from the accessibility tree<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-ce6b384\" class=\"gspb_text gspb_text-id-gsbp-ce6b384 \">If you need to hide labels visually, hide them <strong>visually<\/strong>, not semantically.<br><br><em>If a screen reader can\u2019t announce what an input is for, the form is broken.<\/em><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aria-label-vs-label-when-to-use-each\">aria-label vs <code>&lt;label&gt;<\/code> (When to Use Each)<\/h3>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-4f7df56\" id=\"gspb_iconsList-id-gsbp-4f7df56\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Prefer a visible <code>&lt;label><\/code> whenever possible<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Use <code>aria-label<\/code> only when a visible label is impossible<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Never use both with conflicting values<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-af2fc5b\" class=\"gspb_text gspb_text-id-gsbp-af2fc5b \">Example (acceptable fallback):<\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;input type=\"search\" aria-label=\"Search articles\" \/><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">input<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">type<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">search<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-label<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Search articles<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-506e4f3\" class=\"gspb_text gspb_text-id-gsbp-506e4f3 \">ARIA is not a shortcut \u2014 it\u2019s a backup.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"accessible-error-messages-aria-live-matters\">Accessible Error Messages: <code>aria-live<\/code> Matters<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-73ee93a\" class=\"gspb_text gspb_text-id-gsbp-73ee93a \">A common failure in WordPress forms is error feedback that is only visual.<br><br>Red borders, icons, or text updates <strong>are not announced automatically<\/strong> by screen readers.<br><br>Use live regions:<\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;div class=\"form-error\" aria-live=\"polite\">\n  Please enter a valid email address.\n&lt;\/div><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">form-error<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-live<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">polite<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  Please enter a valid email address.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">&lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-b7404f6\" id=\"gspb_iconsList-id-gsbp-b7404f6\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\"><code>aria-live=\"polite\"<\/code> for validation feedback<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\"><code>aria-live=\"assertive\"<\/code> only for critical errors<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-f673cc5\" class=\"gspb_text gspb_text-id-gsbp-f673cc5 \">Without this, users may submit a form and have no idea what went wrong.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"focus-management-in-modals-and-dynamic-forms\">Focus Management in Modals and Dynamic Forms<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-14309fa\" class=\"gspb_text gspb_text-id-gsbp-14309fa \">Forms often live inside:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-2663138\" id=\"gspb_iconsList-id-gsbp-2663138\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">modals<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">popups<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">slide-in panels<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-99b26c4\" class=\"gspb_text gspb_text-id-gsbp-99b26c4 \">If focus is not managed correctly:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-d98997e\" id=\"gspb_iconsList-id-gsbp-d98997e\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">keyboard users get lost<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">screen readers keep reading the background<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">ESC and Tab behave inconsistently<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-db139d1\" class=\"gspb_text gspb_text-id-gsbp-db139d1 \">Minimum requirements:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-06d2640\" id=\"gspb_iconsList-id-gsbp-06d2640\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">move focus to the modal when it opens<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">trap focus inside<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">restore focus when it closes<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-1f1ea65\" class=\"gspb_text gspb_text-id-gsbp-1f1ea65 \">ARIA roles help, but <strong>JavaScript logic is required<\/strong>.<\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;div role=\"dialog\" aria-modal=\"true\"><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">role<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dialog<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-modal<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">true<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-7c6f15e\" class=\"gspb_text gspb_text-id-gsbp-7c6f15e \">ARIA alone does not manage focus \u2014 it only describes it.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aria-roles-for-custom-form-components\">ARIA Roles for Custom Form Components<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-ae1690f\" class=\"gspb_text gspb_text-id-gsbp-ae1690f \">Custom UI components (toggles, sliders, custom selects) are common in WordPress plugins.<br><br>If you build one:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-765326f\" id=\"gspb_iconsList-id-gsbp-765326f\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">you own the accessibility<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">native inputs are always safer<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-ea493ef\" class=\"gspb_text gspb_text-id-gsbp-ea493ef \">If native elements are not an option, you must implement:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-43272a8\" id=\"gspb_iconsList-id-gsbp-43272a8\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">correct ARIA roles (<code>role=\"switch\"<\/code>, <code>role=\"button\"<\/code>)<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">keyboard interaction (Enter, Space, Arrow keys)<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">state attributes (<code>aria-checked<\/code>, <code>aria-expanded<\/code>)<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-11e3bbc\" class=\"gspb_text gspb_text-id-gsbp-11e3bbc \"><strong>No ARIA is better than wrong ARIA.<\/strong><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-test-color-contrast-properly-1\">Form Plugins: What They Get Right (and What They Don\u2019t)<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-8260878\" class=\"gspb_text gspb_text-id-gsbp-8260878 \">Popular plugins like <a href=\"https:\/\/www.gravityforms.com\/\" target=\"_blank\" rel=\"noopener\">Gravity Forms<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/wpforms-lite\/\" target=\"_blank\" rel=\"noopener\">WPForms<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" target=\"_blank\" rel=\"noopener\">Forminator<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\" rel=\"noopener\">Contact Form 7<\/a> provide a good base, but:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-464ca3b\" id=\"gspb_iconsList-id-gsbp-464ca3b\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">labels can still be removed by themes<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">error announcements often need customization<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">modal integrations frequently break focus order<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-ae8ce66\" class=\"gspb_text gspb_text-id-gsbp-ae8ce66 \">Accessibility is a shared responsibility between:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-14f51e4\" id=\"gspb_iconsList-id-gsbp-14f51e4\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">plugin<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">error announcements often need customization<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">custom code<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-d46f2eb\" class=\"gspb_text gspb_text-id-gsbp-d46f2eb \">Assume nothing is accessible by default \u2014 always test.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-test-color-contrast-properly-1-1\">A Practical Accessibility Checklist for WordPress Forms<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-3eb6d66\" class=\"gspb_text gspb_text-id-gsbp-3eb6d66 \">Before calling a form \u201caccessible\u201d, verify that:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-93a9efb\" id=\"gspb_iconsList-id-gsbp-93a9efb\"><div class=\"gspb_iconsList__item\" data-id=\"0\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">plugin<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"1\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">errors are announced via aria-live<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"2\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">focus order is logical<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"3\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">modals trap and restore focus<\/span><\/div><div class=\"gspb_iconsList__item\" data-id=\"4\"><svg class=\"\" style=\"display:inline-block;vertical-align:middle\" width=\"18\" height=\"18\" viewBox=\"0 0 1024 1024\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path style=\"fill:#565D66\" d=\"M871.696 166.932l-526.088 526.088-193.304-193.304c-9.372-9.372-24.568-9.372-33.942 0l-56.568 56.568c-9.372 9.372-9.372 24.568 0 33.942l266.842 266.842c9.372 9.372 24.568 9.372 33.942 0l599.626-599.626c9.372-9.372 9.372-24.568 0-33.942l-56.568-56.568c-9.372-9.372-24.568-9.372-33.94 0z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">keyboard-only users can complete the form<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-6aa50d2\" class=\"gspb_text gspb_text-id-gsbp-6aa50d2 \">If one of these fails, the form is functionally broken \u2014 even if it looks perfect.<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-test-color-contrast-properly-1-1-2\">Final Thought<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-8d026f1\" class=\"gspb_text gspb_text-id-gsbp-8d026f1 \">Accessible forms are not about adding ARIA everywhere.<br>They\u2019re about respecting how users interact without sight or mouse.<br><br><em>If a form can\u2019t be completed with a keyboard and a screen reader, it\u2019s not usable.<\/em><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\"\/>\n\n\n\n<p>\ud83d\udd17 <em>This article is part of a broader guide on the most critical accessibility areas in WordPress: <strong><a href=\"https:\/\/codingfix.com\/accessibility-in-wordpress-best-practices\/\">6 Expert Techniques to Enhance Accessibility in WordPress<\/a><\/strong><\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Labels Are Not Optional aria-label vs &lt;label&gt; (When to Use Each) Accessible Error Messages: aria-live Matters Focus Management in Modals and Dynamic Forms ARIA Roles for Custom Form Components Form Plugins: What They Get Right (and What They Don\u2019t) A Practical Accessibility Checklist for WordPress Forms Final Thought \ud83d\udd17 This article is part of a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":".gspb_text-id-gsbp-1652afc,.gspb_text-id-gsbp-348ad70{margin-bottom:20px!important}#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item svg path{fill:#2184f9!important}#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList,#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList,#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList,#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList,#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList,#gspb_iconsList-id-gsbp-765326f.gspb_iconsList,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList,#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList,#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList{margin-bottom:20px}#gspb_iconsList-id-gsbp-593c708.gspb_iconsList [data-id='0'] svg,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList [data-id='2'] svg,body #gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item svg{margin:0!important}.gspb_text-id-gsbp-ce6b384{margin-top:0!important}#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList [data-id='0'] svg,#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-4f7df56.gspb_iconsList [data-id='2'] svg{margin:0!important}.gspb_text-id-gsbp-506e4f3,.gspb_text-id-gsbp-af2fc5b,.gspb_text-id-gsbp-ce6b384{margin-bottom:20px!important}.gspb_text-id-gsbp-506e4f3{margin-top:20px!important}.gspb_text-id-gsbp-14309fa,.gspb_text-id-gsbp-1f1ea65,.gspb_text-id-gsbp-73ee93a,.gspb_text-id-gsbp-99b26c4,.gspb_text-id-gsbp-db139d1,.gspb_text-id-gsbp-f673cc5{margin-top:20px!important}#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList [data-id='1'] svg{margin:0!important}#gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-2663138.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-2663138.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-d98997e.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-06d2640.gspb_iconsList [data-id='2'] svg{margin:0!important}.gspb_text-id-gsbp-11e3bbc,.gspb_text-id-gsbp-7c6f15e,.gspb_text-id-gsbp-ae1690f,.gspb_text-id-gsbp-ea493ef{margin-top:20px!important;margin-bottom:20px!important}#gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-765326f.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-765326f.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-765326f.gspb_iconsList [data-id='1'] svg{margin:0!important}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList [data-id='1'] svg{margin:0!important}#gspb_iconsList-id-gsbp-43272a8.gspb_iconsList [data-id='2'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}.gspb_text-id-gsbp-3eb6d66,.gspb_text-id-gsbp-6aa50d2,.gspb_text-id-gsbp-8260878,.gspb_text-id-gsbp-8d026f1,.gspb_text-id-gsbp-ae8ce66,.gspb_text-id-gsbp-d46f2eb{margin-top:20px!important;margin-bottom:0!important}#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-464ca3b.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-14f51e4.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList [data-id='2'] svg,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList [data-id='3'] svg,#gspb_iconsList-id-gsbp-93a9efb.gspb_iconsList [data-id='4'] svg{margin:0!important}","footnotes":""},"categories":[38],"tags":[],"post_folder":[140],"class_list":["post-3552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/comments?post=3552"}],"version-history":[{"count":6,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3552\/revisions"}],"predecessor-version":[{"id":3701,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3552\/revisions\/3701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media\/3697"}],"wp:attachment":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media?parent=3552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/categories?post=3552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/tags?post=3552"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/post_folder?post=3552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}