为什么概述:没有被认为是良好的做法？

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主要是一个辅助功能,应该在tabbable元素上可用,以指示键盘导航期间的焦点.

它为使用TAB键(或等效键)导航Web文档时具有"焦点"的链接提供视觉反馈.这对于不能使用鼠标或有视力障碍的人特别有用.如果删除大纲,则表明这些人无法访问您的网站.

http://www.outlinenone.com

Answer 2

设置outline:none;还不错.

没有:focus风格是坏事.

如果删除(通常默认提供)outline,请确保border在聚焦交互元素时设置替代样式(例如).当然,替代方案必须是可访问的,这可能是也可能不是box-shadow(检查对比度,记住色盲,检查访问者是否支持等).

简单的测试方法:使用Tab页面上的键.你应该总是能够看到你目前关注的是什么.如果这种特定的风格具有足够高的对比度,不仅仅依赖于颜色,并且访问者的浏览器支持,你也没关系.