0

0

Web Accessibility网页无障碍介绍_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-21 08:48:49

|

2297人浏览过

|

来源于php中文网

原创

WAI 官方网址:http://www.w3.org/WAI/intro/accessibility.php

什么是 Web Accessibility

立即学习前端免费学习笔记(深入)”;

Web Accessibility 意味着残障人士可以使用Web 。更确切的说,Web accessibility 意味着残障人士可以感知,理解,浏览,和Web 互动,他们也可以为Web 做出贡献。

Web Accessibility

也为人士比如由于衰老手脚不灵活的老年人带来好处。

Web accessibility 涵盖所有影响Web 访问的残疾,包括视觉,听觉,肉体,说话,认知和神经上的残疾。

上百万的人由于残疾而影响了他们使用Web 。现在大多数网站和Web 软件都有访问障碍,从而使很多残障人士很难使用Web 。随着越来越多的网站和软件变得可达,是残障人士也可以更有效的使用以及贡献到Web 世界。

Web accessibility 也使没有残障的人们获得了益处。例如,Web accessibility 的关键原则之一是网站设计和软件灵活的满足不同用户需求,参数选择和情况。这个灵活性也使没有残障的人们在一些特定情况下受益。例如,当人们使用很慢的网络时,就像是一个断了手臂的人或是老年人一样暂时残疾。

为什么Web Accessibility 这么重要

Web 是一个在的许多方面日益重要的资 源:教育,就业,政府,商业,保健,娱乐 等。所以为了为残障人士提供平等的访问和机会,Web 的可达性非常重要。一个可访问的Web 也帮助残障人士更有效地参与社会。

Web 为许多残障人士提供了前所未有的信息互动访问的可能性。也就是说,通过Web 技术,显示,声音和可使媒体的访问屏障可以更容易的被克服。

另外,Web Accessibility 有时也是被法律和政治所要求的。

使 Web 可访问

使Web 可访问可以是简单,也可以很复杂,取决于许多因素,例如内容,大小,Web 的复杂程度以及开发的工具和环境。

如果在开始开发或者重新设计Web 的时候做出计划,许多Accessibility 的功能可以很容易实现。解决网站的不可达,可能需要重大的努力,尤其是在网站原本没有用标准的XHTML 开发,以及包含了各种类型的内容如多媒体的情况下。

评估一个网站的可达性

当开发和重新设计一个网站,早点在开发过程中评估,并且在整个开发过程中评估可达性可以更早,更容易发现可达性的问题,也更容易解决。简单的技术例如改变浏览器的设置可以决定一个网页是否符合一些Accessibility 的标准。一个可以决定一个网站是否符合所有Accessibility 标准的复杂评估就复杂多了。

有一些评估工具可以帮助评估。然而,没有一个单独的工具可以决定一个网站是否符合Accessibility 标准。有见识的人工评估是决定一个网站是否可达所必需的。

无障碍的网络基本元件

几个Web 开发的组件互动来使残障人士访问网页是非常重要的。这些组件包括:

·          内容(content) – 网页或Web 应用程序的信息,包括:

o    自然信息,如文字,图片,声音等

o    代码或者定义结构,显示的标志

·          Web 浏览器(browser) ,媒体播放器(media player) ,或其他的代理

·          辅助技术(assistive technologies) 读屏器(Screen reader) ,替代键盘,电键(Switch) ,扫描软件等

·          用户(user) 的知识,经验,使用Web 的适应对策

·          开发人员(developer) – 设计师,开发者,作者等,包括有残障的开发者和贡献内容的用户

·          创作工具(Authoring tool)   - 创建网站的软件

·          评估工具(evaluation tool) – Web Accessibility 评估工具,HTML Validator, CSS Validator 等

组件之间的互相依赖

组件之间有重大的依赖,也就是说,组件必须为了使网页可达而共同工作。例如,对于图片上的 Alt 文字:

MyMap AI
MyMap AI

使用AI将想法转化为图表

下载

