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

这篇文章提供了十条有关于提高网页可访问性的指导原则,这些原则将保证提高你网站的可访问性。

引用万维网(W3C)的创始人@Tim Berners-Lee一句话来说网络的力量是它的普遍性。作为靠制作网站谋生的人,我们有责任确保每个人都能更好接触到他们。网页可访问性似乎是一项艰巨的任务,但它确实比听起来要容易很多。

这十条网页可访问性准则旨在确保所有网站都是通用的。

这不仅能帮助屏幕阅读器用户,而且还能改善浏览体验,以减缓连接速度。我们已经按照实施时间对我们的指导方针进行了排序,让您清楚地了解在这个过程中需要付出多大的努力。在你不知所措之前,请相信我的话,这是值得的。

什么是网页可访问性?

根据W3C的说法,Web可访问性意味着每个人都可以感知、理解、导航、与Web交互,并为Web做出贡献。在这方面,网站的可访问性包括所有影响网站访问的条件,包括视觉、听觉、物理、语言、认知和神经功能障碍。

你会在网上找到很多关于这个话题的内容,如果这个话题让你感兴趣的话,你应该更深入地了解网站可访问性倡议WAI)。

考虑到这一点,以下是我们提出的十条提高网站可访问性的建议。

不要依靠颜色

颜色是一种强大的工具,我们经常用来表达情感和在网上交流信息。然而,我们不应该把所有的信息都用颜色来传达,用来表达我们的用户的意思和信息。

为什么?

例如,人们普遍认为绿色意味着是正确,红色意味着错误,但是当我们把它作为我们唯一的沟通方式时,会发生什么呢?

web-accessibility-color-blindness-1

色盲是最常见的视力缺陷之一。全球人口总数大约有

4.5%

的人有这方面的缺陷(这个用户量已经超过了IE11用户数量)。

如果我们用户界面中显示的重要信息只使用颜色来传达,那么也意味着全球将有4.5%的人受影响。

颜色应该只是错误或确认信息的补充,但不能成为我们使用的唯一工具。为了确保我们的重要信息能够触达到所有的用户,我们应该要在表单中添加标签或图标来填充正确的信息。

web-accessibility-color-blindness-2

Caniuse.com提供了一个非常有趣的解决方案,它提供了一个替代颜色调色板的兼容列表:

web-accessibility-caniuse-1

在设计时检查颜色的识别力和对比是比较理想的,所以要确保你和你的设计团队有正确的工具。我们强烈推荐使用Sketch的Stark插件,可以帮助你设计可访问性!

不要阻止放大

在响应式设计的时代,我们可能犯了一些不负责任的错误。

其中

maximun-scale=1.0

就是幽灵之一,它让移动设备的网页无法放大。

在欧洲和亚洲,散光影响着30%~60%的成年人,但模糊的视觉会影响到所有年龄和民族的人。

放大的能力不仅仅是一个WCAG指导方针,而是日常生活中一个简化的工具。所以下次你在建立一个响应式网站的时候,要考虑到视力模糊的人群,比如我们的妈妈。

除了让用户可以自由地在移动设备上缩放之外,还要记得检查PC端浏览器上高达200%的放大特性。

重新重视

alt

属性

不管你制作网站多久,你可能会惊讶地知道下面这些关于

alt

属性的建议:

  • alt

    属性是

    img

    元素的一个强制性属性,但是

    alt

    的属性值是空的话完全有效。如果图像是装饰的或者没有必要的阐述页面的内容,那么你可以简单地使用

    alt=""
  • 屏幕阅读器会告诉用户
    img

    是一个图像,其中

    alt

    的值告诉用户这个图片表达的内容

  • 图像的功能和它的含义一样的重要,如果你的网站Logo链接到你的网站的主页,那么img
     

    alt

    的属性值应该是“首页”,而不是“Logo”

  • 图像替换文本不仅仅是关于可访问性的。有时候,对于网络慢的用户为了提高浏览器的检验(更快)会禁用网页的图像。对于这些用户群体,你就需要记得给img
     

    alt

    属性添加对应的属性值

但不是所有的图片都是使用

img

元素,对吧?你可能会用一个两个SVG或者一套SVG图标。

我们如何让每个人都能访问SVG?幸运的是,SVG(Scalable Vector Graphics)标准已经覆盖面已经很广!为了描述我们的SVG,我们可以使用

 

 

元素来进行简述和详细的描述。

给视频添加标题和子标题

