构建方便残障人士使用的网站 web enhance the accessibility

news2024/12/28 20:12:12

文章目录

    • 前言
    • 检测网站是否符合残障人士使用
      • window版软件
      • edge浏览器插件版
    • 前端开发为残障人士的通用标准
      • img标签
      • a标签
      • 字体与颜色
      • 显示或隐藏的元素
      • 可交互的元素
      • 标记元素类别
    • 总结

前言

网站的构建往往会忽略一群特殊的人群,在某些方便存在障碍的网民,比如帕金森综合征,红绿色盲,视力存在一定问题等。

帕金森综合征是无法正常使用鼠标的,所以只能依靠键盘来与网站交互。还有颜色辨识障碍的,可能对哪些可交互,哪些不可交互无法准确识别。视力存在问题就更加麻烦,他们也许需要将字体放大或者完全依靠读屏软件辅助识别网站的类容。

目前国内对这些群体在网站上的体验并没有太大关注,因此开发者也并未思考过,如何帮助这特殊人群浏览自己编码的网站。

实际上,web有一套标准用来指导开发者,如何在编码的过程中,帮助他们。

检测网站是否符合残障人士使用

洞察某些网站或者应用软件是否符合残障人士使用标准的软件https://accessibilityinsights.io/downloads/

你可以使用浏览器插件,也可以将软件下载下来使用,最好的方式是两者都使用,因为扫描出来的结果不一致,它们的侧重点不同。

window版软件

shfit + f6 后锁定你要扫描的目标,然后点击红标icon开始进行扫描,以我的博客网站首页为例
在这里插入图片描述
在这里插入图片描述
带有红标的就表示软件扫描出来有一些问题,然后根据下方的提示,依次去解决。

edge浏览器插件版

浏览器插件也能扫描出来,针对网站,使用更方便,点击fastpass即可自动开始扫描但结果有些不同

在这里插入图片描述
在这里插入图片描述
当你点开一个红色的提示,会有一个弹层说明存在问题的元素,并给出修复的方案。
在这里插入图片描述
比如上面这个红色提示就是说字体颜色和背景颜色的对比度不够,可能不利于色弱的人浏览网站。

前端开发为残障人士的通用标准

其实这个标准内容还是蛮多的,这里进行一些常用场景的举例,更多的标准,将会在结尾链接到外站。

img标签

在日常使用img标签的时候,我们除了规定img标签的宽高来提高渲染性能时,还需要为alt属性赋值,让读屏软件能够识别这是一张图片,并简短介绍图片的内容。

a标签

a标签不可滥用,必须是能够被交互的元素,并且需要加上title属性,能够介绍这个a标签的内容。需要为所有的a标签添加下划线,让它看起来更像是一个可点击的链接。

字体与颜色

从设计开始就需要注意字体的大小和字体颜色与背景色或者周围字体颜色的对比度。特别是那些可以交互元素的字体颜色,一定要与周围的颜色形成鲜明对比,字体不能太小,尽可能将最小字体设置成14px。

显示或隐藏的元素

网页的展示总不会是一层不变的,可能随着交互的过程,某些元素会出现或者消失,所有会出现或者消失的元素,都需要加上aria-hidden=true这个属性,比如在vue中的v-if v-else

可交互的元素

页面上有存展示的元素,也有可以让用户交互的元素,点击,输入之类的。
这些可以交互的元素,需要加上tabindex属性,让用户通过点击键盘的tab按键,就能在各个可交互元素之间不断切换,如果是可输入的元素,比如input,textarea等,都需要在选中时添加自动聚焦事件。

标记元素类别

可交互元素种类繁多,功能也千奇百怪,通过html5的语义化开发,已经不足以说明所有网站元素的功能,比如alert功能,没有alert标签;dialog功能,没有dialog标签;明明是一个button点击功能,可能是用span标签实现的;等等。
很多时候我们需要添加role属性,来告诉读屏软件,这个元素的功能到底是什么,比如用一个span标签实现了一个button的功能,我们需要在span标签上添加role="button",如果是一种鼠标放上去提示的tooltip,就需要添加role="tooltip" 等等。
更多role定义的规则,请参考 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

