作者：澄墙_168 | 来源：互联网 | 2023-10-10 17:32
使用CSS技术可以改善网站的可访问性，比如通过使用CSS，你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计，而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。
网站重构:利用CSS改善网站可访问性
问题是如何出现的？
在我概述使网站更加具有可访问性的方法之前，了解现今众多的网站访问性问题的起因也许是很有帮助的：
对HTML肤浅的理解：在1990年代的互联网大发展时期中，所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站，而不用费心去学习HTML。但不幸的是，这种在使用上的便利带来了一些蹩脚的代码，对可访问性造成了妨碍。
HTML在设计方面的局限性：开发者和设计者经常会故意错用HTML标签，特别是
标签，来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。什么使得CSS更具有访问性？
CSS在1996年出现，用来解决上述的问题。通过使用CSS，你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计，而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。
例如，虽然HTML表格是用来排列表格式数据的，但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素，产生的结果就会让使用者感到莫名其妙。
CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单，这个风格单可以与网站的风格单共同工作。因此，例如一个使用者可以设定，所有通过
标签定义的文本都应该是1.5emArial，即使这个网站的风格单表示它应该是18pxVerdanaBold。
要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用，这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如，如果用户的风格单指定
标签应显示1.5emArial文本，但是HTML页面并不使用
标签来从风格单中调用一个风格（也许它使用），用户对于标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签，这将减少用户定义的风格单被忽略的机会。
开始
如果你是从头开始建构一个新的网站，那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。
步骤1：检查现有代码
为了更好地说明，我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS，不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。
步骤2：从HTML中去掉所有特殊风格标签
要在这个页面中加入CSS，我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观，风格和颜色。去掉这些元素使得样本代码如表B所示。
步骤3：从HTML中去掉并替换任何错用的标签
现在我要去掉任何错用的HTML标签。在样本代码之中，一个表格用来在页面的内容创建一个15象素的边缘，代码还使用
标签来创建段落。
在我去掉表格和
标签之后，我将他们替换为适当的标签。例如，我对页面标题使用
标签，用
标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易，而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。
步骤4：建构一个CSS文件来覆盖风格信息
现在我已经从HTML文件中去掉了所有风格信息，我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件，因此它可以在任何一个文本编辑器中进行创建。我使用的是DreamweaverMX。
为了使在HTML中应用CSS文件变得容易，我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小，使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整（除了Netscape6或以后的版本之外，它将不考虑绝对字体大小）。我还在需要的地方指定了字体的种类，重量和颜色。
要重新产生由HTML标记代码创建的版面，我需要将
和
标签设置宽度为780象素。然而，由于我们的目的是将可访问性最大化，因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘，而不是用原始代码的
标签来重新创建15象素的空白，这也使得其它例如打印机等的设备来使用它的缺省边缘设置。表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。
步骤5：在HTML文件上附加新的风格单
在创建了CSS文件之后，我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(
和
)，所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到
和
标签当中，如表E所示。
步骤6：验证代码
整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话，你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。
我使用DreamweaverMX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择CheckPage然后选择CheckAccessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在DreamweaverMX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNetAccessibilityReference就可以了。
此外，WorldWideWebConsortium(W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。
CSS可访问性和简单的管理
虽然这里给出的例子是很简单的，但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且，对于CSS的使用不止这一个优点而已。
基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小，因为所有的风格信息都存储在了CSS文件之中。
因此如果你想要改善可访问性的话，将其视为一个机会，而不是一个障碍。要了解更多关于CSS和可访问性的内容，你可以去看一看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。
推荐阅读
-
本文介绍了在开发过程中遇到JDK版本冲突的情况，以及如何通过修改环境变量实现JDK版本的切换功能，解决开发环境冲突的问题。通过合理的切换环境，可以更好地进行项目开发。同时，提醒读者注意不仅限于1.7和1.8版本的转换，还要适应不同项目和个人开发习惯的需求。 ...
[详细]
蜡笔小新 2023-12-10 19:24:11
-
本文介绍了在Windows环境下如何配置php+apache环境，包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-13 10:39:24
-
-
本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
-
本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ...
[详细]
蜡笔小新 2023-12-14 10:06:19
-
本文介绍了两种PDF内容编辑的方法：迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器，用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC，则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ...
[详细]
蜡笔小新 2023-12-12 19:37:50
-
本文介绍了小程序支持的两种接入方式：自动授权和手动接入，并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换，以及手动接入后如何下载代码包和提交审核。 ...
[详细]
蜡笔小新 2023-12-11 18:21:09
-
本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ...
[详细]
蜡笔小新 2023-12-11 12:37:10
-
svnWebUI是一款图形化管理服务端Subversion的配置工具，适用于非程序员使用。它解决了svn用户和权限配置繁琐且不便的问题，提供了现代化的web界面，让svn服务端管理变得轻松。演示地址：http://svn.nginxwebui.cn:6060。 ...
[详细]
蜡笔小新 2023-12-11 11:01:10
-
本文介绍了一个免费的asp.net控件，该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用，同时具备多种功能，例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外，它还提供了数据验证、日期选择器、数字选择器等功能，以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后，该控件还支持字段值合计和数据导出功能。总之，该控件功能强大且免费，适用于asp.net开发。 ...
[详细]
蜡笔小新 2023-12-11 09:41:26
-
Java和JavaScript是什么关系？java跟javaScript都是编程语言，只是java跟javaScript没有什么太大关系，一个是脚本语言（前端语言），一个是面向对象 ...
[详细]
蜡笔小新 2023-12-11 04:03:31
-
本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言，并重点讨论了Python的优点。Python是一种解释型、多用途的语言，具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验，包括快速复制恶意软件组件以更好地理解其工作。此外，作者还提到了Python的跨平台优势，使得在不同操作系统上运行代码变得更加方便。 ...
[详细]
蜡笔小新 2023-12-10 18:39:23
-
本文介绍了如何在Azure应用服务实例上获取.NetCore 3.0+的支持。作者分享了自己在将代码升级为使用.NET Core 3.0时遇到的问题，并提供了解决方法。文章还介绍了在部署过程中使用Kudu构建的方法，并指出了可能出现的错误。此外，还介绍了开发者应用服务计划和免费产品应用服务计划在不同地区的运行情况。最后，文章指出了当前的.NET SDK不支持目标为.NET Core 3.0的问题，并提供了解决方案。 ...
[详细]
蜡笔小新 2023-12-10 13:54:46
-
本文介绍了Android Studio Bumblebee | 2021.1.1（大黄蜂版本）的使用方法和相关知识，包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ...
[详细]
蜡笔小新 2023-12-14 10:34:15
-
本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ...
[详细]
蜡笔小新 2023-12-13 10:58:55
-
本文介绍了腾讯最近开源的BERT推理模型TurboTransformers，该模型在推理速度上比PyTorch快1~4倍。TurboTransformers采用了分层设计的思想，通过简化问题和加速开发，实现了快速推理能力。同时，文章还探讨了PyTorch在中间层延迟和深度神经网络中存在的问题，并提出了合并计算的解决方案。 ...
[详细]
蜡笔小新 2023-12-12 13:48:41
-
京公网安备 11010802041100号