我如何制作一个可以通过 Tab 键和 enter/space 键访问的不可见、可点击和可访问的按钮？

Question

这是当前正在操作的按钮的代码

<a class="ng-click" ng-show="hasSuperUserAccess && !siteIsBeingEdited" class="addRowSite" ng-click="addSite()">
    {{ 'SiteManager_AddSite'|translate }}
</a>

Answer 1

将 style="font-size:0px;" 添加到标签中。这会将字体大小设置为 0 像素，使 link 不可见但仍可通过 Tab 和 Enter 键使用。

Answer 2

http://jsfiddle.net/kL0wm6yd/

#link-name {
    visibility: hidden;
}

这将从页面中隐藏该元素，您无法单击它，但您可以使用选项卡 select 它并使用 enter 'click' 它。它还在页面上占据 space（这就是为什么你可以 tab/enter）。

我用fiddle来表示第一行和最后一行，所以你可以看到link仍然占据了space，但是它是不可见的。 （您不能在 jsfiddle 中使用制表符，因此只需将该代码上传到您的页面即可使用。如有任何问题，请在此处评论。