余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

Web前端:创建符合Web可访问性标准的HTML布局

xiyangw 2022-11-25 12:11 66 浏览 0 评论

  “Web 可访问性”一词定义了一组开发人员需要遵循的准则,以使Web应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该是可访问的。在这篇文章中,我们研究了前端团队可以做些什么来轻松地将他们的网站提升到适合Web可访问性的标准。

  保持标记清洁

  无论你使用什么标记,都要正确整齐地构建它,避免跳过关卡。例如,在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 进行导航,使用 <button> 进行页面操作。

  将 <strong> 或 <em> 元素与 <bold> 或 <i> 区分开来。前两者用于对内容的语义强调,后两者用于视觉强调。

  l 确保横幅中的公司徽标链接回网站的主页。

  l 使用 <lang> 属性告诉浏览器在网站上使用哪种语言。

  l 如果你想在视觉上和屏幕阅读器中隐藏内容,请使用 hidden 属性。

  l 为长页面添加锚链接(跳转链接),以便用户可以跳过他们不需要的内容并继续相关部分。

  注意页面语义

  用户和机器(屏幕阅读器、盲文显示器)都应该能够识别页面结构。通过使用页面上的分段(<header>、<footer>、<article>、<nav>)和标题元素来创建语义布局。这有助于定义网页的清晰层次轮廓,并区分主要(主要:<h1>、<h2>、<article>)和次要(不太重要:<h3> - <h6>、<footer>)内容。

  当你在页面中使用标题时,不要使用格式(字体样式和大小)伪造标题属性 (<h>) 的实际标记,因为这不允许辅助技术识别这些是标题。

  在适当的情况下在网页中使用 ARIA 地标。ARIA(可访问的富 Internet 应用程序)是一个综合技术规范,用于将可访问性信息添加到本地不可访问的元素(特别是使用 JavaScript、AJAX 和 DHTML 开发的元素)。使用 ARIA 地标,开发人员可以扩展 HTML 功能并将适当的语义(即属性)应用到 UI 和内容元素,以便辅助技术理解这些。

  这是一个 HTML 语义元素(<header>、<nav>、<main>、<footer>)如何与 ARIA 角色属性(“banner”、“navigation”、“main”、“contentinfo”)组合的示例使用户更容易使用屏幕阅读器进行网站导航。

  尽管大多数 ARIA 功能最近都是在 HTML5 中实现的(你绝对应该喜欢这些!),但并非所有屏幕阅读器和浏览器(例如 IE)都足够复杂,仅依赖于 HTML 语义。适当使用 ARIA 的一些示例是分配角色来描述某些类型的小部件(“菜单”、“树项”、“滑块”),定义描述拖放源和放置目标的拖放属性,以及添加警报以通知有关动态页面更改的辅助技术。

  

  支持标签导航

  使元素的 Tab 顺序(也称为文档对象模型或 DOM 顺序)与视觉顺序一致。从 Tab 顺序中删除不必要的元素,以免混淆使用 Tab 或辅助设备导航的用户。

  使导航元素的焦点可见。你可以为此使用第三方插件或 <outline> 属性,该属性为在选项卡式导航(或其替代方案)时具有焦点的页面元素和链接提供视觉反馈。

  使用 <tabindex> 属性可以使链接、按钮和表单字段等元素具有焦点,并且可以通过 Enter 键和/或空格键进行选择。即使具有 <tabindex> 属性和 0 整数值的不可聚焦元素也可以成为可聚焦元素,例如<h3 tabindex="0">一个可聚焦的标题</h3>

  如果页面上有弹出窗口,导航优先级应该允许首先关闭它们。完成此操作后,理想情况下,焦点应该跳回到用户被打开的模式窗口打断的网页元素。为此,请将最后一个焦点元素存储在变量中。

  为图像添加替代文本

  屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。所以不要忘记为图像和其他图形添加替代文本(<img> alt 属性)。这不仅可以帮助使用辅助技术“阅读”屏幕的人,还可以帮助互联网连接不佳的用户。你的网站也将使用图像替代文本进行 SEO 优化。在Web前端培训中,不仅有理论知识的课程,也会有实操项目的训练,让你深入浅出地学习前端技术,弥补项目经验的空缺。

  图像替代文本应该精确、简洁,并反映添加图像的主要目的。根据上下文,相同的图像可能有不同的替代文本,例如 如果将公司徽标放在标题中并将用户返回到主页,则其准确的替代文本可能是`<img alt="Company X logo - Home page.">`

  l 在替代文本中,避免使用多余的“图像”或“图像”——无论哪种方式,辅助技术都会警告用户有图像。

  l 以句点结束替代文本。这将使屏幕阅读器在 alt 文本中的最后一个单词之后暂停一点,从而为用户提供更愉快的体验。

  l 具有多个可点击区域的图像(例如图像地图)的替代文本应提供这些链接的完整描述。此外,每个可点击区域都应该有相应的替代文本来描述其目的或目的地。

  l 避免使用文字图片;如果你不能没有它们,替代文本应该包含与图像中相同的单词。

  l 如果你有多个图像传达一条信息,则组中第一张图像的替代文本应包含整个组的信息。

  l 要熟悉替代文本的普遍接受标准,你可以随时查看此替代文本决策树。

  虽然必须为所有对理解内容很重要的图像添加替代文本,但对于与内容没有直接关系的菜单图标或装饰性图像(如封面)则无需这样做。对于这样的图像,只需使用一个空的 <img alt> 属性。

  最后技巧

  尽管这些提示肯定会增加你网站的包容性,但最好不要将 Web可访问性视为一套正式的指南。首先,它是一项全面的策略,可以关心所有用户并使你的网站内容可供他们使用——无论他们使用何种浏览器、互联网提供商或辅助设备。


相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: