0

0

无障碍 (a) 规则 - 4

霞舞

霞舞

发布时间:2024-11-17 08:45:13

|

532人浏览过

|

来源于dev.to

转载

无障碍 (a) 规则 - 4

颜色和对比度

  • 常规尺寸的文本(包括文本图像)的颜色对比度必须为 4.5:1。

  • 大尺寸文本(18pt / 24px 或 14pt / 18.5px 粗体)和基本图标的颜色对比度必须为 3:1。

  • 要了解颜色对比度,请使用 google Chrome 的 DevTools 颜色选择器。

  • 在图形、图表和表格中的颜色旁边添加额外的标识符,例如图案、文本或图标,以增强所有用户对内容的理解。

  • 使用 @prefers-color-scheme 创建深色主题。

  • 创建高对比度主题@prefers-contrast。

动画和运动

闪烁和移动的内容

  • 请勿包含任何在一秒内闪烁超过 3 次的任何内容。

  • 低于一般闪光和红色闪光阈值的闪光。

暂停、停止或隐藏运动

  • 在页面中添加暂停、停止或隐藏机制,以允许用户关闭可能有问题的运动动画。

  • 可以在屏幕级别或元素级别执行此操作。

使用媒体查询

  • 在 @prefers-reduced-motion 媒体查询的帮助下,检查与尊重这些偏好的动画和设计网站相关的用户操作系统设置。

版式

  • 创建无障碍设计的最快方法是选择通用字体(例如 Arial、Times New Roman、Calibri、Verdana 等)。

  • 避免使用华丽或手写的字体,以及只有一种字符大小写的字体(例如,只有大写字符)。

    X-Node企业快速建站1.0.6.0801
    X-Node企业快速建站1.0.6.0801

    特色介绍: 1、ASP+XML+XSLT开发,代码、界面、样式全分离,可快速开发 2、支持语言包,支持多模板,ASP文件中无任何HTML or 中文 3、无限级分类,无限级菜单,自由排序 4、自定义版头(用于不规则页面) 5、自动查找无用的上传文件与空目录,并有回收站,可删除、还原、永久删除 6、增强的Cache管理,可单独管理单个Cache 7、以内存和XML做为Cache,兼顾性能与消耗 8、

    下载
  • 当您寻找字体时,请特别注意以下几点:

    • 尽可能使用常用字体。
    • 避免使用复杂或手写的字体以及只有一种字符大小写的字体。
    • 选择具有独特特征的字体 - 特别注意大写 I、小写 l 和 1。
    • 检查某些字母组合,确保它们不是彼此的精确镜像。
    • 检查字偶距,尤其是 r 和 n 字母对之间。

字体大小和排版样式

  • 基本字体大小应使用相对值(%、rem 或 em)定义,以允许调整大小。

  • 限制字体变化的数量,例如颜色、粗体、全部大写和斜体,以提高可读性。相反,使用方法来强调副本中的单词,例如星号、破折号或突出显示单个单词。

  • 尽可能在图像上使用标记而不是文本。屏幕阅读器无法读取图像上的嵌入文本(无需添加额外代码),并且嵌入文本在被弱视用户放大时也会变得像素化。

结构及布局

  • 关键元素应该彼此不同,相似的元素应该分组在一起。

间距

  • 文本块应保持狭窄,以提高可读性并帮助残障读者更轻松地理解内容。

内容对齐

  • 避免对齐文本,因为间距不均匀会影响可读性,尤其是对于残疾人而言。它还会扭曲单词间距,使单词边界难以识别。

  • 间距和良好行高和黄金比例计算器等工具可帮助使副本更易于访问。

结构和布局的最佳实践

  • 使用标题、副标题、列表、数字、引用块和其他视觉分组等元素将页面分成几个部分。

  • 使用明确定义的段落、句子和单词间距。

  • 构建宽度小于 80 个字符的文案列(语标为 40 个字符)。

  • 避免段落对齐,这会在文案中产生“空间之河”。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

864

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

749

2023.11.06

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

183

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

289

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

259

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

126

2025.08.07

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 5.1万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 8.2万人学习

Git 教程
Git 教程

共21课时 | 3.2万人学习

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

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