如果我想让我的网站跨平台兼容和屏幕阅读器兼容,我应该避免使用 javascript 、 jquery 、 flash 、 ajax 、 silverlight 吗?
如果我想让我的网站跨平台兼容(PC、iPHONE、其他手机、PDA)和 Accessible(兼容屏幕阅读器),我是否应该避免使用 JavaScript、jQuery、flash、Ajax、Silverlight?
我应该只使用 xhtml css 和服务器端语言以获得更广泛的可访问性吗?
对于 PC 和 MAC,我首先为 Firefox 做了一切,那么对于移动设备我应该选择哪个浏览器?
Should I avoid JavaScript , jQuery, flash, Ajax, Silverlight if i want to make my site cross platform compatible (PC, iPHONE other mobiles, PDA) and Accessible(screen reader compatible)?
Should i only use xhtml css with server side language for wider accessibility?
and for PC pr MAC i made everything first for Firefox so for mobile which browser should i choose?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(8)
不,但可以将它们作为渐进增强或提供优雅的降级。
No, but offer them as progressive enhancements or provide graceful degradation.
您可以使用这些技术,但您需要对此保持聪明,并且不能简单地概括任何给定技术沙袋的可访问性。
如果您正在开发网站,您需要的第一个工具是 Firefox 开发人员工具栏插件。在“工具”菜单中,有一个名为“验证第 508 节”的选项(这是一组可访问性指南)。这是一种快速但肮脏的方法,可以获取网站上与可访问性相关的“损坏的内容”的详细清单。
除此之外,网络上还有大量资源,提供有关如何设计可访问性的具体建议。它本身几乎就是一个完全强大的子学科。其中大部分与提供格式良好的 HTML 有关。 (图像的适当且有用的替代文本,使用提供足够对比度的颜色进行设计,适应色盲,使用表格描述,使网站可以通过键盘(无鼠标)导航,对表单字段进行正确的描述等)
现在;从知识的火焰中深深地喝下去。 。 。 。
以下是资源列表:
实施联邦无障碍
Web 标准 (1194.22)
(a) 应提供每个非文本元素的等效文本(例如,通过“alt”、“longdesc”或在元素内容中)。
http://www.access-board.gov/sec508/ Guide/1194.22.htm#(a)
http://www.jimthatcher.com/webcourse2 .htm
相关信息
创建无障碍图形 (WEBAIM)
http://www.webaim.org/techniques/images/
适当使用替代文本
http://www.webaim.org/techniques/alttext/
描述插图、图表、地图、表格、图表和图表
http://www.w3.org/2000/08/nba- Manual/Overview.html
关于 img 元素中替代文本的指南
http://www.cs.tut.fi/~jkorpela/html/ alt.html
D链接示例
http://www.consideration.org/technology/accessexamples/dlinksample.html
(b) 任何多媒体演示的等效替代方案应与演示同步。
http://www.access-board.gov/sec508/ Guide/1194.22.htm#(b)
http://www.jimthatcher.com/webcourse6 .htm
相关信息
Web 字幕 (WEBAIM)
http://www.webaim.org/techniques/captions/
(包括有关 Quicktime、Windows Media、RealPlayer 和 MAGpie 中字幕的教程)
字幕资源列表
http://webaim.org/resources/captioning/
喜鹊 (NCAM)
http://ncam.wgbh.org/webaccess/magpie/
同步多媒体:SMIL (W3C)
http://www.w3.org/AudioVideo/
SMIL (W3C) 的辅助功能
http://www.w3.org/TR/SMIL-access/
创建无障碍闪存 (WEBAIM)
http://www.webaim.org/techniques/flash/
Flash 辅助功能技术 (宏媒体)
http://www.adobe.com/accessibility/products/flash/
(c) 网页的设计应确保所有用颜色传达的信息在没有颜色的情况下也可用,例如来自上下文或标记的信息。
http://www.access-board.gov/sec508/ Guide/1194.22.htm#(c)
http://www.jimthatcher.com/webcourse7 .htm
相关信息
有效的色彩对比
http://www.lighthouse.org/color_contrast.htm
Vischeck
http://www.vischeck.com/vischeck/
无障碍呈现,对色盲人群友好
http://jfly.iam.u-tokyo.ac.jp/html /color_blind/
视力障碍
http://www.webaim.org/articles/visual/colorblind.php
(d) 文件的组织方式应使其可读,而不需要相关的样式表。
http://www.access-board.gov/sec508/ Guide/1194.22.htm#(d)
http://www.jimthatcher.com/webcourseb .htm
相关信息
CSS 的辅助功能 (W3C)
http://www.w3.org/TR/CSS-access
层叠样式表(万维网联盟)
http://www.w3.org/Style/CSS/
CSS 验证器 (W3C)
http://jigsaw.w3.org/css-validator/
(e) 冗余文本应为服务器端图像映射的每个活动区域提供链接。
(f) 应提供客户端图像地图而不是服务器端图像地图,除非无法用可用的几何形状定义区域。
http://www.access-board.gov/sec508/指南/1194.22.htm#(e)
http://www.access-board.gov/sec508/指南/1194.22.htm#(f)
http://www.jimthatcher.com/webcourse5.htm
(g) 数据表应标明行标题和列标题。
(h) 对于具有两个或多个逻辑级别的行或列标题的数据表,应使用标记将数据单元格和标题单元格关联起来。
http://www.access-board.gov/sec508/指南/1194.22.htm#(g)
http://www.jimthatcher.com/webcourse9.htm
相关信息
如何创建可访问的表 (WEBAIM)
http://www.webaim.org/techniques/tables/
无障碍表格生成器 (Accessify )
http://accessify.com/tools-and-wizards/accessibility -工具/表格构建器/
该工具允许您选择所需的表属性、行数和列数,并为您处理可访问性标记。
(i) 框架应使用有助于框架识别和导航的文本标题。
http://www.access-board.gov/sec508/指南/1194.22.htm#(i)
http://www.jimthatcher.com/webcourse4.htm
相关信息
如何创建可访问的框架
http://www.webaim.org/techniques/frames/
(j) 页面设计应避免导致屏幕以大于 2 Hz 且低于 55 Hz 的频率闪烁。
http://www.access-board.gov/sec508/指南/1194.22.htm#(j)
http://www.jimthatcher.com/webcourse7.htm
(k) 当以任何其他方式无法实现合规性时,应提供具有同等信息或功能的纯文本页面,以使网站符合这些标准的规定。每当主页发生变化时,纯文本页面的内容都应更新。
http://www.access-board.gov/sec508/指南/1194.22.htm#(k)
http://www.jimthatcher.com/webcourse7.htm
(l) 当页面使用脚本语言显示内容或创建界面元素时,脚本提供的信息应使用辅助技术可以阅读的功能文本进行标识。
http://www.access-board.gov/sec508/指南/1194.22.htm#(l)
http://www.jimthatcher.com/webcoursea.htm
相关信息
创建可访问的 JavaScript (WEBAIM)
http://www.webaim.org/techniques/javascript/
键盘辅助功能 (WEBAIM)
http://www.webaim.org/techniques/keyboard/
JavaScript 辅助功能问题(TRACE 中心)
http://trace.wisc.edu/world/java/jseval.htm
脚本 (IBM)
http://www-03.ibm.com/able/guidelines/网页/webscripts.html
(m) 当网页要求客户端系统上存在小程序、插件或其他应用程序来解释页面内容时,该页面必须提供符合 §1194.21(a) 规定的插件或小程序的链接通过(l)。
http://www.access-board.gov/sec508/ guide/1194.22.htm#(m)
软件应用程序和操作系统 (1194.21)
http://www.access-board.gov/sec508/guide/1194.21。 htm
相关信息:
Java Accessibility (IBM)
http://www-03.ibm.com/able/guidelines/ java/accessjava.html
Sun Microsystems 辅助功能计划
http://www.sun.com/access/index.html
(n) 当电子表格设计为在线填写时,表格应允许使用辅助技术的人员访问填写和提交表格所需的信息、字段元素和功能,包括所有指示和提示。
http://www.access-board.gov/sec508/指南/1194.22.htm#(n)
http://www.jimthatcher.com/webcourse8.htm
相关信息
如何创建无障碍表单 (WEBAIM)
http://www.webaim.org/techniques/forms/
可访问的 HTML/XHTML 表单 (Accessify.com)
http://www.accessify.com/features/tutorials/forms/
多个输入表单字段 (Accessify.com)
http://www.accessify.com/features/tutorials/multiple-inputs/< /a>
快速表单生成器 (Accessify.com)
http://www.accessify.com/tools -and-wizards/accessibility-tools/quick-form-builder/
该工具可以帮助您构建带有必要 HTML 标记的表单以实现可访问性。
(o) 应提供一种允许用户跳过重复导航链接的方法。
http://www.access-board.gov/sec508/指南/1194.22.htm#(o)
http://www.jimthatcher.com/webcourse4.htm
相关信息
跳过导航链接 (WEBAIM)
http://www.webaim.org/techniques/skipnav/
跳过导航链接 (Jim撒切尔网)
http://www.jimthatcher.com/skipnav.htm
(p) 当需要定时响应时,应提醒用户并给予用户足够的时间以指示需要更多时间。
http://www.access-board.gov/sec508/指南/1194.22.htm#(p)
http://www.jimthatcher.com/webcourse7.htm
有关制作网站和内容可访问
W3C 网络无障碍倡议资源
http://www.w3.org/WAI/Resources/
使教育软件和网站易于访问的设计指南,包括数学和科学解决方案
http://ncam.wgbh.org/cdrom/guideline/
508 Universe(包括设计无障碍网站的课程)
http://www.section508.gov/index.cfm?FuseAction=内容&ID=5
辅助工具和向导
http://www.accessify.com/tools-and-wizards/
测试无障碍网站
根据 1973 年《康复法案》第 508 条(教育部)测试网络可访问性合规性
http://www.ed.gov/policy/gen/guid/assisttesting。 html
508清单(WEBAIM)
http://www.webaim.org/standards/508/checklist
评估网站无障碍 (W3C)
http://www.w3.org/WAI/eval/
免费测试工具
波浪
http://www.wave.webaim.org/
网页辅助工具栏 (Internet Explorer)
http://www.paciellogroup.com/resources/wat-ie-about。 html
Web 开发人员工具栏 (Firefox)
http://chrispederick.com/work/web-developer/
有关教育部辅助技术计划,请访问:
http://www.ed.gov/policy/gen/guid/assistivetech。 html
本文档中引用的链接包括由其他公共和私人组织创建和维护的链接,这些链接是为了方便用户而提供的。美国教育部不控制或保证这些来源信息的准确性、相关性、及时性或完整性。此外,本文档中包含的链接并不旨在反映其重要性,也不旨在认可所表达的任何观点或提供的产品或服务,或赞助这些网站的组织。
最后更新于 2009 年 7 月 17 日
You can use these technologies, but you need to be smart about it, and you can't just generalize that any given technology sandbags accessibility.
If you're developing for a web site, #1 tool you need is the Firefox Developer Toolbar add-on. In the Tools menu, there is a selection called "Validate Section 508" (which is a set of guidelines for accessibility). This is a quick n dirty way to get a laundry list of "what's broken" on your site, pertaining to accessibility.
Beyond that, there are plenty of resources on the web with specific advice on how to design for accessibility. It's almost a fully robust sub-discipline on it's own. Most of it has to do with providing well-formed HTML. (appropriate and useful alt text for images, designing with colors that provide adequate contrast, accommodating colorblindness, use of table descriptions, make the the site navigable by keyboard (no mouse), correct descriptions on form fields, etc.)
Now; drink deeply, from the Firehose of Knowledge. . . .
Here is a list of resources:
Implementing Federal Accessibility
Web Standards (1194.22)
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
http://www.access-board.gov/sec508/guide/1194.22.htm#(a)
http://www.jimthatcher.com/webcourse2.htm
Related Information
Creating Accessible Graphics (WEBAIM)
http://www.webaim.org/techniques/images/
Appropriate Use of Alternative Text
http://www.webaim.org/techniques/alttext/
Describing Illustrations, Diagrams, Maps, Tables, Charts, and Graphs
http://www.w3.org/2000/08/nba-manual/Overview.html
Guidelines on alt texts in img elements
http://www.cs.tut.fi/~jkorpela/html/alt.html
Example of D link
http://www.consideration.org/technology/accessexamples/dlinksample.html
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
http://www.access-board.gov/sec508/guide/1194.22.htm#(b)
http://www.jimthatcher.com/webcourse6.htm
Related Information
Captioning for the Web (WEBAIM)
http://www.webaim.org/techniques/captions/
(Includes tutorials on captioning in Quicktime, Windows Media, RealPlayer, and MAGpie)
Caption Resource List
http://webaim.org/resources/captioning/
MAGPIE (NCAM)
http://ncam.wgbh.org/webaccess/magpie/
Synchronized Multimedia: SMIL (W3C)
http://www.w3.org/AudioVideo/
Accessibility Features of SMIL (W3C)
http://www.w3.org/TR/SMIL-access/
Creating Accessible Flash (WEBAIM)
http://www.webaim.org/techniques/flash/
Accessibility Techniques for Flash (Macromedia)
http://www.adobe.com/accessibility/products/flash/
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
http://www.access-board.gov/sec508/guide/1194.22.htm#(c)
http://www.jimthatcher.com/webcourse7.htm
Related Information
Effective Color Contrast
http://www.lighthouse.org/color_contrast.htm
Vischeck
http://www.vischeck.com/vischeck/
Barrier-free presentation that is friendly to colorblind people
http://jfly.iam.u-tokyo.ac.jp/html/color_blind/
Visual Disabilities
http://www.webaim.org/articles/visual/colorblind.php
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
http://www.access-board.gov/sec508/guide/1194.22.htm#(d)
http://www.jimthatcher.com/webcourseb.htm
Related Information
Accessibility Features of CSS (W3C)
http://www.w3.org/TR/CSS-access
Cascading Style Sheets (W3C)
http://www.w3.org/Style/CSS/
CSS Validator (W3C)
http://jigsaw.w3.org/css-validator/
(e) Redundant text links shall be provided for each active region of a server-side image map.
(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
http://www.access-board.gov/sec508/guide/1194.22.htm#(e)
http://www.access-board.gov/sec508/guide/1194.22.htm#(f)
http://www.jimthatcher.com/webcourse5.htm
(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
http://www.access-board.gov/sec508/guide/1194.22.htm#(g)
http://www.jimthatcher.com/webcourse9.htm
Related Information
How to Create Accessible Tables (WEBAIM)
http://www.webaim.org/techniques/tables/
Accessible Table Builder (Accessify)
http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/
A tool that allows you to choose what table properties you want, how many rows and columns, and takes care of the accessibility mark-up for you.
(i) Frames shall be titled with text that facilitates frame identification and navigation.
http://www.access-board.gov/sec508/guide/1194.22.htm#(i)
http://www.jimthatcher.com/webcourse4.htm
Related Information
How to Create Accessible Frames
http://www.webaim.org/techniques/frames/
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
http://www.access-board.gov/sec508/guide/1194.22.htm#(j)
http://www.jimthatcher.com/webcourse7.htm
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
http://www.access-board.gov/sec508/guide/1194.22.htm#(k)
http://www.jimthatcher.com/webcourse7.htm
(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
http://www.access-board.gov/sec508/guide/1194.22.htm#(l)
http://www.jimthatcher.com/webcoursea.htm
Related Information
Creating Accessible JavaScript (WEBAIM)
http://www.webaim.org/techniques/javascript/
Keyboard Accessibility (WEBAIM)
http://www.webaim.org/techniques/keyboard/
JavaScript Accessibility Issues (TRACE Center)
http://trace.wisc.edu/world/java/jseval.htm
Scripts (IBM)
http://www-03.ibm.com/able/guidelines/web/webscripts.html
(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
http://www.access-board.gov/sec508/guide/1194.22.htm#(m)
Software Applications and Operating Systems (1194.21)
http://www.access-board.gov/sec508/guide/1194.21.htm
Related Information:
Java Accessibility (IBM)
http://www-03.ibm.com/able/guidelines/java/accessjava.html
Sun Microsystems Accessibility Program
http://www.sun.com/access/index.html
(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
http://www.access-board.gov/sec508/guide/1194.22.htm#(n)
http://www.jimthatcher.com/webcourse8.htm
Related Information
How to Create Accessible Forms (WEBAIM)
http://www.webaim.org/techniques/forms/
Accessible HTML/XHTML Forms (Accessify.com)
http://www.accessify.com/features/tutorials/forms/
Multiple Input Form Fields (Accessify.com)
http://www.accessify.com/features/tutorials/multiple-inputs/
Quick Form Builder (Accessify.com)
http://www.accessify.com/tools-and-wizards/accessibility-tools/quick-form-builder/
This tool lets that helps you build forms with the necessary HTML mark-up for accessibility.
(o) A method shall be provided that permits users to skip repetitive navigation links.
http://www.access-board.gov/sec508/guide/1194.22.htm#(o)
http://www.jimthatcher.com/webcourse4.htm
Related Information
Skip Navigation Links (WEBAIM)
http://www.webaim.org/techniques/skipnav/
Skip Navigational Links (Jim Thatcher.com)
http://www.jimthatcher.com/skipnav.htm
(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
http://www.access-board.gov/sec508/guide/1194.22.htm#(p)
http://www.jimthatcher.com/webcourse7.htm
More Information on Making Web Sites and Content Accessible
W3C Web Accessibility Initiative Resources
http://www.w3.org/WAI/Resources/
Making Educational Software and Web Sites Accessible Design Guidelines Including Math and Science Solutions
http://ncam.wgbh.org/cdrom/guideline/
508 Universe (Includes a course on designing accessible websites)
http://www.section508.gov/index.cfm?FuseAction=Content&ID=5
Accessibility Tools and Wizards
http://www.accessify.com/tools-and-wizards/
Testing Web Sites for Accessibility
Testing for Web Accessibility Compliance Under Section 508 of the Rehabilitation Act of 1973 (Department of Education)
http://www.ed.gov/policy/gen/guid/assisttesting.html
508 Checklist (WEBAIM)
http://www.webaim.org/standards/508/checklist
Evaluating Web sites for Accessibility (W3C)
http://www.w3.org/WAI/eval/
Free Testing Tools
The Wave
http://www.wave.webaim.org/
Web Accessibility Toolbar (Internet Explorer)
http://www.paciellogroup.com/resources/wat-ie-about.html
Web Developer Toolbar (Firefox)
http://chrispederick.com/work/web-developer/
For more information about the Department of Education’s Assistive Technology Program, please visit:
http://www.ed.gov/policy/gen/guid/assistivetech.html
The links referenced in this document include those that are created and maintained by other public and private organizations and are provided for the user's convenience. The U.S. Department of Education does not control or guarantee the accuracy, relevance, timeliness or completeness of information from these sources. Further, the inclusion of links in this document is not intended to reflect their importance, nor is it intended to endorse any views expressed or products or services offered, or the organizations sponsoring the sites.
Last Updated on July 17, 2009
不,通过优雅降级,您可以构建无需 JavaScript 的网站,并放置一层动态行为在上面。
尤其是 jQuery 对此很擅长。
像 Silverlight 这样的东西可能会产生问题,但只要它不是页面的组成部分,就不应该产生问题。
No, with gracefull degradation you build the website to work without javascript, and put a layer of dynamic behaviour on top.
Especially jQuery is good with that.
Things like Silverlight can give problems, but as long as it isn't an integral part of the page, it shouldn't give a problem.
Flash 和 Silverlight 在 iPhone 和其他一些移动设备上不可用。 jQuery 支持屏幕阅读器辅助功能,但似乎在除iPhone。
Flash and Silverlight aren't available on the iPhone, and some other mobile devices. jQuery supports screen reader accessibility, but doesn't seem to be available on most mobile devices other than the iPhone.
一般来说,如果您想拥有多个生产目标,则不必避免这些技术。然而,需要更加小心才能提供更传统的方法来创建相同的功能。换句话说,您需要优雅地降级。
I general, you don't have to avoid those technologies if you want to have multiple production targets. However, more care will need to be taken in order to provide more traditional methods for creating the same functionality. In other words, you will need to gracefully degrade.
只是一个意见,
我看到很多手机都有opera移动浏览器,所以请尝试也兼容opera。
Just an opinion,
I seen lots of phone which has opera mobile browser, so please try to make compatible with opera too.
我的建议是创建一个没有任何花哨东西(JavaScript、Flash 等)的基本网站,并使该网站可以在任何设备上完美访问。
然后,如果由于更先进的技术可以在某些平台上真正增强用户体验,请将其构建在您的基本网站之上,并确保您正在检查谁在访问您的网站以及如何访问,并为他们提供正确的版本。
My advice would be to make a basic site devoid of any fancy stuff (JavaScript, Flash, etc.) and make that site perfectly accessible on any device.
Then if the user experience can be truly enhanced on certain platforms due to fancier technology, build that on top of your basic site and just make sure you're checking who's accessing your site and how, and serve them the right version.
作为屏幕阅读器用户,请遵循使用优雅降级的建议。也就是说 Flash 和 Silverlight 是无法访问的。尽管理论上 Flash 是可以访问的,但我从未找到过可以访问 Flash 的网站。如果您希望盲人用户可以通过手机访问该网站,则需要使用 iPhone、Windows Mobile 和 Symbian 上的默认浏览器进行测试。任何移动设备上的屏幕阅读器用户都无法访问 Opera Mobile。
As a screen reader user please follow the advice to use graceful degradation. That said Flash and Silverlight are inaccessible. Although Flash can theoretically be made accessible I have never found a site with accessible Flash. If you want the site to be accessible to blind users on mobile phones you need to test using the default browser on the IPhone, Windows Mobile and Symbian. Opera Mobile is not accessible to screen reader users on any mobile device.