{"id":17452402,"date":"2024-02-26T07:51:15","date_gmt":"2024-02-26T07:51:15","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/keyboard-inaccessible-bad-html-wcag-fails-immediately\/"},"modified":"2024-02-26T07:51:15","modified_gmt":"2024-02-26T07:51:15","slug":"keyboard-inaccessible-bad-html-wcag-fails-immediately","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/keyboard-inaccessible-bad-html-wcag-fails-immediately\/","title":{"rendered":"Keyboard inaccessible, bad HTML. WCAG fails immediately."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;m curious, why did you choose to insert the &lt;div&gt; element into the DOM with some JS to handle scrolling. No keyboard focus, no accessible label\/name\/content, no HTML semantics, no ARIA to fix this.<br \/>In fact <strong>DO NOT use ARIA <\/strong>to override.\/hide your problems. The best ARIA is no ARIA. <br \/><strong>Use an &lt;a&gt; element<\/strong>, it&#8217;s also quick to write and has it all by definition. You can easily add span  inside the link element with translatable content and hide it visually with &#8220;sr-only&#8221; class (from Bootstrap). You could detect the first link on the page and make it an anchor if there&#8217;s no id attribute.<\/p>\n","protected":false},"template":"","class_list":["post-17452402","topic","type-topic","status-publish","hentry","topic-tag-wcag"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17452402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/17452402\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=17452402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}