Implement design focus elements "tabindex" for accessibility

DavidL
DavidL Member Posts: 18
in Ask a Question

How can we add a css design for the focus status of elements like the menu for example.

According to the order of positioning of the elements on the page, the tabindex works well, but we do not see the focus on the element.

Thanks 😉

Best Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 678 MVP
    Answer ✓

    You will need to add a pseudo element CSS class to those items. Once you have your "TabIndex" set you need to add the :focus CSS

    So lets say you want all your buttons to to do it you need 

    .dmButtonLink:focus {
     outline: 4px dashed darkorange;
}

    Of course you will need to go into the HTML as well and make sure your tab index is set!

  • Aj_Cre8
    Aj_Cre8 Member Posts: 678 MVP
    Answer ✓

    If you utilize your preview link, you can actually inspect everything and see all the HTML classes and ID's. Then you can utilize that information to write your code.

    To inspect the site in preview, right click and anywhere and click Inspect.

Answers

  • DavidL
    DavidL Member Posts: 18

    Hi,

    Super thanks to you, I would like to know for the elements added automatically as the menu, how to add this style because the HTML is not accessible.

    Thanks again  

  • DavidL
    DavidL Member Posts: 18

    Hi,

    Super thanks to you for these precisions, I will try

Categories