这可能是WCAG最麻烦的原则之一,这不是因为技术上的困难,而是因为它可能是费时的。不过有一些方法可以做到这一点:

  • 让我们以YouTube为例。一旦你在这个平台上上传了一个视频,你就可以启用关闭标题。这些都是自动生成的,可能在某些情况下是不准确的,这取决于语言、背景噪音或说话人的口音。不过,这些都很容易实现,而且在大多数讲英语的视频中都能很好的工作
  • 如果我们很难看到百分百准确的标题,很难相信YouTube会有好的复制,所以我们必须自己写标题,或者雇佣第三方人员来做。如果我们不用任何字幕软件,或者我们希望我们的社区帮助我们翻译内容,YouTube将采用最常的副标题格式(
    .srt

    .sub

    .sbv

    )以及让我们在平台上写副标题。而不让管理员访问我们的账号,这将是非常方便的

web-accessibility-translating-subtitles-youtube-tool-1

  • 也许你不想把YouTube当作你的主机平台。也许您希望在你的服务器上使用一个HTML5视频。HTML5有一个
     

    标签,可以使用它方便让你添加你喜欢的标题和字幕软件,你可以使用你喜欢的WebVTT(翻译FTW)


语义等于可访问性

font

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

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

web-accessibility-first-website

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

不一定。当您有意识地在<p>

<span>

选择中使用了

<h1>

标签时,这也意味着你也故意更改元素的含义,提供了层次结构,同时也构建页面信息的树形结构。

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

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

 
h1

到全新main的

 

标签。

使用正确的标记

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

Time vs. Datetime

time

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

datetime

是一个可选属性,可以帮助表示time

 

的内容。让我们看看一些例子:

 

del

ins

Web不断变化,但没有必要让这些变化被忽视。我们可以将

ins

del

这样的HTML标签与

datetime

属性结合在一起使用。

ins

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

del

元素表示删除一个内容:

button

vs. <a>

 

对于

button

和<a>

 

标签,我们什么时候使用更合适呢?

我们一起来看看。

&lt;a&gt;

元素的意思是链接一个文件或打开一个新标签或当前的链接。然而,每当我们希望触发一个Hamburger菜单或图片画廊之类的动作时,这个标签就有点不理想。

button

元素对于这些情况就更为比较适合,而且通常可以用JavaScript实现。

此外,

button

标签很容易与

input type="button"

混淆,但他们的区别在于前者能够获取更多的内容(文、图像加文或仅图像)。

当使用

button

标签时,有两件事情需要考虑:

首先,如果

button

的内容不够明确(例如,在关闭按钮中使用

X

),我们必须添加一个

aria-label

属性来帮助解释其功能。

其次,如果添加

href

属性是意义的(比如搜索组件或lightbox gallery),那么我们不仿使用一个

a

标签和使用JavaScript来覆盖链接行为。如果没有启用JavaScript,使用带有

href

标记的图像库将优雅地降级。

必要时使用

role

为了告诉屏幕阅读器用户,我们的链接触发了一个动作,实际上它不是一个普通的<a>

 

标签,使用

 

标签时,我们必须给他添加一个

role

属性。

但是要小心。

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

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

记住,除非你打破规则,否则通常不需要aria role规则,比如上面的示例。HTML语义元素已经应用了默认的

role

,比如

nav

标记表示的是导航,

 

标签表示的是链接等等。这意味着当我们希望更改这些默认值时,

role

属性只是必需的。

隐藏元素

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

方法 行为 屏幕阅读器行为 兼容性
CSS:

