模态：如何使键盘导航可访问？

Question

我正在使用Angular和Semantic-UI开发应用。即使是使用键盘导航应用程序的人也应该可以访问它。

我遇到了一些模态问题：

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

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

以下是我的示例的完整代码：http://jsfiddle.net/s6o0tdp7

正如您在打开模态时所看到的那样，焦点移动到第一个按钮上。我想在模态容器的开头关注整个模态，因此用户可以使用制表符按钮移动到下面的模态的其他部分。 除了modal之外，还应该阻止用户访问模态下的页面元素。

如何获得这两种行为？