总结

其实还有特别多的文档规范,我们在开发过程中不一定需要全部遵守,但如果用扫描软件出现了问题,请参考这些文档规范进行相应的修改 https://developer.mozilla.org/en-US/docs/Web

看了上面这些内容,开发人员可能会觉得很麻烦,但对于那些真正需要的群体来说,就好比街道上的盲道对于盲人的重要性。开发一个网站,不可能满足所有人的需求,如果一些残障人群通过你的网站或者软件,也能正常体验并使用部分功能,也许能让他们觉得互联网也是有温度的。以上是作为一名前端开发人员的思考。

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

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

相关文章

Docker镜像管理

Docker 概述 Docker是什么 Docker是一个开源的应用容器引擎,基于go语言开发并遵循了apache2.0协议开源。 Docker是在Linux容器里运行应用的开源工具,是一种轻量级的“虚拟机”。 Docker 的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移…

基于状态的维护(CBM)如何推动设备效率提高?

基于状态的维护(Condition-Based Maintenance,CBM)是一种先进的维护策略,通过实时监测和分析设备的状态数据,预测设备故障并采取相应的维护措施。CBM基于数据驱动的方法,能够提高设备的可用性、降低维修成本…

PDF怎么转成PPT文件免费?分享几个方法!

PDF文件和PPT文件是常见的两类文件,广泛应用于打工人和学生党之间。每种文件格式都有自己的优势,在不同的情况下使用。PDF格式具有出色的浏览效果,能有效保护文档内容免受随意篡改,而且在传输过程中不会出现乱码问题。然而&#x…

Apifox 发请求时如何自动获取Cookie 和 token

介绍 用户登录到网站或 App 是非常常见的的场景,登录成功后一般会返回登录凭证(一般为 Cookie 或者 token),后续其它接口发起请求时会携带 Cookie 或者 token 到服务器进行校验。校验通过,则返回相关的数据&#xff0…

【Linux网络编程】应用层HTTP协议篇

应用层 一、应用层1.1、再谈协议1.2、HTTP协议1.2.1、认识URL1.2.2、urlencode和urldecode1.2.3、HTTP协议格式1.2.4、HTTP的方法1.2.5、HTTP的状态码1.2.6、HTTP常见的Header 二、结合代码理解HTTP通信流程 一、应用层 程序员写的一个个解决我们实际问题, 满足我们日常需求的…

Stable Diffusion原理说明

