Implement design focus elements "tabindex" for accessibility

Options
DavidL
DavidL Member Posts: 14
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: 651 MVP
    Answer ✓
    Options

    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: 651 MVP
    Answer ✓
    Options

    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: 14
    Options

    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: 14
    Options

    Hi,

    Super thanks to you for these precisions, I will try

Categories