{"id":3527,"date":"2026-02-03T13:55:48","date_gmt":"2026-02-03T13:55:48","guid":{"rendered":"https:\/\/codingfix.com\/?p=3527"},"modified":"2026-02-03T13:55:48","modified_gmt":"2026-02-03T13:55:48","slug":"keyboard-navigation-in-wordpress","status":"publish","type":"post","link":"https:\/\/codingfix.com\/keyboard-navigation-in-wordpress\/","title":{"rendered":"Keyboard Navigation in WordPress: Menus, Focus and Common Failures"},"content":{"rendered":"\n<div id=\"gspb_text-id-gsbp-4257ba1\" class=\"gspb_text gspb_text-id-gsbp-4257ba1 \">Keyboard navigation is one of the fastest ways to assess accessibility in WordPress.<br>If a site can\u2019t be used without a mouse, it\u2019s not accessible \u2014 no matter how good it looks.<\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-348ad70\" class=\"gspb_text gspb_text-id-gsbp-348ad70 \">This is also where many WordPress themes quietly fail: menus that only work on hover, invisible focus states, and missing skip links.<br><br>Let\u2019s break down the most common issues and how to fix them.<\/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 \">Keyboard Navigation in WordPress: Menus, Focus and Common Failures<\/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=\"#skip-to-content-the-most-overlooked-fix\">Skip to Content: The Most Overlooked Fix<\/a><\/li><li><a href=\"#focus-vs-focus-visible-and-why-it-matters\">:focus vs :focus-visible (And Why It Matters)<\/a><\/li><li><a href=\"#dropdown-menus-that-work-without-a-mouse\">Dropdown Menus That Work Without a Mouse<\/a><\/li><li><a href=\"#how-to-run-a-quick-keyboard-navigation-test\">How to Run a Quick Keyboard Navigation Test<\/a><\/li><li><a href=\"#why-keyboard-navigation-improves-everything\">Why Keyboard Navigation Improves Everything<\/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=\"skip-to-content-the-most-overlooked-fix\">Skip to Content: The Most Overlooked Fix<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-246a7bd\" class=\"gspb_text gspb_text-id-gsbp-246a7bd \">A <strong>\u201cSkip to content\u201d<\/strong> link allows keyboard and screen reader users to bypass repetitive navigation and jump straight to the main content.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-c382e80\" class=\"gspb_heading gspb_heading-id-gsbp-c382e80 \">Why it matters<\/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\">Without it, users must tab through every menu item on every page<\/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 reader users rely on it to reach <code>&lt;main><\/code> quickly<\/span><\/div><\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-3fb0833\" class=\"gspb_heading gspb_heading-id-gsbp-3fb0833 \">How it should work<\/h4>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-67a21dd\" id=\"gspb_iconsList-id-gsbp-67a21dd\"><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\">It\u2019s the <strong>first focusable element<\/strong> on the page<\/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\">It becomes visible on focus<\/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\">It links to the <code>&lt;main><\/code> element<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-ce6b384\" class=\"gspb_text gspb_text-id-gsbp-ce6b384 \">Example:<\/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;a class=\"skip-link\" href=\"#main\">Skip to main content&lt;\/a>\n<\/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\">a<\/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\">skip-link<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">href<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">#main<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Skip to main content&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-0d03a14\" class=\"gspb_text gspb_text-id-gsbp-0d03a14 \">If your theme doesn\u2019t include it, accessibility starts already compromised.<br><br><strong>Golden rule:<\/strong><br>Skip links must be visually hidden, not accessibility-hidden.<br>If screen readers can\u2019t reach them, they\u2019re useless.<\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-59c2e31\" class=\"gspb_text gspb_text-id-gsbp-59c2e31 \">In FSE themes you have to put the skip-link in <code>header<\/code> pattern, in standard themes you&#8217;ll have to edit the template <code>header.php<\/code>.<br>Then, to make the skip-link accessible only to those who need it, you can use the following CSS:<\/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>.skip-link {\n  position: absolute;\n  top: -9999px;\n  left: 0;\n  background: #000;\n  color: #fff;\n  padding: 8px 12px;\n  z-index: 1000;\n}\n\n.skip-link:focus,\n.skip-link:focus-visible {\n  top: 0;\n}<\/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: #62E884; font-style: italic\">.skip-link<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">position<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">absolute<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">top<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">-9999<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">left<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">background<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">#000<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">color<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">#fff<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">padding<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">8<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">12<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">z-index<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">1000<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.skip-link<\/span><span style=\"color: #F286C4; font-style: italic\">:<\/span><span style=\"color: #62E884; font-style: italic\">focus<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.skip-link<\/span><span style=\"color: #F286C4; font-style: italic\">:<\/span><span style=\"color: #62E884; font-style: italic\">focus-visible<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">top<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-c6714ea\" class=\"gspb_text gspb_text-id-gsbp-c6714ea \">If you apply this tecnique, you&#8217;ll get a false positive while testing your website with automated tools like Lighthouse. <br>For example, Lighthouse reports that in this page (and in the whole website) the skip link is not focusable. But try to navigate using TAB and you&#8217;ll see by yourself that the skip link is focusable and usable through the keyboard.<br><br><strong>Golden rule:<\/strong><br><br>Automated tools can flag real accessibility issues \u2014 but they can also miss context.<br>Manual testing always wins.<\/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-vs-focus-visible-and-why-it-matters\"><code>:focus<\/code> vs <code>:focus-visible<\/code> (And Why It Matters)<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-af2fc5b\" class=\"gspb_text gspb_text-id-gsbp-af2fc5b \">Removing focus outlines is one of the most common accessibility mistakes in WordPress themes.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-4163a0f\" class=\"gspb_heading gspb_heading-id-gsbp-4163a0f \">The problem<\/h4>\n\n\n\n<div id=\"gspb_text-id-gsbp-1b87d6c\" class=\"gspb_text gspb_text-id-gsbp-1b87d6c \">Designers often add:<\/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>:focus {\n  outline: none;\n}<\/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: #F286C4; font-style: italic\">:<\/span><span style=\"color: #62E884; font-style: italic\">focus<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">outline<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">none<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-911fba1\" class=\"gspb_text gspb_text-id-gsbp-911fba1 \">Result:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-832b1a9\" id=\"gspb_iconsList-id-gsbp-832b1a9\"><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 lose orientation<\/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\">Navigation becomes guesswork<\/span><\/div><\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-875b2d2\" class=\"gspb_heading gspb_heading-id-gsbp-875b2d2 \">The modern solution<\/h4>\n\n\n\n<div id=\"gspb_text-id-gsbp-c61376e\" class=\"gspb_text gspb_text-id-gsbp-c61376e \">Use <code>:focus-visible<\/code> to style focus <strong>only when needed<\/strong>.<br><br>Example:<\/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>:focus-visible {\n  outline: 2px solid #005fcc;\n  outline-offset: 2px;\n}<\/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: #F286C4; font-style: italic\">:<\/span><span style=\"color: #62E884; font-style: italic\">focus-visible<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">outline<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">solid<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">#005fcc<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">outline-offset<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">2<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-551afc4\" class=\"gspb_text gspb_text-id-gsbp-551afc4 \">This keeps the UI clean for mouse users and usable for keyboard users.<\/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=\"dropdown-menus-that-work-without-a-mouse\">Dropdown Menus That Work Without a Mouse<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-73ee93a\" class=\"gspb_text gspb_text-id-gsbp-73ee93a \">WordPress menus often break keyboard navigation when dropdowns rely solely on hover.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-dbe62f5\" class=\"gspb_heading gspb_heading-id-gsbp-dbe62f5 \">Common failures<\/h4>\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=\"M512 16c-274 0-496 222-496 496s222 496 496 496 496-222 496-496-222-496-496-496zM755.2 642.2c9.4 9.4 9.4 24.6 0 34l-79.2 79c-9.4 9.4-24.6 9.4-34 0l-130-131.2-130.2 131.2c-9.4 9.4-24.6 9.4-34 0l-79-79.2c-9.4-9.4-9.4-24.6 0-34l131.2-130-131.2-130.2c-9.4-9.4-9.4-24.6 0-34l79.2-79.2c9.4-9.4 24.6-9.4 34 0l130 131.4 130.2-131.2c9.4-9.4 24.6-9.4 34 0l79.2 79.2c9.4 9.4 9.4 24.6 0 34l-131.4 130 131.2 130.2z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Submenus that don\u2019t open on <code>Enter<\/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=\"M512 16c-274 0-496 222-496 496s222 496 496 496 496-222 496-496-222-496-496-496zM755.2 642.2c9.4 9.4 9.4 24.6 0 34l-79.2 79c-9.4 9.4-24.6 9.4-34 0l-130-131.2-130.2 131.2c-9.4 9.4-24.6 9.4-34 0l-79-79.2c-9.4-9.4-9.4-24.6 0-34l131.2-130-131.2-130.2c-9.4-9.4-9.4-24.6 0-34l79.2-79.2c9.4-9.4 24.6-9.4 34 0l130 131.4 130.2-131.2c9.4-9.4 24.6-9.4 34 0l79.2 79.2c9.4 9.4 9.4 24.6 0 34l-131.4 130 131.2 130.2z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">Focus trapped inside hidden elements<\/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=\"M512 16c-274 0-496 222-496 496s222 496 496 496 496-222 496-496-222-496-496-496zM755.2 642.2c9.4 9.4 9.4 24.6 0 34l-79.2 79c-9.4 9.4-24.6 9.4-34 0l-130-131.2-130.2 131.2c-9.4 9.4-24.6 9.4-34 0l-79-79.2c-9.4-9.4-9.4-24.6 0-34l131.2-130-131.2-130.2c-9.4-9.4-9.4-24.6 0-34l79.2-79.2c9.4-9.4 24.6-9.4 34 0l130 131.4 130.2-131.2c9.4-9.4 24.6-9.4 34 0l79.2 79.2c9.4 9.4 9.4 24.6 0 34l-131.4 130 131.2 130.2z\"><\/path><\/svg><span class=\"gspb_iconsList__item__text\">No way to close the menu with <code>Esc<\/code><\/span><\/div><\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-fa833cf\" class=\"gspb_heading gspb_heading-id-gsbp-fa833cf \">Accessible behavior<\/h4>\n\n\n\n<div id=\"gspb_text-id-gsbp-f673cc5\" class=\"gspb_text gspb_text-id-gsbp-f673cc5 \">These issues are often invisible until you:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-49b700a\" id=\"gspb_iconsList-id-gsbp-49b700a\"><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\">Menus open with <code>Enter<\/code> or <code>Space<\/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\">Submenus are reachable with <code>Tab<\/code><\/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\"><code>aria-expanded<\/code> reflects open\/closed state<\/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\">Focus returns logically when the menu closes<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-6b65c93\" class=\"gspb_text gspb_text-id-gsbp-6b65c93 \">If your menu works only on hover, it\u2019s not accessible.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-393b714\" class=\"gspb_heading gspb_heading-id-gsbp-393b714 \">Important note<\/h4>\n\n\n\n<div id=\"gspb_text-id-gsbp-3b62996\" class=\"gspb_text gspb_text-id-gsbp-3b62996 \">In the WordPress Navigation block, hover is bound to the menu item, but keyboard activation is bound to a separate button.<br>This creates an interaction mismatch that developers should actively fix. The trick is simple. Just add this small script to the footer of your website (using <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\">WP Code<\/a> or any other plugin that allow you to add custom code to WordPress):<\/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>document.addEventListener('keydown', function (e) {\n  if (e.key !== 'Enter' &amp;&amp; e.key !== ' ') return;\n\n  const link = e.target.closest(\n    '.wp-block-navigation-item.has-child > .wp-block-navigation-item__content'\n  );\n\n  if (!link) return;\n\n  const toggleButton = link.parentElement.querySelector(\n    '.wp-block-navigation-submenu__toggle'\n  );\n\n  if (!toggleButton) return;\n\n  e.preventDefault();\n  toggleButton.click();\n});\n<\/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\">document.<\/span><span style=\"color: #62E884\">addEventListener<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">keydown<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> (<\/span><span style=\"color: #FFB86C; font-style: italic\">e<\/span><span style=\"color: #F6F6F4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">if<\/span><span style=\"color: #F6F6F4\"> (e.key <\/span><span style=\"color: #F286C4\">!==<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">Enter<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">&amp;&amp;<\/span><span style=\"color: #F6F6F4\"> e.key <\/span><span style=\"color: #F286C4\">!==<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">) <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> link <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> e.target.<\/span><span style=\"color: #62E884\">closest<\/span><span style=\"color: #F6F6F4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">.wp-block-navigation-item.has-child &gt; .wp-block-navigation-item__content<\/span><span style=\"color: #DEE492\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">if<\/span><span style=\"color: #F6F6F4\"> (<\/span><span style=\"color: #F286C4\">!<\/span><span style=\"color: #F6F6F4\">link) <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> toggleButton <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> link.parentElement.<\/span><span style=\"color: #62E884\">querySelector<\/span><span style=\"color: #F6F6F4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">.wp-block-navigation-submenu__toggle<\/span><span style=\"color: #DEE492\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">if<\/span><span style=\"color: #F6F6F4\"> (<\/span><span style=\"color: #F286C4\">!<\/span><span style=\"color: #F6F6F4\">toggleButton) <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  e.<\/span><span style=\"color: #62E884\">preventDefault<\/span><span style=\"color: #F6F6F4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  toggleButton.<\/span><span style=\"color: #62E884\">click<\/span><span style=\"color: #F6F6F4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">});<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/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-run-a-quick-keyboard-navigation-test\">How to Run a Quick Keyboard Navigation Test<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-14309fa\" class=\"gspb_text gspb_text-id-gsbp-14309fa \">You don\u2019t need tools to catch most keyboard issues.<\/div>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-bf9caa3\" class=\"gspb_heading gspb_heading-id-gsbp-bf9caa3 \">Simple test<\/h4>\n\n\n\n<ul class=\"nested-list level1\">\n<li> Open your site<\/li>\n<li>Put the mouse aside<\/li>\n<li>Use only:\n<ul class=\"nested-list level2\">\n<li>Tab<\/li>\n<li>Shift + Tab<\/li>\n<li>Enter<\/li>\n<li>Esc<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 id=\"gspb_heading-id-gsbp-4415449\" class=\"gspb_heading gspb_heading-id-gsbp-4415449 \">What to check<\/h4>\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\">Can you reach all interactive elements?<\/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\">Is focus always visible?<\/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\">Does focus follow a logical order?<\/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\">Can you activate and close menus?<\/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\">Can you reach the main content quickly?<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-7c6f15e\" class=\"gspb_text gspb_text-id-gsbp-7c6f15e \">If you get lost, stuck, or confused, the site fails the 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=\"why-keyboard-navigation-improves-everything\">Why Keyboard Navigation Improves Everything<\/h3>\n\n\n\n<div id=\"gspb_text-id-gsbp-56e13b0\" class=\"gspb_text gspb_text-id-gsbp-56e13b0 \">Fixing keyboard navigation:<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-68788b3\" id=\"gspb_iconsList-id-gsbp-68788b3\"><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\">improves 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\">reduces usability friction<\/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\">reveals structural HTML issues<\/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\">often improves overall UX for everyone<\/span><\/div><\/div>\n\n\n\n<div id=\"gspb_text-id-gsbp-c3623bd\" class=\"gspb_text gspb_text-id-gsbp-c3623bd \">In WordPress, keyboard accessibility is not an edge case \u2014 it\u2019s a baseline.<\/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>Skip to Content: The Most Overlooked Fix :focus vs :focus-visible (And Why It Matters) Dropdown Menus That Work Without a Mouse How to Run a Quick Keyboard Navigation Test Open your site Put the mouse aside Use only: Tab Shift + Tab Enter Esc Why Keyboard Navigation Improves Everything \ud83d\udd17 This article is part of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":".gspb_text-id-gsbp-0d03a14,.gspb_text-id-gsbp-1b87d6c,.gspb_text-id-gsbp-246a7bd,.gspb_text-id-gsbp-348ad70,.gspb_text-id-gsbp-4257ba1,.gspb_text-id-gsbp-551afc4,.gspb_text-id-gsbp-59c2e31,.gspb_text-id-gsbp-911fba1,.gspb_text-id-gsbp-af2fc5b,.gspb_text-id-gsbp-c61376e,.gspb_text-id-gsbp-ce6b384{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-2663138.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item svg path,#gspb_iconsList-id-gsbp-b7404f6.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-593c708.gspb_iconsList [data-id='0'] svg,#gspb_iconsList-id-gsbp-593c708.gspb_iconsList [data-id='1'] 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-49b700a.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-49b700a.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-67a21dd.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item svg,body #gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item img,body #gspb_iconsList-id-gsbp-832b1a9.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{margin:0!important}#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList [data-id='0'] svg,#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-67a21dd.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList [data-id='0'] svg,#gspb_iconsList-id-gsbp-832b1a9.gspb_iconsList [data-id='1'] svg{margin:0!important}#gspb_heading-id-gsbp-393b714,#gspb_heading-id-gsbp-4415449,#gspb_heading-id-gsbp-875b2d2,#gspb_heading-id-gsbp-bf9caa3,#gspb_heading-id-gsbp-dbe62f5,#gspb_heading-id-gsbp-fa833cf{margin-top:20px}.gspb_text-id-gsbp-551afc4{margin-top:0!important}.gspb_text-id-gsbp-14309fa,.gspb_text-id-gsbp-3b62996,.gspb_text-id-gsbp-6b65c93,.gspb_text-id-gsbp-73ee93a,.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-2663138.gspb_iconsList,#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList,#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList,#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList{margin-bottom:20px}#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,#gspb_iconsList-id-gsbp-b7404f6.gspb_iconsList [data-id='2'] svg{margin:0!important}#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList [data-id='2'] svg,#gspb_iconsList-id-gsbp-49b700a.gspb_iconsList [data-id='3'] 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,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList [data-id='3'] svg,#gspb_iconsList-id-gsbp-2663138.gspb_iconsList [data-id='4'] svg{margin:0!important}.gspb_text-id-gsbp-56e13b0,.gspb_text-id-gsbp-c3623bd{margin-top:20px!important;margin-bottom:0!important}#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item__text{margin-left:15px}#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item{display:flex;flex-direction:row;align-items:center;position:relative}#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item img,#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList .gspb_iconsList__item svg{width:10px!important;height:10px!important;min-width:10px}#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList [data-id='0'] svg{height:10px!important;width:10px!important;min-width:10px!important;margin:0!important}#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList [data-id='1'] svg,#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList [data-id='2'] svg,#gspb_iconsList-id-gsbp-68788b3.gspb_iconsList [data-id='3'] svg{margin:0!important}.gspb_text-id-gsbp-c6714ea{margin-top:20px!important;margin-bottom:20px!important}","footnotes":""},"categories":[38],"tags":[],"post_folder":[140],"class_list":["post-3527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3527","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=3527"}],"version-history":[{"count":10,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3527\/revisions"}],"predecessor-version":[{"id":3676,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/posts\/3527\/revisions\/3676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media\/3540"}],"wp:attachment":[{"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/media?parent=3527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/categories?post=3527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/tags?post=3527"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codingfix.com\/wp-json\/wp\/v2\/post_folder?post=3527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}