{"id":10,"date":"2025-08-04T09:23:12","date_gmt":"2025-08-04T09:23:12","guid":{"rendered":"https:\/\/cms.teserakt.biz\/wp\/2026\/04\/26\/accessible-navigation-wcag-22\/"},"modified":"2026-04-26T21:28:17","modified_gmt":"2026-04-26T21:28:17","slug":"accessible-navigation-wcag-22","status":"publish","type":"post","link":"https:\/\/cms.teserakt.biz\/wp\/2025\/08\/04\/accessible-navigation-wcag-22\/","title":{"rendered":"Building Accessible Navigation: What WCAG 2.2 Actually Requires"},"content":{"rendered":"<p>Navigation is the most-audited part of any website, and the most commonly failed. After running accessibility audits on a dozen client projects in the past year, the same three issues appear almost every time: missing skip links, keyboard traps in mobile menus, and focus indicators that exist only in the browser&#8217;s default stylesheet.<\/p>\n<h2>Skip links<\/h2>\n<p>A &#8220;Skip to main content&#8221; link must be the first focusable element on the page. It can be visually hidden until focused \u2014 but it must be reachable by keyboard and functional. The most common mistake is <code>display: none<\/code>, which removes it from the focus order entirely. Use the clip pattern instead:<\/p>\n<pre><code>.skip-link {\n  position: absolute;\n  transform: translateY(-100%);\n}\n.skip-link:focus {\n  transform: translateY(0);\n}<\/code><\/pre>\n<h2>Mobile menu keyboard traps<\/h2>\n<p>When a mobile menu opens, focus should move inside it. When it closes, focus must return to the trigger button. Failing to return focus leaves keyboard users stranded at the top of the page. We use a small <code>useFocusTrap<\/code> hook that captures Tab and Shift+Tab while the menu is open.<\/p>\n<h2>Focus indicators<\/h2>\n<p>WCAG 2.2 introduced Success Criterion 2.4.11 (Focus Appearance \u2014 minimum), which requires a focus indicator with at least 3:1 contrast against adjacent colours and an area of at least the element&#8217;s perimeter. A safe cross-browser pattern:<\/p>\n<pre><code>:focus-visible {\n  outline: 2px solid #FFB020;\n  outline-offset: 3px;\n}<\/code><\/pre>\n<p>Accessibility isn&#8217;t a project-end checklist item \u2014 it&#8217;s cheapest to build in from the first component. These three fixes alone will clear the majority of navigation findings in most audits.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility audits keep flagging navigation patterns that developers swear are &#8220;standard.&#8221; Here&#8217;s what WCAG 2.2 actually requires and how to get there without redesigning your nav from scratch.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/posts\/10\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.teserakt.biz\/wp\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}