本文参考:深入浅出讲解Stable Diffusion原理,新手也能看明白 - 知乎 目录 1、Stable Diffusion能做什么? 2、扩散模型(Diffusion model) (1)前向扩散(Forward Diffusion&#xff…

Simple-BEV:多传感器BEV感知中真正重要的是什么?

文章:Simple-BEV: What Really Matters for Multi-Sensor BEV Perception? 作者:Adam W. Harley , Zhaoyuan Fang,Jie Li,Rares Ambrus , Katerina Fragkiadaki 编辑:点云PCL 代码:…

华为OD机试之查找接口成功率最优时间段(Java源码)

查找接口成功率最优时间段 题目描述 服务之间交换的接口成功率作为服务调用关键质量特性,某个时间段内的接口失败率使用一个数组表示,数组中每个元素都是单位时间内失败率数值,数组中的数值为0~100的整数,给定一个数值(minAverag…

【Web服务应用】Apache配置与应用

Apache配置与应用 一、构建虚拟Web主机1.1httpd服务支持的虚拟主机类型包括以下三种 二、基于域名的虚拟主机三、基于IP地址的虚拟主机四、基于端口的虚拟机五、Apache连接保持六、构建Web虚拟目录与用户授权限制七、日志分割 一、构建虚拟Web主机 虚拟Web主机指的是在同一台服…

手把手教你部署FreeYOLO

作者:Kissrabbit 原文链接: https://zhuanlan.zhihu.com/p/578830729 本章将讲解如何将torch训练好的权重文件转换为ONNX文件,并如何部署回到OpenVINO、TensorRT等框架下。笔者将以自己的FreeYOLO项目为例,来完成本章的内容讲解,相关代码如下…

企业数字化转型转什么?怎么转?这份攻略请收好...

数字化转型,转什么?怎么转?这些问题仍在困扰不少企业,也是每个企业转型升级不得不思考的重要问题。 对此,中关村数字经济产业联盟、元年研究院、《管理会计研究》联合发布了《成就数据驱动型企业 中国企业数字化转型白…

ROS订阅与发布话题

目录 一、新建一个ROS工作空间并创建功能包 二、创建一个msg消息 三、发布话题 四、订阅话题 前言 Ubuntu18.04 ROS Melodic 一、新建一个ROS工作空间并创建功能包 mkdir -p catkin_ws/src cd ~/catkin_ws/src/ catkin_init_workspace cd ~/catkin_ws/ catkin_make echo &…

USB接口的演变与升级

USB接口是计算机与外部设备之间传输数据的重要接口之一,它的演变和升级经历了多年的发展。本文将详细介绍USB接口的发展历程、应用领域、标准化进程以及未来趋势。 USB接口最早出现在1994年,当时是由英特尔公司、微软公司和惠普公司共同开发的。这个接口…

React中useEffect的源码解读

对源码的解读有利于搞清楚Hooks到底做了什么,如果您觉得useEffect很“魔法”,这篇文章也许对您有些帮助。 本篇博客篇幅有限,只看useEffect,力求简单明了,带您到React Hooks的深处看看 按图索骥找到Hook相关源码&…

JavaWeb之Servlet

1、什么是JavaWeb? Servlet 是 JavaEE 规范之一。规范就是接口 Servlet 就 JavaWeb 三大组件之一。三大组件分别是:Servlet 程序、Filter 过滤器、Listener 监听器。 Servlet 是运行在服务器上的一个 java 小程序,它可以接收客户端发送过来的…

Python plt; ax 设置tick

Python中绘图可以基于plt;也可基于ax 在 Matplotlib 中,Axes 对象(常简写为 ax)是在图(Figure)中进行大部分的绘图操作的地方。一个 Axes 对象代表了一个具体的绘图区域。 利用 plt 绘图 简单的图像测试…

继续探索Roop(单张图视频换脸)的各方面:比如喜闻乐见的“加速”

文章目录 (一)Roop项目的特点(二)Roop也能加速***(三)Roop更新和依赖(3.1)飞速更新(3.2)依赖问题(3.3)需要CUDA么 前两天写了&#x1…

如何修复vcruntime140.dll文件?多种解决vcruntime140.dll的方法分享

在使用Windows操作系统时,经常会遇到一些错误提示,比如缺少vcruntime140.dll文件。这个文件是Visual C Redistributable Package的一部分,它负责运行C程序。如果你在运行某些软件或游戏时收到了“缺少vcruntime140.dll文件”的错误提示&#…

电子科技大学计算机系统结构半期考试参考答案

2023 答案-半期试题(15分) 1、试分析采用哪种设计方案实现求浮点数乘法FPMUL对系统性能提高更大。假定FPMUL操作占整个测试程序执行时间的10%。 一种设计方案是增加专门的FPMUL硬件,可以将FPMUL操作的速度加快到10倍&#…

IP协议与ethernet协议

一、IP协议 1.IP协议作用和意义 (1)计算机网络体系结构 (2)网络互联使用路由器 (3)IP网的意义 当互联网上的主机进行通信时,就好像在一个网络上通信一样,看不见互连的各具体的网络…