Search code examples
htmlcsstabsfocusaccessibility

How to make the parent element in a dropdown menu item have visible focus using only HTML


Im trying to make the parent element in a dropdown menu have visible focus when tabbed over for accessibility concerns. However, for some reason I do not have access to the css file so I need to make this happen with HTML. Is there even a way to do this? The code is looking something like this right now:

<li class = dropdown
class = "dropdown" data-toggle="dropdown" aria-haspopup="true">

Im sorry if this question is a little vague im not sure how to go about this


Solution

  • It looks that your element is currently not focusable. list elements are not focusable by default, so you should first make it focusable by adding to it tabindex="0"

    <li aria-haspopup="true"
        class = dropdown
        data-toggle="dropdown" 
        tabindex="0"><!-- li content --></li>
    

    Now you should see the browser's default focus ring. There is no option to use pseudo classes (e.g. :focus) on an inline style, so if you don't have access to the CSS file, and adding a <style> to the top of the HTML file is also not an option you can change the style attribute using inline javascript.

    <li aria-haspopup="true"
        class = dropdown
        data-toggle="dropdown"
        onfocus="this.style.outline = '2px solid red'" 
        onblur="this.style.outline = 'none'" 
        tabindex="0"><!-- li content --></li>