Question

谢谢大家。这是一次非常好的讨论，并为我澄清了很多。

我正在研究一个输入字段并希望删除大纲，但人们说这是一个不好的做法。我不明白为什么。毕竟，不同的浏览器有不同的轮廓，这样可以消除一致性。

没有大纲：

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  outline: none; }

我的想法是，为了增加一致性，最好摆脱轮廓，但我想有些人会争论可访问性。我仍然可以为可访问性添加边框或框阴影，这有助于网站在所有浏览器中看起来统一：

form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
  color: #000 !important;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  padding: 7px 13px; 
}
  form input[type="text"]:focus,
  form input[type="email"]:focus,
  form input[type="password"]:focus,
  form textarea:focus {
  /* IMPORTANT */ box-shadow: 0px 0px 2pt 2pt #008bd1;
  outline: none; }

所以我仍然不理解概述的论点：没有不好的做法。

请参阅：http://jsfiddle.net/bCGZQ/

编辑：这两个答案都很好，但由于第一个问题引发的争论，我会接受。

Answer 1

大纲主要是一种辅助功能，应该可以在tabbable元素上显示，以指示键盘导航过程中的焦点。

它为使用TAB键（或等效键）导航Web文档时具有“焦点”的链接提供视觉反馈。这对于不能使用鼠标或有视力障碍的人特别有用。如果您删除了大纲，那么这些人无法访问您的网站。

http://www.outlinenone.com

Answer 2

设置outline:none;并不错。

没有:focus风格是不好的。

如果您删除（通常默认情况下提供）outline，请务必在聚焦互动元素时设置其他样式（例如border）。当然，替代方案必须是可访问的，box-shadow可能是也可能不是这种情况（检查对比度，记住色盲，检查访问者是否支持它等）。

简单的测试方法：使用页面上的 Tab 键。您应始终能够查看您当前关注的内容。如果这种特定的风格具有足够高的对比度，不仅仅依赖于颜色，并且受访问者的浏览器支持，那么你很好。

为什么概述：没有一个不被认为是好的做法？

2 个答案: