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

人们常说网络可访问性是当今万维网的“必须”。“Web 可访问性”一词定义了开发人员需要遵循的一组准则,以使残障人士和 Web 应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该易于访问。在本文中,Logicify团队为 HTML/CSS 开发人员提供了一些实用技巧,使 Web 布局对于人们和辅助设备来说都更易于访问。

保持标记干净
无论您使用什么标记,都要正确、整齐地构建它,避免跳过级别。始终偏爱原生元素(如果有的话)而不是伪造它们。例如,使用<button>元素代替HTML 中的<span>或。<div>用于<nav>导航、<button>页面操作。

区分<strong>or<em>元素与<bold>or <i>。前两者用于对内容进行语义强调,后两者用于视觉强调。

一些明显的事情已经成为最佳实践:
确保横幅中的公司徽标链接回网站主页。
使用该<lang>属性告诉浏览器网站上使用哪种语言。
如果您想在视觉上隐藏内容并对屏幕阅读器隐藏,请使用该hidden属性。
为长页面添加锚链接(跳转链接),以便用户可以跳过不需要的内容并继续进行相关部分。
注意页面语义
用户和机器(屏幕阅读器、盲文显示器)都应该能够识别页面结构。通过使用页面上的分段( <header>、<footer>、<article>、 )和标题元素来创建语义布局。<nav>这有助于定义网页的清晰层次结构并区分主要(主要:<h1>, <h2>, <article>)和次要(不太重要:<h3>- <h6>, <footer>)内容。

页面布局中语义的示意图。

注意页面布局中的语义

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

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

以下示例说明了如何将 HTML 语义元素 ( <header>、<nav>、<main>、<footer>) 与 ARIA 角色属性(“banner”、“navigation”、“main”、“contentinfo”)相结合,以便残障人士更轻松地使用屏幕阅读器进行网站导航。

页面布局中的 HTML 元素和 ARIA 地标示例。

在页面布局中组合 HTML 元素和 ARIA 地标

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

支持选项卡导航
使元素的 Tab 顺序(也称为文档对象模型或 DOM 顺序)与视觉顺序一致。从 Tab 键顺序中删除不必要的元素,以免使使用 Tab 或辅助设备导航的用户感到困惑。

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

使用该<tabindex>属性可以使链接、按钮和表单字段等元素可通过 Enter 键和/或空格键获得焦点和选择。<tabindex>即使具有属性和 0整数值的不可聚焦元素也可以成为可聚焦的,例如<h3 tabindex="0">A focusable heading</h3>

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

为图像添加替代文本
屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。因此,不要忘记为图像和其他图形添加替代文本( alt 属性)。<img>这不仅可以帮助使用辅助技术“阅读”屏幕的人,还可以帮助互联网连接较差的用户。您的网站还将通过图像替代文本进行 SEO 优化。

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

在替代文本中,避免多余的“图像”或“图片”——无论哪种方式,辅助技术都会警告用户存在图像。
以句点结束替代文本。这将使屏幕阅读器在替代文本中的最后一个单词后暂停一下,从而为用户提供更愉快的体验。
具有多个可点击区域的图像的替代文本(例如图像映射)应为这些链接提供完整的描述。此外,每个可点击区域都应该有相应的替代文本来描述其目的或目的地。
避免文字图像;如果您不能没有它们,则替代文本应包含与图像中完全相同的单词。
如果您有多个图像传达一条信息,则组中第一个图像的替代文本应包含整个组的信息。
要熟悉替代文本的普遍接受的标准,您可以随时检查此替代文本决策树。
虽然必须为所有对理解内容很重要的图像添加替代文本,但对于与内容不直接相关的菜单图标或装饰图像(如封面)则不需要这样做。对于此类图像,只需使用空<img alt>属性即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/141944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开题报告】基于uni-app的高校新生报道APP的设计与实现

1.选题背景和意义 随着高校规模的不断扩大和信息化技术的迅速发展&#xff0c;传统的高校新生报道方式已经无法满足日益增长的新生数量和信息处理的需求。传统的线下报道流程通常存在着信息收集效率低、报到流程繁琐等问题&#xff0c;给学生、教职工和管理人员带来了许多不便…

C 语言指针怎么理解?

今日话题&#xff0c;C 语言指针怎么理解&#xff1f;让我用更简洁的方式来表达这个内容&#xff1a;就像桌面上的快捷方式一样&#xff0c;指针也可以有多层引用。我们可以将指针比作快捷方式的图标&#xff0c;快捷方式可以指向游戏&#xff08;普通指针&#xff09;&#xf…

【JavaEE初阶】IP协议简介

文章目录 前言&#x1f334;IP协议的概念&#x1f333;IP数据报&#x1f6a9;IPv4协议头格式&#x1f6a9;IPv6的诞生 &#x1f38d;IP地址&#x1f6a9;IP地址的格式&#xff1a;&#x1f6a9;IP地址的分类&#x1f388;网络号与主机号的划分 &#x1f6a9;特殊的IP地址&#…

【机器学习】八、规则学习

知识图谱与基本概念 基本概念 规则学习定义&#xff1a;从训练数据中学习出一组能用于对未见示例进行判别的规则。 规则定义&#xff1a;规则一般是&#xff1a;语义明确、能描述数据分布所隐含的客观规律或领域概念。 逻辑规则定义&#xff1a;⊕←?1⋀?2⋀?3…⋀??⊕…

任意注册漏洞

目录 一漏洞介绍 二实战演示 三漏洞修复 本文由掌控安全学院 - 小博 投稿 一漏洞介绍 1.未验证邮箱/手机号 情景&#xff1a;应用为了方便用户记录用户名&#xff0c;使用邮箱和手机号作为用户名&#xff08;因此很多应用在注册的时候就要求用户填写&#xff0c;多数时候…

CTFSHOW -SQL 注入

重新来做一遍 争取不看wp 还是看了。。。。 CTFshow sql注入 上篇(web171-220)更新中 - 掘金 【精选】CTFshow-WEB入门-SQL注入(上)_having盲注_bfengj的博客-CSDN博客 web171 基本联合注入 拿到题目我们已经知道了是sql注入 所以我们可以直接开始 第一题 不会难道哪里去…

软考 系统架构设计师系列知识点之云计算(2)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之云计算&#xff08;1&#xff09; 所属章节&#xff1a; 第11章. 未来信息综合技术 第6节. 云计算和大数据技术概述 3. 云计算的部署形式 根据NIST&#xff08;National Institute of Standards and Technology&…

Pytorch常用的函数(四)深度学习中常见的上采样方法总结

Pytorch常用的函数(四)深度学习中常见的上采样方法总结 我们知道在深度学习中下采样的方式比较常用的有两种&#xff1a; 池化 步长为2的卷积 而在上采样过程中常用的方式有三种&#xff1a; 插值 反池化 反卷积 不论是语义分割、目标检测还是三维重建等模型&#xff0…

ios 对话框 弹框,输入对话框 普通对话框

1 普通对话框 UIAlertController* alert [UIAlertController alertControllerWithTitle:"a" message:"alert12222fdsfs" pr…

企业大楼门禁,千万不要这么管理!太慢了!

随着社会科技的飞速发展&#xff0c;安全管理已经成为各行业关注的焦点之一。在这个信息化时代&#xff0c;门禁监控系统作为一种全面提升安全性、管理效率的关键工具&#xff0c;逐渐成为企事业单位、学校、医疗机构等场所的不可或缺的一部分。 传统的门禁系统已经无法满足现代…

【移远QuecPython】EC800M物联网开发板的硬件TIM定时器精准延时

【移远QuecPython】EC800M物联网开发板的硬件TIM定时器精准延时 文章目录 导入库定时器初始化延时函数定时中断回调调用函数打包附录&#xff1a;列表的赋值类型和py打包列表赋值BUG复现代码改进优化总结 py打包 首先 这个定时器是硬件底层级别的 优先级最高 如果调用 会导致GN…

JavaScript库:jQuery,简化编程

jQuery介绍 官方网站: https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程&#xff0c;例如 JS 原生代码几十行 实现的功 能&#xff0c; jQuery 可能一两行就可以实现&#xff0c;因此得到前端程序猿广泛应用。&#xff08;现在处在比较边…

IO数据采集卡

串口modbus rtu 网口

微信自动添加好友

简要描述&#xff1a; 添加微信好友 请求URL&#xff1a; http://域名地址/addUser 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId…

a网站加载了b网站的资源(比如字体)ttf|otf|eot|woff|svg|woff2的资源,未配置发现会提示跨域

目录 问题 apache nginx 问题 a网站加载了b网站的资源(比如字体)ttf|otf|eot|woff|svg|woff2的资源,未配置发现会提示跨域 分析了下根源还是资源请求跨域,为啥css js正常能获取呢,这就跟web服务的资源配置有关系了 apache <FilesMatch ".(ttf|otf|eot|woff|svg…

记一次 .NET 某券商论坛系统 卡死分析

一&#xff1a;背景 1. 讲故事 前几个月有位朋友找到我&#xff0c;说他们的的web程序没有响应了&#xff0c;而且监控发现线程数特别高&#xff0c;内存也特别大&#xff0c;让我帮忙看一下怎么回事&#xff0c;现在回过头来几经波折&#xff0c;回味价值太浓了。 二&#…

性能测试?

一、什么是性能测试 先看下百度百科对它的定义 性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试 我们可以认为性能测试是&#xff1a;通过在测试环境下对系统或构件的性能进行探测&#xff0c;用以验证在生产环境下系统性能…

深度学习:多模态与跨模态

1 定义 1.1 多模态学习 多模态学习&#xff08;Multimodal Learning&#xff09;是一种利用来自多种不同感官或交互方式的数据进行学习的方法。在这个语境中&#xff0c;“模态”指的是不同类型的数据输入&#xff0c;如文本、图像、声音、视频等。多模态学习的关键在于整合和…

MySQL是如何进行排序的,ORDER BY是如何执行的

MySQL 会给每个线程分配一块内存用于排序&#xff0c;称为 sort_buffer。 假设找出在杭州居住的人&#xff0c;按名字排序前1000个人&#xff08;假设city有索引&#xff0c;那么非常舒服&#xff0c;不用全表扫描&#xff09; select city,name,age from t where city杭州 or…