WebAIM  - 无障碍记

大纲的瘟疫:0

我看到在CSS的实现在网站上日益令人担忧的趋势 - 列入大纲:0或轮廓:无。

大纲CSS属性允许您定义视觉轮廓,其中显示,当选择的元素或具有焦点。否则,被称为重点指标,它被看作是虚线是环绕链接和按钮,当您选项卡,它们与键盘。

在设计中刚性地像素精度定义,当浏览器不当变化的时候,轮廓显示元素的大小,页面可以打破(某些罕见的情况下,即使CSS规范指出轮廓应该没有空间)。在其他情况下,设计师的事实恼火,当用户激活一个链接,然后返回到原来的页面的焦点指示灯仍然可见。其结果是,开发人员也越来越多去除他们的页面元素的轮廓行为。通过这样做,他们可以把它几乎是不可能的视力正常的键盘用户有效浏览网页。

例如,尝试导航cnn.com在Firefox,而只使用你的键盘。没有视觉指示,因为大纲和文本修饰的链接已被删除该链接的当前具有键盘焦点。结果 -总键盘交通不便。我开始在网络上非常有规律,即使大多数浏览器现在可以正确地执行CSS轮廓看到这一点。

在很多CSS文件重置为0,如:这样做的患病率增加列入大纲Eric Meyer的CSS重置。它适用大纲:0,将所有的页面元素。虽然他清楚地表明,聚焦的风格应该是重新实现的,...

/ *记得定义重点风格!* /
:重点{
概要:0;
}

...大纲列入:默认码0不提供任何有用的东西。这一建议几乎始终是误解或作为是,使用该代码的许多站点证明忽略。简单地改变焦点代码大纲:1px的会导致更好的接入和理解。

如果链接的图像已经提供聚焦的视觉指示(带有CSS或脚本图像替换),可以不需要焦点指示符。有时一个链接的元素包含位于离屏,从而导致过大的焦点指示符的内容。您也可以提供使用任意数量的样式(更改背景,添加边框等)代替或补充大纲财产聚焦指示。该WebAIM网站下划线,改变对重点环节的背景颜色,除了保持默认的轮廓。

在大多数情况下,特别是对于文本链接,它是重要的视觉焦点指示来提供。使用大纲:0或轮廓:不建议没有。在几乎所有情况下,这个CSS可以与该网站的布局和功能完全没有影响的链接被删除,但无障碍增加的结果。

评论

  1. 莱纳

    虚线不能被大多数视障人士可以看出。在有些背景我也看不到他们(我40+)。通常情况下,虚线包围面积较大,则链接的宽度,特别是在浮动的链接列表项。

    更好的方式则此点线定义的链接悬停和重点国家CSS用下划线和/或改变任何节目的明确变化的链路状态的颜色/对比度或。

  2. 你应该有它使它更容易为那些没有指点设备的原因很简单,说上一台笔记本电脑。伟大的提示。

  3. BEF

    RE:赖。一些现代浏览器允许用户样式表。如果你不能看到轮廓,我建议使用一个用户样式表,使之更加明显。

    这是好消息 - 使用reset.css时,我没有注意到这一点。

  4. originalgeek

    好吧,我有点迟到了,但我的$ .02是,有时故意设计的是,有在屏幕上没有视觉垃圾。海事组织,W3C未能通过限制我们的轮廓值属性的选择。如果他们希望设计师能够停止这样做,那么URL()值添加到这个属性,甚至允许指针的功能,使设计人员表明他们选择的任何方式选择状态。它看起来真的很愚蠢,当你有一个三角形(例如,“上一页/下一页”箭头),浏览器会抛出一个矩形周围。在其他情况下,像在那里你有一系列的标签,但一些残疾人,轮廓可以呆在那里创建状态的混乱指示当禁用选项卡上的用户点击。

  5. 古尔旺

    与Mark Pilgrim写Greasemonkey的脚本与CSS代码,这使得集中很容易被发现。它也可以在Firefox用户使用的样式表。

    http://diveintomark.org/archives/2006/04/25/new-focus-indicator

  6. 蒂埃里Koblentz

    我一直在尝试最近被保持默认:重点造型和使用:


    :活性{
    概要:0;
    }

    鼠标的用户没有得到轮廓,但键盘的用户这样做。

  7. 蒂埃里Koblentz

    :悬停,一个:活性{轮廓:无;}是更好

    HTML:悬停{纲要:无;}杀死大纲无论身在何处鼠标相对于链接一旦被点击,但鼠标的用户谁也通过键盘导航可能会混淆

  8. 哈拉尔

    有时我使用背景颜色来指示聚焦元素,如果我真的需要删除的轮廓。

  9. 贾里德·史密斯

    Harald-

    请注意单靠背景色是不够的链接的图像(不能呈现背景)。它也不会工作,如果用户覆盖页面颜色,所有有视觉障碍的用户相当普遍。这就是为什么WCAG 2.0需要一个非颜色代号 - 通常引进下划线 - 对非下划线的链接对焦和悬停状态。

  10. 马里亚诺

    正是我一直在寻找。为什么不使用它,因为我在一个。体{}例如。

  11. Jafooooli

    你好

    我只是读你的页面,你指的cnn.com和你不能使用键盘即可完成导航。你现在可以导航使用Tab键和链接会出现在你的浏览器下部的名字,他们可能已经更新了他们的网站。如果你打回到它把你的页面。

  12. 贾里德·史密斯

    Jafooooli-

    这是假设你的浏览器中显示该信息,并且用户可以来回扫描的页面和状态栏之间以及用户不使用放大,可能使这个非常困难的。问题的关键是,直接在重点指标在对焦链接位置允许,而不是强迫用户参考在状态栏中的链接的URL(通常不是非常有用)提供更好的辅助功能。

    CNN.com仍然不提供此功能。

  13. 迈克·吉福德

    我知道绝对有问题的轮廓:正在使用不当和无http://outlinenone.com确实链接到一些问题的一个好工作。

    我认为,虽然,如果你提供足够的视觉线索的键盘只有用户能够轻松地找到自己一个并不总是依赖于浏览器最好地实现它。

  14. 戈登中号

    重点应该是用户代理的责任,而不是网页创作者。当你有ARIA和先进的JavaScript实现所描述的角色RIA大纲没有,才应使用。