·          技术规格 制作替 代文本(例如,HTML 定义的替代文字属性(ALT 的图像元素(IMG )

·          WAI 指南 -WCAG , ATAG 和 UAAG ,下面描述 - 定义如何实现无障碍的不同组成部分的替代文字

·          开发人员 提供适当的替代文字措词

·          创作工具 ,促进和推动在网页中提 供的替代文字

·          评估工具 是用来帮助检查替代文字是否存在

·          用户代理 提供人力和人机界面的替代文字

·          辅助技术 提供人机界面,多 种方式的替代文字

·          用户 知道如何从他们的用户代理或根据辅助技 术取得 替代文字

不同组件的指南

World Wide Web Consortium ( W3C) Web Accessibility Initiative ( WAI) 为不同的组件层次开发了 Web accessibility 指南

  • Authoring Tool Accessibility Guidelines ( ATAG ) 创作工具
  • Web Content Accessibility Guidelines ( WCAG ) Web 内容,用于开发人员, 创作工具,评估工具
  • User Agent Accessibility Guidelines ( UAAG ) Web 浏览器,媒体播放器,包括一些辅助技术

WAI 指南基于Web 的基本的技术规格,配合 W3C technical specifications( HTML, XML, CSS, SVG, SMIL, etc.) 工作

残障人士如何使用Web

场景:

·          色盲在线购物 :

李先生想买一些新的衣服,器具和音乐。像他平常一样,他花一个晚上在线Shopping 。他有一个普遍的视觉障碍:红绿色盲。

他很难阅读许多网站上的文字。当他开始使用Web 的时候,就发现似乎许多网站上的文字和图片使用很糟糕的颜色对比,因为他们似乎采用类似的棕色色调。他意识到是因为他的红绿色盲,所以颜色无法区分。在许多情况下,网站使用红色来提示折扣,但所有的颜色他看起来都像棕色。在另外一些情况,必填框用红色来提示,但是他看不出来哪个是红色。

李先生发现他偏爱使用充分颜色对比以及为颜色使用冗余信息 的 网站。这些网站使用文字而不是颜色来提示。另一个经验是,李先生发现许多更新的站点使用样式表来控制颜色,他可以把浏览器的样式表关掉,使用自己的样式表来覆盖。但是有一些网站不能覆盖那些颜色。

·          重复性压力损伤的记者

Mr. Jones 是一个为在线杂志提交HTML20 年的职业生涯中,他的手部和手臂得了重复性压力损伤(RSI ),使他打字很疼痛。它使用语音识别和替代键盘来准备文章,但他不能使用鼠标。然而,某些使用音频流的网站无法使用语音识别,因为声卡冲突。

他不可以和他的同事使用同样的Web 创作软件,因为这套软件没有键盘替代操作,必须使用鼠标驱动。他不得不使用鼠标,而无法使用替代键盘和语音识别,这使他的手部再受损伤。它使用一套更新的,支持全键盘操作的软件,可以是双手更轻松。

当他浏览网站的时候,很喜欢某些网页实现的access key 的功能。使他可以使用快捷方式直接到达他要的链接

·          聋人在线学生

Ms. Martinez 在上几个物理学的远程教学课程。她是聋人。她在课程上有一些问题,直到大学升级了在线多媒体课件,使用了大量的音频讲座。该大学使用演讲抄写,并通过他们的Web 提供声音版本。对于多媒体作品的介绍,使用了一个SMIL 的多媒体同步的音频格式同步音频字幕的和视频的解释。学校信息管理人员很快发现这些资源一旦用文字作为字幕,可以很容易索引复杂的音频资源。

该课程的教授还设立了聊天网站,让同学交流有关课程的想法。虽然她是一个聋人学生,但没有一个其他的学生知道手语。 她很快发现,基于 Web 的聊天格式,以及提供基于Web 的文字评论,保证了她能 跟上班级的进步 。

·          盲人会计

Ms. Laitinen 是一个盲人会计,她使用screen reader 来翻译屏幕显示,产生语音输出和盲文输出。她使用语音输出,结合页面上的导航链接切换,快速的文件扫描。她使用盲文输出来检查文本的确切措辞,因为盲文让她更精确地阅读网页。

网页的许多信息在Table 内,使盲人很难阅读。然而,因为Tables 用column header 和row header 清楚地标志,所以她很容易在表格中找到信息。Screen reader 在读到任何图片时,会读取替代性文字。因为会计代码有许多缩略词,Web 使用ABBR 和ACRONYM 在第一次访问的时候可以更好的理解这些缩略词的意思。

·          读写障碍的学生

Ms. Olsen, 中学生,非常喜欢文学课。她有读写障碍和注意力缺乏症。导致她阅读非常困难。她的学校最近采用在线课程来补充教科书。她尝试了文本到语音软件,是她阅读轻松了。

她发现采用了图片的网页使她易于阅读,而采用动画的网页则很难阅读,她会关掉动画和滚动的文字。网页的不同搜索策略也使她更容易阅读了。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

0

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

3

2026.03.03

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

66

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

57

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

45

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

23

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

20

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

4

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

336

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号