visibility:hidden;
从视觉中隐藏元素,但其原始空间仍然被占用(很像

opacity:0

不可读 到处可用(兼容性好)
CSS:

display:none;
从视觉中隐藏元素,它的原始空间丢失,下一个元素将取代它的位置 不可读 到处可用(兼容性好)
HTML5:

hidden

属性

类似于

display: none;
不可读 IE11+
aria-hidden = "true"
内容会显示在浏览器中,但通过技术不会传递给用户 不可读 IE11+
CSS:

.visuallyHidden

从视觉中隐藏元素,并从工作流中删除它 可读 到处可用(兼容性好)

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

这在表单的

label

或Skip-to-content链接中非常有用。

visuallyHidden

类是一个CSS代码,它什么你收藏,因为每个项目都容易用到它。是的,如果你愿意,你可以改名字(我的建议是

.pottersCloak

)。

遵循Web可访问性标准

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

本文前面的所有要点都是

button

是如何工作的?我们应该什么时候使用它?

display:none

hidden

属性的区别是什么?

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

Audit and review

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

Aerolab的可访问性经验

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

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

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

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

web-accessibility-xapo-network-landing-page

总结

网站可访问性并不是那么容易就能实现,但如果你能把它变成你日常工作的一部分(而不是最后才来检查),随着时间的推移,它的实现和测试就会变得很容易。

当有疑问时,不要害怕询问其他的开发人员或者做一些这方面的研究。我最喜欢从这些渠道获取一些有用的信息:

另外,如果你有更多更好的资源,请在下面的评论中告诉我们。

320 Replies to “提高网页可访问性的十条建议”

  1. Lee and Larгy loved their sixth Ьirthday party. Though they were twins, Ꮇommy and Daɗdy always made certaіn they each had a particular time.

    Αnd with ther biгthdaүs coming inn December,Mommy and Daddy alsо always made positive tһeir birthdays
    hafe been particulɑr although Christmas was propeг across
    the corner. The get together was so fun with a clown and caqke and
    ѕongѕ andd wonderful presents from their рals аnd grandparents and uncle and aunts.
    It glided by soⲟ fast bᥙt earlier than they knew it,
    everyone had gone гesіdence and it wɑs tіme to scrսb
    up and prepaгe fοr bed.

  2. I have noticed that your page needs some fresh
    posts. Writing manually takes a lot of time,
    but there is tool for this time consuming task, search
    for: Wrastain’s tools for content

  3. I was more than happy to find this page. I want to to thank you for your time for this particularly wonderful read!! I definitely enjoyed every bit of it and i also have you book-marked to look at new stuff on your blog.
    curry 2

  4. I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an edginess over that you wish be delivering the following. unwell unquestionably come further formerly again as exactly the same nearly a lot often inside case you shield this increase.
    nmd human race

  5. Thank you for any other informative blog. Where else may just I am getting that type of information written in such an ideal way? I have a project that I am just now working on, and I’ve been on the look out for such information.
    ultra boost

  6. Just wish to say your article is as amazing. The clearness in your post is simply excellent and i could think you’re an expert on this subject. Fine with your permission let me to snatch your feed to stay up to date with drawing close post. Thank you a million and please keep up the gratifying work.
    yeezy boost 350

  7. I simply desired to appreciate you again. I’m not certain what I would have used without these recommendations discussed by you about that field. Previously it was a traumatic dilemma in my opinion, however , taking a look at your specialized fashion you handled the issue took me to weep with joy. Extremely happier for your support and even hope that you are aware of a great job that you are accomplishing teaching others with the aid of your webblog. I know that you’ve never come across all of us.
    adidas eqt

  8. I am also writing to make you know of the magnificent discovery my cousin’s princess had browsing the blog. She figured out some things, most notably how it is like to have a marvelous giving heart to let other folks with ease learn several multifaceted issues. You truly surpassed my expected results. Many thanks for displaying such priceless, healthy, revealing and as well as unique guidance on your topic to Lizeth.
    adidas nmd

  9. I wish to point out my passion for your kindness in support of folks who need help with this one subject. Your real commitment to getting the solution all through appeared to be incredibly beneficial and have all the time helped somebody just like me to attain their endeavors. Your own important tutorial means a lot to me and somewhat more to my office colleagues. Regards; from everyone of us.
    skechers shoes

  10. Thanks for helping me to attain new ideas about computers. I also have the belief that one of the best ways to help keep your laptop computer in perfect condition is by using a hard plastic-type case, as well as shell, that suits over the top of your computer. A majority of these protective gear will be model specific since they are made to fit perfectly across the natural casing. You can buy them directly from the seller, or via third party places if they are for your notebook computer, however don’t assume all laptop will have a spend on the market. Once again, thanks for your suggestions.
    yeezy boost 350

  11. The graphics on their site will look professional and top quality, and will load rapidly. That is why getting the best brains here is important.Now though being interested in sports nutrition does not automatically mean that the person concerned has to participate in sports.The incorporation of nutrition programs in several fitness centers and sports facilities also support the worldwide concern for sports nutrition. This is helpful as the pallet will have to be drained in order to secure a clean out when and if it becomes needed.

  12. Rezeptfrei osterreich, ist ein generika und bestellen legal, au?er per nachnahme, in welchen landern kann man rezeptfrei kaufen. Kann man gunstig kaufen auch original oder generika, gunstig kaufen per paypal und kostenlos auf rezept trotz bestellen.
    ultra boost 3.0

  13. Thanks for sharing these wonderful blogposts. In addition, the best travel and also medical insurance program can often eliminate those worries that come with visiting abroad. Some sort of medical crisis can shortly become very costly and that’s likely to quickly place a financial impediment on the family finances. Having in place the excellent travel insurance program prior to leaving is well worth the time and effort. Thanks a lot
    skechers shoes

  14. I would love to add when you do not actually have an insurance policy or you do not take part in any group insurance, you might well benefit from seeking assistance from a health broker. Self-employed or individuals with medical conditions commonly seek the help of a health insurance specialist. Thanks for your writing.
    nike air max

  15. I have witnessed that intelligent real estate agents everywhere are warming up to FSBO Promotion. They are seeing that it’s more than merely placing a sign in the front place. It’s really in relation to building connections with these traders who later will become purchasers. So, when you give your time and energy to helping these retailers go it alone – the “Law regarding Reciprocity” kicks in. Thanks for your blog post.
    puma rihanna

  16. Simply desire to say your article is as amazing. The clarity for your submit is simply nice and that i can assume you are an expert on this subject. Well together with your permission allow me to snatch your RSS feed to stay updated with approaching post. Thanks 1,000,000 and please keep up the rewarding work.
    lebron james shoes

  17. Hey there just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.
    curry 4

  18. Simply wish to say your article is as astounding. The clarity on your submit is just cool and that i could assume you’re an expert in this subject. Well together with your permission let me to grasp your feed to stay up to date with coming near near post. Thank you one million and please keep up the gratifying work.
    yeezy boost 350

  19. I am not sure the place you are getting your info, but good topic. I must spend some time finding out more or figuring out more. Thanks for fantastic information I used to be looking for this info for my mission.
    adidas eqt

  20. Thanks for expressing your ideas listed here. The other factor is that any time a problem appears with a laptop motherboard, folks should not have some risk regarding repairing that themselves for if it is not done properly it can lead to permanent damage to the whole laptop. It will always be safe to approach your dealer of that laptop for that repair of motherboard. They’ve already technicians who may have an expertise in dealing with laptop motherboard complications and can get the right analysis and execute repairs.
    adidas tubular shadow

  21. Thank you for sharing superb informations. Your site is so cool. I’m impressed by the details that you?|ve on this blog. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found simply the information I already searched everywhere and just could not come across. What a great web site.
    nike roshe run

  22. you’re in point of fact a excellent webmaster. The web site loading pace is incredible. It sort of feels that you’re doing any unique trick. Furthermore, The contents are masterwork. you’ve done a great task on this subject!
    mbt shoes

  23. The NBA playoffs now for today, have determined the warriors in the western conference and will compete for a spot in the finals quota, knight still don’t know who his opponent was.However, even in the face of the celtics or the wizards, presumably knight will be
    kyrie 2

  24. Yesterday, the wall on the right side 45 live a miserable life in the three points must win.The shooting location is Owen puts up the location of the many times.Today was asked Owen saw wall dead there is what feeling
    lebron 14

  25. Thanks for the points you have contributed here. One more thing I would like to convey is that laptop memory requirements generally increase along with other advancements in the know-how. For instance, if new generations of processors are made in the market, there’s usually a similar increase in the scale calls for of all personal computer memory and also hard drive room. This is because the application operated by these processors will inevitably increase in power to use the new engineering.
    adidas nmd

  26. Because Michael Owen at the side of huang zhan, so his nickname called small report.The earliest Owen left the impression of the world, is probably the flashy passing movements and dazzling breakthroughs, remember in the rookie challenge, he drew down two slipped past knight
    stephen curry shoes

  27. Owen said: “Cleveland need game.”Indeed, they rested for too long.In green, and the wizards to after the tiebreak, the beginning of the knight’s eastern conference finals first time has pushed the next Wednesday.
    kyrie 4

  28. One thing is always that one of the most common incentives for utilizing your cards is a cash-back or rebate provision. Generally, you get 1-5% back with various expenses. Depending on the card, you may get 1% returning on most purchases, and 5% back on expenditures made using convenience stores, gasoline stations, grocery stores along with ‘member merchants’.
    lebron james shoes

  29. Clean-Up (Examine as well as Eliminate none working) – removes every one of the Links (you can pick specific engine
    just) from the chosen website listings which not appear to function i.e.
    GSA SER checks them and if they do not match any engine, they will certainly be gotten rid of.

  30. I’m impressed, I must say. Actually hardly ever do I encounter a blog that’s each educative and entertaining, and let me inform you, you could have hit the nail on the head. Your idea is outstanding; the difficulty is one thing that not sufficient individuals are talking intelligently about. I am very joyful that I stumbled throughout this in my search for one thing referring to this. http://hellowh983mm.com

  31. I will right away clutch your rss feed as I can not in finding your e-mail subscription link or e-newsletter service.
    Do you have any? Please permit me realize in order that I may just
    subscribe. Thanks.

发表评论

电子邮件地址不会被公开。 必填项已用*标注