在选项卡上显示 "Accessible" 按钮

Question

我正在尝试在页面顶部显示一个访问辅助功能选项的按钮 - 通常是隐藏的 - 当用户切换到它们时。

HTML:

<a href="" class="access" accesskey="1" tabindex="1">Accessbility Options</a>

风格：

.access {display:none; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {display:block;}

但是，当您在页面首次加载后使用选项卡按钮时，没有任何显示。我试过使用 :hover 而不是 focus 等；但我正在努力寻找类似的答案来处理它而没有任何 jQuery / 过度复杂化。

Answer 1

而不是

display:none;

你可以使用

.access {opacity:0; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {opacity:1;}

带有 display:none 的内容不会被赋予实际的 tabindex。

Answer 2

尝试使用 display: hidden 或查找 into this question 以获得 JavaScript 解决方案

Answer 3

具有

的元素

display: none;

无法获得焦点！您必须使用另一种方法来使元素不可见。例如将其定位在页面之外，或不透明度（请注意，即使它不可见也是可点击的）。

Show "Accessible" button on tab