为什么大纲：没有不被认为是好的做法？

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

设置outline:none;还不错。

没有:focus 风格是不好的。

如果您删除（通常默认提供）outline，请确保在聚焦交互式元素时设置替代样式（例如 border）。当然，替代方案必须是可访问的，box-shadow 可能会也可能不会（检查对比度，考虑色盲，检查访问者是否支持它等）。

简单的测试方法：使用页面上的 Tab 键。您应该始终能够看到您当前关注的内容。如果此特定样式具有足够高的对比度，不只依赖于颜色，并且被访问者的浏览器支持，那就没问题了。

Answer 2

大纲在很大程度上是一种辅助功能，应该在可选项卡元素上可用，以在键盘导航期间指示焦点。

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

http://www.outlinenone.com