扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >提高网页可访问性的十条建议(二)

提高网页可访问性的十条建议(二)

希尔瓦娜斯发布于 2017-09-25 10:06查看:10215回复:1

     语义等于可访问性

    font标签,还记得吗?我希望你不记得,那些是“古时代”的产物了。

        尽管我们有着共同的信念,但语义并不是与生俱来的。自从第一个HTML页面诞生以来,他们一直与我们在一起,自那时候已经有了很大的进步。有了HTML5标准之后,新的语义标签就被引入到我们的日常使用当中。

1506304140275326.png

        那么,语义不是仅仅为了SEO吗?

    不一定。当您有意识地在<p><span>选择中使用了<h1>标签时,这也意味着你也故意更改元素的含义,提供了层次结构,同时也构建页面信息的树形结构。

        屏幕阅读器并没有忘记这一点。事实上,语义化是它最有用的武器之一

        请记住,拥有强大的能力会带来很大的责任,所以一定要为每个元素使用合适的语义标签,从h1到全新main的标签。

     使用正确的标记

        作为一个后续的观点,我想讨论一些不友好和有争议的地方。

     Time vs. Datetime

    time元素显示了日期格式、时区的很多类型和使用ISO 8601标准来表示日期和时间的时间。

    datetime是一个可选属性,可以帮助表示time的内容。让我们看看一些例子:

image.png

    del 和 ins

        Web不断变化,但没有必要让这些变化被忽视。我们可以将insdel这样的HTML标签与datetime属性结合在一起使用。

    ins元素表示添加了一个文档:

image.png

    button vs. <a>

        对于button和<a>标签,我们什么时候使用更合适呢?

        我们一起来看看。

    <a>元素的意思是链接一个文件或打开一个新标签或当前的链接。然而,每当我们希望触发一个Hamburger菜单或图片画廊之类的动作时,这个标签就有点不理想。button元素对于这些情况就更为比较适合,而且通常可以用JavaScript实现。

        此外,button标签很容易与input type="button"混淆,但他们的区别在于前者能够获取更多的内容(文、图像加文或仅图像)。

        当使用button标签时,有两件事情需要考虑:

        首先,如果button的内容不够明确(例如,在关闭按钮中使用X),我们必须添加一个aria-label属性来帮助解释其功能。

image.png

        其次,如果添加href属性是意义的(比如搜索组件或lightbox gallery),那么我们不仿使用一个a标签和使用JavaScript来覆盖链接行为。如果没有启用JavaScript,使用带有href标记的图像库将优雅地降级。

    必要时使用role

        为了告诉屏幕阅读器用户,我们的链接触发了一个动作,实际上它不是一个普通的<a>标签,使用标签时,我们必须给他添加一个role属性。

        但是要小心。

        当你编写你的JavaScript时,你不仅需要在点击时调用你的函数,还需要在用户按下空格键时调用你的函数。这是必要的,因为用于按钮的行为不同于用于链接的行为,用户应该能够触发这些命令中的任何一个操作。

image.png

        有关于这方面更多的信息可以在MDN上了解。

        记住,除非你打破规则,否则通常不需要aria role规则,比如上面的示例。HTML语义元素已经应用了默认的role,比如nav标记表示的是导航,标签表示的是链接等等。这意味着当我们希望更改这些默认值时,role属性只是必需的。

     隐藏元素

        使用HTML和CSS有一些方法可以隐藏东西。下面的列表将帮助你找到每一种情况的最佳选择:

image.png

        如果你想隐藏元素,但仍然让屏幕阅读器可以知道它们,那么最后一个选项是最好的选择。

        这在表单的label或Skip-to-content链接中非常有用。visuallyHidden类是一个CSS代码,它什么你收藏,因为每个项目都容易用到它。是的,如果你愿意,你可以改名字(我的建议是.pottersCloak)。

image.png

     遵循Web可访问性标准

        Web可访问性标准和指南在这里可以给我们提供很强的帮助。

        本文前面的所有要点都是button是如何工作的?我们应该什么时候使用它?display:nonehidden属性的区别是什么?

        首先,它可能是非常枯燥的,但W3C标准和WCAG指南非常有用,它们还有非常强的意义。去吧,在他们当中提供了很多可用的信息。我向你保证,你将发现你从未接触的代码和实践!

     Audit and review

        一旦你应用到了所有这方面的知识,那就到了测试它的时候了。以下提供了一些工具测试你的网站可访问性:

        ChromeVox

        Accessibility Developer Tools for Chrome

        Color Filter

        W3C Validator

        A11Y Compliance Platform

        WAVE

    Aerolab的可访问性经验

        我们试着养成经常测试的工作习惯。我们的下一个产品应该总是比上一个更好。虽然我们有时候会犯错,但我们会不断地去改进,更不用说从每个挑战中学习一些东西了。

        我们希望我们的产品能为用户提供最好的体验,这就是为什么我们逐渐开始将可访问性标准添加到我们的工作流程中。

        我们还有很长的路要走,还有些要改进的空间,但我们很高兴选择了这条路。

        我们为Xapo所做的登录页面就是我们如何给网站添加可访问性标准的一个例子,你可以从这个例子中查到这方面的使用代码:

1506305086736351.png


收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: