1

I'm developing an app using Angular and Semantic-UI. It should be accessible even for people who use keyboards for navigate the app.

I'm experiencing some problems with modal:

$(".my-modal").modal({
  autofocus: true
});

$(function() {
    $("#open").click(function(){
        $(".my-modal").modal('show');
    });
});

Here is the full code of my sample: http://jsfiddle.net/s6o0tdp7

As you can see when you open the modal the focus move on the first button. I would like to have focus on the entire modal, at the begin of the modal container, so users can move with tab button to go to the other sections of the modal that lay below. Besides the modal should prevent users from going to elements of the page that is under the modal.

How to get these two behaviours?

smartmouse
  • 13,912
  • 34
  • 100
  • 166
  • 2
    Do not assume all keyboard users use the Tab key to get around. Take a look at this pattern, and when I have time later on I can offer some more tips: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal – aardrian Jun 07 '17 at 13:05
  • Thank you for your reply. I had a deep look at your link and it seems it is not so easy to implement an accessible modal. In your link there is an example that use a lot of javascript! When you have time, please answer this question or the new one (or both :D): https://stackoverflow.com/questions/44452084/how-to-keep-focus-within-modal-dialog – smartmouse Jun 09 '17 at 07:49

0 Answers0