如何确保残疾人可以访问我的网站?
我如何确保(或尝试使)所有人(可能有各种残疾)都可以访问网络?
对任何标准或网站有什么建议可以为我提供一些关于网站设计的实用建议吗?
How can I ensure (or try to make) web access available for all - who may have a variety of disabiltes?
Any advice for any standards or web sites that could give me some pragmatic advice for the design of a site?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
您需要在此处解决许多注意事项,如果您的网站不适合特定的残障人士,那么您必须致力于广泛的功能。在这种情况下,您需要记住的第一件事是,遗憾的是您无法迎合所有人。查看下面的列表,确定您可以明智地照顾哪些残疾
这里最简单的是癫痫发作,消除网站中的闪烁/频闪内容,或者更重要的是,如果您无法在显示此类型之前提出警告的内容。
有运动/移动问题的用户可能在与网站上需要高精度的内容交互时遇到问题,这可以通过增加 UI 元素的大小或允许用户调整这些元素的大小来帮助解决元素(如果需要)。
通常,将任何可点击的内容设置得尽可能大,如果您的元素具有拖放等功能,请将拖动手柄设置得较大,这样用户就不必单击很小的区域。
听觉也是一个相当容易考虑的问题,至少简单地为您的网站可能拥有的任何媒体内容提供文本替代品,对于使用视频的大型网站,可以选择手语等考虑因素。
视觉可能是网络开发人员需要考虑的最常见的因素。首先,弱视用户可能希望增加页面的文本大小,因此请确保您的 UI 可以应对这一点。使用清晰易读的字体,并确保背景颜色和字体颜色之间存在对比度。
色盲用户可能希望更改您的网站配色方案以满足他们的需求,您可以轻松找到有关色盲类型的信息,并开发一些替代 CSS 样式来满足这些需求。此外,网站上所有内容的高对比度选项可能有利于弱视用户。
认知/智力是较难满足的考虑因素之一,因此请考虑个人残疾情况。例如,ADD 让人很难集中注意力,很容易分心,考虑到广告,它们的目的是分散我们的注意力并吸引我们的注意力,因此通过限制网站上的广告,您可以摆脱那些闪烁的广告并尖叫“点击我!”。
诵读困难用户可能会难以阅读大段文本,这也符合弱视人士的考虑,在这里您可以有一个音频选项,以便向用户大声朗读文本。
这里还要考虑的一个因素是网站中颜色的使用。事实证明,某些颜色可以刺激情绪,对于有情绪或发育问题的人来说,使用被认为是平静的颜色而不是令人兴奋的颜色(例如红色)可能会改善他们对您网站的体验。
以上所有都是设计考虑因素,接下来看看开发(代码),您无能为力,大多数关于代码的考虑因素都是因为第三方应用程序与您的站点交互。
一般来说,确保您的代码格式正确、标签/结束标签正确等。确保它是有效的 HTML/XHTML/CSS 等,如果您可以按照严格的标准进行验证,那么它不会损害您的事业。诸如链接/图像之类的标签应该有适当的 Alt 文本来描述元素是什么,例如 alt="image1" 对于屏幕阅读器来说相当无用,但 alt="图像显示...... 单击此按钮将带您到......”很有用。
如果您可以找到一些试用软件,给自己拿一个屏幕阅读器,加载您的网站,闭上眼睛并尝试与其交互,这会很困难,但至少您可以看到用户将如何与您的网站交互,更重要的是您可以看到可以使用屏幕阅读器检查您的网站是否确实按照应有的方式阅读。
有很多第三方插件可以与您的网站集成来帮助您的用户,因此请研究一下这些插件,例如放大文本或只需单击即可大声朗读的选项,只要它们不太具有侵入性,就会受到欢迎给您的非残疾用户。
有用的链接
http://www.w3.org/TR/WCAG10/ W3C 残疾指南是一个很好的起点
http://en.wikipedia.org/wiki/Web_accessibility 维基百科网络可访问性
http://www.etre.com/tools/colourblindsimulator/ 允许您查看图像如何色盲用户会看到
http://colorfilter.wickline.org/
http://www.w3.org/WAI/ W3C 网络无障碍倡议指南
There are a number of considerations you need to address here, if your website isn't catering for a specific disability then you have to work on a broad range of features. In this situation the first thing you need to remember is that you sadly can't cater to everyone. Look at the list below and identify which of these disabilities you can sensibly cater for
The easiest here is the Seizures, eliminate flashing / strobing content from your site, or more importantly if you cant put up a warning before displaying this type of content.
Users with Motor / Mobility issues may have problems interacting with content on your site that requires a high amount of precision, this can be helped by increasing the size of your UI elements, or allowing the user to resize these elements if needed.
Generally make anything clickable as large as is feasible and if you have elements that have features such as drag drop, make the drag handles large so the user doesn't have to click a tiny area.
Auditory is also a fairly easy consideration to make, at the least simply provide text alternatives to any media content your site may have, for larger sites using video then considerations such as sign language may be an option.
Visual is probably the most common consideration web developers need to make. Firstly partially sighted users may want to increase the text size to your page, so make sure that your UI can cope with this. Use clear and readable fonts and make sure there is contrast between the background color and the font color.
Color blind users may wish to change your site color scheme to meet their needs, you can find information easily on the types of color blindness and develop a couple of alternative CSS styles to meet these needs. Also a high contrast option for everything on your site may benefit partially sighted users.
Cognitive / Intellectual is one of the harder considerations to meet, so look at the individual disabilities. ADD for instance makes it hard for a person to focus and makes them easily distracted, considering this think about advertisements, they are designed to distract us and draw our attention, thus by limiting advertisements on your site you can get rid of the ones that flash and scream Click ME!.
Dyslexic users may struggle with reading huge chunks of text which also fits in with considerations for partially sighted people, here you could have an audio option so the text is read aloud to the user.
One more consideration here is the use of color in your website. It has been proven that certain colors can stimulate emotions, for someone with emotional or developmental issues using colors that are considered calming vs ones that excite (reds for example) may improve their experience of your website.
All of the above are design considerations, looking at the development (Code) next there isn't too much you can do, most of the considerations about your code are because of third party applications interacting with your site.
Generally make sure your code is well formed, correct tags / closing tags etc. Make sure it is valid HTML / XHTML / CSS etc if you can validate to the strict standards it wont hurt your cause. Tags such as links / images should have appropriate Alt text to describe what the element is, for instance alt="image1" is fairly useless to a screen reader but alt="Image showing ...... clicking this will take you to....." is useful.
If you can find some trial software grab yourself a screen reader, load up your website, close your eyes and try interact with it, its going to be hard but at least you can see how your user will interact with your site and more importantly you can use the screen reader to check your site actually gets read the way it should.
There are plenty of 3rd party plugins you can integrate with your site to aid your users too, so look into those, things like the option to magnify text or read aloud with just a click will be well received as long as they are not too intrusive to your non disabled users.
Helpful links
http://www.w3.org/TR/WCAG10/ The W3C Disability guidelines are a good place to start
http://en.wikipedia.org/wiki/Web_accessibility Wikipedia web accessability
http://www.etre.com/tools/colourblindsimulator/ Allows you to see how images will appear to colourblind users
http://colorfilter.wickline.org/
http://www.w3.org/WAI/ W3C Web Accessability Initiative Guidelines
第 508 条是法律中要求美国政府网站可访问的部分。
更多信息请参见此处,包括让所有人都能访问内容的最佳实践。
http://www.section508.gov/
一般来说,您应该使用语义标记来支持屏幕阅读器,并避免华而不实内容和音频——这些通常是不可能或很难访问的。
您还应该查看网页排版指南并寻找优秀的设计师。糟糕的配色方案、字体和字体大小使得在网络上阅读变得比实际需要的困难得多。
Section 508 is the section of the law that requires that US government websites be accessible.
More information is here, including best practices on making content accessible to all.
http://www.section508.gov/
Generally you should support screen readers by using semantic markup, and avoid flashy content and audio -- these are usually impossible or just difficult to make accessible.
You should also look at web typography guidelines and look to hiring a good designer. Poor color schemes, typefaces, and font sizes make reading on the web much harder than it needs to be.
如果您来自英国,从法律角度来看,您希望查看平等法(取代了《残疾歧视法》)。
Web 可访问性的基础是基于优雅降级/渐进增强模型(听起来比实际更复杂!)。 A List Apart 不久前写了一篇很棒的文章。
对于网络专业人士来说,一个很好的起点是RNIB 的网络访问中心。显然,这主要针对那些有视觉障碍的用户,但它是一个非常有用的资源。
Web AIM 也是一个很好的资源/文章网站,尽管我不确定它现在的维护频率(不过,那里的信息是相关的) )。
在开发可访问的界面时,有太多的个人小事情需要记住,但是如果您花时间阅读这些网站上的一些文章,您将掌握基础知识,然后引导您了解更多细节 -坚韧不拔的东西。
无障碍开发不仅需要了解具体细节,还需要改变思维方式。你需要不断地问自己“其他人会如何使用这个?他们的方式可能会遇到什么障碍?他们使用什么浏览器?如果没有颜色/JavaScript/CSS,这个可以工作吗?”。了解如何拆分您的网站并查看其是否仍然有效。
If you're from the UK, from a legal POV you want to be looking at the Equality Act (which replaced the Disability Discrimination Act).
The foundation of web accessibility is based on the graceful degradation/progessive enhancement model (sounds more complicated than it is!). A List Apart wrote a great article on it some time ago.
A good starting point for web professionals is the RNIB's Web Access Centre. Obviously this mainly deals with those user who experience visual disability, but it's a very useful resource.
Web AIM is also a good site for resources/articles although I'm not sure how often it's maintained these days (still, the information there is relevant).
There are far too many individual little things to bear in mind when developing accessible interfaces, but if you take the time to read some of the articles on those sites, you'll pick up the fundamentals which will then lead you onto the more nitty-gritty things.
Accessible development is about a change in mindset as much as learning the nuts and bolts. You need to to be constantly asking yourself "How might other people use this? What barriers might be in their way? What browser are they using? Does this work without colour/JavaScript/CSS?". Learn how to take your site apart and see if it still works.
网页内容无障碍指南 2.0 (WCAG 2.0) 是网页无障碍倡议 (W3C/WAI) 的 W3C 建议。
可以在此处找到概述:http://www.w3.org/WAI/intro/wcag20< /a>
有非常广泛的原则和精确的技术(针对 HTML、CSS、JS、Flash 等)以及每个标准的意图。这些不是立即阅读的文档,您需要从网上找到的教程和文章(存档位于 456 Berea Street,WebAIM,有关的视频可访问性)
Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is the W3C Recommendation from Web Accessibility Initiative (W3C/WAI).
An overview can be found here: http://www.w3.org/WAI/intro/wcag20
There are very broad Principles as well as precise Techniques (for HTML, CSS, JS, Flash, etc) and the intent of each and every criteria. These aren't documents meant to be read at once and you'll want to learn more from tutorials and articles found on the web (archives at 456 Berea Street, WebAIM, videos about accessibility)
W3C WCAG 2 快速参考指南列出了您需要的所有相关技术实施 Felipe 提到的 WCAG2 原则和指南,并在各个技术页面上提供适当的代码示例。如果这对您来说技术性太强,WebAIM 的检查表 也是一样的,只不过是简单的英语。
不幸的是,没有什么灵丹妙药可以让网站合规。您必须仔细检查每一部分内容并进行测试,并在必要时进行修改。幸运的是,即使是一些小的改进也能带来很大的改变。
The W3C Quick Reference guide to WCAG 2 lists all of the relevant techniques you'll need to implement the WCAG2 principles and guidelines that Felipe mentioned, with code examples if appropriate on the individual technique pages. If it's all a bit too technical for you, WebAIM's checklist is the same thing only in plain English.
Unfortunately there's no magic wand for getting sites to be compliant. You have to go through each bit of content and test it and modify it if necessary. Luckily, even some small improvements can make a big difference.
很多好的答案,但我也忍不住添加我的意见。
如果您想确保网站适合禁用,则需要考虑许多因素。我在这里没有看到的一个(可能是因为我浏览过)是确保使用高对比度的颜色,并在文本后面有纯色背景。
但是,您不应该在黑色上使用白色或在黑色上使用白色……阅读障碍者通常看不到这些颜色。使用灰白色作为背景或文本。
另外,请确保您的文字很大。确保尽可能多的内容是标准文本,以便文本转语音程序可以“阅读”网站。文本转语音无法读取图像。出于同样的原因,也建议使用文本链接而不是按钮(尽管在这些情况下可能有一种将文本与按钮关联起来的方法......?)
A lot of good answers, but I can't help adding my input as well.
If you want to ensure a website is disabled friendly, there are a number of considerations that should be taken. One that I have not seen on here (perhaps because I skimmed) is to ensure that you use high-contrast colors, with a solid background behind text.
However, you should NOT use white on black or white on black...dyslexics commonly cannot see those colors. Use an off-white for background or text.
Also, make sure your text is large. Ensure as much of the content as possible is standard text, so that text-to-speech programs can "read" the website. Text-to-speech cannot read images. Text links instead of buttons would also be advisable, for the same reasons (though there may be a means of associating text with a button for these scenarios...?)