Create an accessible dropdown navigation without JS

Content Warning: This blog post contains gifs. After cross-posting my last accessibility post about dropdowns on dev.to , I was reading through the comments and someone posted about :focus-within . The best thing about sharing my knowledge on the i…


This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey

Content Warning: This blog post contains gifs. After cross-posting my last accessibility post about dropdowns on dev.to , I was reading through the comments and someone posted about :focus-within . The best thing about sharing my knowledge on the internet is learning how other people are approaching things. Quite frankly, I have never used :focus-within before, so this is me learning and testing it out. Because this blog post will primarily be based on a continuation of the previous dropdown post , I highly suggest reading that beforehand if you haven't already. As a reminder, here is the same HTML structure from the previous post: What is :focus-within :focus-within takes the :focus pseudo-class a step further. It represents an element that receives focus or if one of its…


This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey


Print Share Comment Cite Upload Translate
APA
a11y with Lindsey | Sciencx (2022-09-29T21:11:00+00:00) » Create an accessible dropdown navigation without JS. Retrieved from https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/.
MLA
" » Create an accessible dropdown navigation without JS." a11y with Lindsey | Sciencx - Wednesday January 9, 2019, https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/
HARVARD
a11y with Lindsey | Sciencx Wednesday January 9, 2019 » Create an accessible dropdown navigation without JS., viewed 2022-09-29T21:11:00+00:00,<https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/>
VANCOUVER
a11y with Lindsey | Sciencx - » Create an accessible dropdown navigation without JS. [Internet]. [Accessed 2022-09-29T21:11:00+00:00]. Available from: https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/
CHICAGO
" » Create an accessible dropdown navigation without JS." a11y with Lindsey | Sciencx - Accessed 2022-09-29T21:11:00+00:00. https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/
IEEE
" » Create an accessible dropdown navigation without JS." a11y with Lindsey | Sciencx [Online]. Available: https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/. [Accessed: 2022-09-29T21:11:00+00:00]
rf:citation
» Create an accessible dropdown navigation without JS | a11y with Lindsey | Sciencx | https://www.scien.cx/2019/01/09/create-an-accessible-dropdown-navigation-without-js/ | 2022-09-29T21:11:00+00:00
https://github.com/addpipe/simple-recorderjs-demo