首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏ThoughtWorks

    无障碍性测试工具 Pa11y|技术雷达

    以Web Content为例,比较常见的规则有W3C组织在2008年出台的WCAG2.0,和美国国家标准的Section508等等。 它利用PhantomJS的headless模式运行需要被测试的网站,然后把网页源文件和指定的规则(比如WCAG2AAA)做对比,自动检查出网页内容是否符合规范,同时会把检查结果输出成指定格式的报告。 Pa11y工具支持选择WCAG2.0 A/AA/AAA标准和Section508标准,也支持忽略这些标准中某些特定的项。通过设置参数,还可以改变输出报告的格式,比如输出CSV或者HTML格式的报告。 然而在目前的版本中,仍然有一些可以继续关注的地方,比如: 目前所支持的标准仅有WCAG2.0和Section508,将来是否会扩展新的规则支持方案。 2017年的WCAG2.1标准已经发布β版本,Pa11y应该如何做相应更新值得期待。 如何提升对不同浏览器的检查支持。

    1.2K50发布于 2018-04-17
  • 来自专栏网络安全技术点滴分享

    AdminLTE - 完全响应式Bootstrap 5管理仪表盘

    功能特性WCAG 2.1 AA合规性功能原则1:可感知性所有装饰性图标都有aria-hidden="true"有意义图像有适当的alt文本使用屏幕阅读器友好的图标字体方法语义化的HTML结构和适当的地标表单标签与输入正确关联表格标题有正确的 cardWidget.expand() // 展开卡片 cardWidget.toggle() // 切换卡片状态}核心代码无障碍管理器核心/** * AdminLTE无障碍模块 * WCAG this.createLiveRegion() } if (this.config.skipLinks) { this.addSkipLinks() } // 其他初始化... } // WCAG ) this.liveRegion.setAttribute('role', 'status') document.body.append(this.liveRegion) } // WCAG

    72010编辑于 2025-08-02
  • 来自专栏深度学习与python

    如何提高 Web 可访问性,让残障人士拥有更好的体验?

    万维网联盟 Web 可访问性推进组织制定了 Web 内容可访问性指南,即 WCAG,以便残疾人士(包括视觉、听觉、身体、语音、认知、语言、学习和神经系统残疾)可以更方便的访问 Web 内容。 第一套指南 WCAG 1.0 于 1999 年 5 月发布,并于 2008 年 12 月更新为 WCAG 2.0,于 2018 年 6 月更新为 WCAG 2.1。 WCAG 2.2 计划于 2022 年 6 月发布,WCAG 3.0 则计划于几年后发布。 WCAG 的更新总是向后兼容。因此,如果符合 WCAG 2.1,也必将符合 WCAG 2.0。 对于 WCAG 指南的每个版本,成功标准有三个等级 —— A、AA 和 AAA。 目前,所有涉及组件设计或开发的 Viget 项目都致力于实现 WCAG 2.1 AA 级标准。

    1.3K20编辑于 2022-11-28
  • 来自专栏互联网杂技

    20个为前端开发者准备的文档和指南7

    Interactive WCAG 2.0(交互式的WCAG2.0) WCAG2.0介绍的链接地址: http://baike.sogou.com/v10626070.htm? fromTitle=wcag 它是为不同的UI元素制作的一个Web内容权限指南的列表,可以通过WCAG水平级别或者根据职责功能(包括前端,设计,用户体验等等。)来过滤所需内容。

    1.1K50发布于 2018-04-03
  • 来自专栏司想君

    2017前端开发手册四-前端开发人员应该掌握的Web技术

    编程语言(或者叫ECMAScript 262) JavaScript对象符号(又名JSON) 文档对象模型(DOM又名) 网络的API(又名HTML5和朋友或浏览器的API) Web内容无障碍指南(又名WCAG - 维基百科 最相关的指标: JSON简介 JSON API JSON数据交换格式 9 Web内容无障碍指南(又名WCAG)无障碍富互联网应用程序(又名ARIA) 可访问性是指产品,设备,服务或环境为残疾人士设计 - 维基百科 无障碍富互联网应用程序(WAI-ARIA)现状 无障碍网页倡议(WAI) Web内容无障碍指南(WCAG)现状

    1.9K80发布于 2018-03-01
  • 来自专栏终身学习者

    前端如何提高用户体验:增强可点击区域的大小

    WCAG准则 WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍 举个例子,在WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容。 用户应该能够使用台式机/笔记本电脑上的键盘以及移动设备或平板电脑上的触摸屏来操作输入。 注意:记住WCAG准则 和费兹法则 的概念。 按钮 在需要时使用实际真实<button>(包含可点击区域)非常重要。

    6.7K20发布于 2020-07-08
  • 来自专栏FunTester

    可访问性测试(无障碍测试)

    推荐工具 # 1) QualityLogic QualityLogic是最好的易访问性测试服务提供商之一,您可以轻松获得WCAG 2.1 AA和AAA认证。 他们以拥有合格的WCAG测试技术人员而闻名,他们执行自动、手动和回归测试,之后他们会奖励你一个证书,证明你的网站完全符合WCAG标准。 手工测试由熟练的WCAG测试技术人员完成。 生成包含错误摘要的遵从性报告。 执行回归测试以确保完全符合WCAG 2.1 AA和AAA标准。 关于测试网站可访问性的误区 误解1:它很贵。 web的可访问性可以通过W3C创建的web内容可访问性准则(WCAG)来衡量。很少有其他部门也制定了自己的指南,但这些指南也遵循了Web无障碍倡议(WAI)指南。 #7) TAW在线:它让你可以选择测试检查软件是否按照WCAG 1.0或WCAG 2.0的指导方针开发。它还可以选择分析级别。 #8) PDF可访问性检查器:它检查PDF文件的可访问性。

    1.5K51编辑于 2023-08-04
  • 来自专栏从头开始学习测试开发

    测试工程师的终极外挂:testers.ai 如何用“AI Skills”让你在 IDE、浏览器、Claude 里一键生成+修复+分析测试?

    你在 Claude Desktop 里输入:“帮我测试登录页的无障碍合规性,并输出 WCAG 报告”,它调用专业工具完成分析并返回结构化结果。 IDE** 核心测试生成与调试 开发新功能时快速覆盖 **Testers Dynamic** 动态定位器自愈 维护老脚本,对抗 UI 变更 **Accessibility Tester AI** 自动 WCAG 输入自然语言指令,如: “为这个 React 组件写个 Playwright 测试” “检查当前页面是否符合 WCAG 2.1 AA 标准” ✅ 优势:无需切换上下文,测试与开发无缝融合。 使用 axe-core + LLM 分析 npx axe https://myapp.com --save results.json ollama run qwen "分析以下 axe 结果,输出中文 WCAG

    34401编辑于 2026-03-31
  • 来自专栏IT技能应用

    「Adobe国际认证」色彩对比:只是为了美观和易用性?

    WCAG(Web 内容可访问性指南)2.0 提供了特定的指南,通过使用比率来确保前景(文本、图像等)和背景之间的颜色对比度是合适的。该比率还根据所使用文本的大小和重量而变化。 WCAG 2.0 表示对比度是对两种颜色之间感知亮度差异的度量。这种差异用 1:1(可能的最低对比度;白底白字)和 21:1(可能的最高对比度;白底黑字,反之亦然)之间的比率表示。 WCAG 列出的最低对比度为4.5:1,但网络上的大文本、徽标或故意低对比度除外。所用颜色的十六进制值是测量对比度所必需的。

    96500发布于 2021-07-27
  • 来自专栏终身学习者

    不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

    免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验 为什么 尽管一些网页设计工具为按钮等元素指定了 CSS 高度值,但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success 如果文本被设备大小截断,这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险: SC 1.4.4 调整文本大小 SC 1.4.10 重排 在使用技术 C28 时,防止出现这种情况的一种方法是利用

    1.9K10编辑于 2024-02-12
  • 来自专栏鱼头的Web海洋

    写前端代码时请多为残障人士思考之『Accessibility』

    WCAG Web内容可访问性指南(WCAG)是由互联网的主要国际标准组织万维网联盟(W3C)的Web可访问性倡议(WAI)发布的一系列Web可访问性指南的一部分。 WCAG2.0,于2008年12月发布,并于2012年10月成为国际标准化组织标准,ISO/IEC 40500:2012。WCAG 2.1于2018年6月成为W3C推荐标准。 WCAG主要指南[6]如下: 可感知性(Perceivable) 信息和用户界面组件必须以可感知的方式呈现给用户。 前言 WAI-ARIA是A11Y应用规范,主要就是针对于上述的障碍类型以及WCAG要求的技术细则,运用好这些技术细则,那么浏览障碍人士便能轻松访问我们的应用。

    2K20发布于 2020-04-16
  • 来自专栏程序员成长指北

    从0开始编写一个开关组件

    如果你想以函数和样式来构建一个原生开关,那么你需要看看ARIA开关作用, 你会立即明白,一个开关会影响一个应用程序, 用纯文本向用户去解释这一点, 你会意识到, 如果不能正确做到这一点,就会带来一个A级WCAG 违反(Level A WCAG violation)。 回顾 本文包含的内容: 只使用带有CSS的复选框来增强它们; 支持禁用控件; 支持混合状态的复选框; 按文本样式缩放,符合WCAG 1.4.12:文本间距(A); 颜色达到至少3:1对比度,符合WCAG

    3.3K20发布于 2020-08-27
  • 来自专栏ThoughtWorks

    前端不止:Web内容的无障碍性 | 洞见

    所以我来举个例子: 比如,澳大利亚政府的“网络可访问性国内过渡战略”(NTS)规定,所有政府网站及其内容必须在 2012 年 12 月 31 日以前达到 WCAG 2.0 的 A 级合规要求,并在 2014 WCAG是万维网联盟(W3C)发布的一套名为“Web Content Accessibility Guidelines (WCAG) ”的网络内容可访问性指引。该指引目前是网络可访问性的国际标准。 相关达到 WCAG 2.0 的 A 级合规要求的网站,例如:澳大利亚官方政府网站,澳大利亚政府留学网站等,体验一下他们在Web内容无障碍性的一些实践,比如:只通过tab和enter来导航到不同的网站区域 (文字和背景的颜色对比) WCAG 2.0 的1.4.3条对页面上文字的对比度有一个最低的要求4.5 : 1,目的很明显是为了保证色盲/色弱人群可以无障碍的访问网站的内容。

    1.2K30发布于 2018-07-23
  • 来自专栏InvQ的专栏

    JAVA开源的html转pdf、png转pdf项目

    提供适当的支持生成无障碍PDF(Section 508,PDF/UA,WCAG 2.0)。 提供适当的支持生成符合PDF/A标准的PDF。

    1.7K10编辑于 2024-07-31
  • 来自专栏软件测试

    让你大开眼界的网页无障碍(Accessibility)测试秘诀

    国际通用的《网页内容无障碍指南》(WCAG)为这一目标提供了具体的技术标准和实施框架。一、确保键盘导航的逻辑性与可见性对于上肢活动不便或无法使用鼠标的用户,键盘通常是浏览网页的主要工具。 AxeDevTools:能精确定位到产生问题的代码,提供具体修复方案并关联至相关WCAG成功标准。这极大提升了开发团队修复缺陷的效率和准确性。此类工具可集成至持续集成流程,实现早期、自动化的合规检查。

    22500编辑于 2025-12-29
  • 来自专栏Coco的专栏

    扫盲贴:2021 CSS 最冷门特性都是些啥?

    ) ,可以在后面制定一个数值,或者 WCAG 规范强度,可选值 AA 表示数值 4.5 AA-large 表示数值 3 AAA 表示数值 7 AAA-large 表示数值 4.5 实际使用如下: { 什么是 WCAG 规范 另外一个前置知识,了解 WCAG 规范。 在可访问性(也叫无障碍设计,Accessbililty,A11y)中,有个最权威的互联网无障碍规范 —— WCAG,制定了互联网无障碍相关的方方面面规矩。

    63130编辑于 2022-03-10
  • 来自专栏从头开始学习测试开发

    超越流程图:架构图与原型图的 AI 解析与非功能测试用例生成

    AI 的任务: 识别所有交互元素(按钮、输入框) 分析其位置、尺寸、颜色 生成多端兼容性检查点 和 WCAG 2.1 A11Y 合规报告 技术方案: Step 1: UI 元素检测 —— 不只是 OCR b) **A11Y 检查点**:文字与背景的对比度是否 ≥ 4.5:1 (WCAG AA 标准)? 释放 QA 专家的核心价值 工程师无需再花费数小时研究 WCAG 标准或 JMeter 配置,而是聚焦于: 审核 AI 生成的测试资产 设计更复杂的混沌工程场景 优化用户体验 3.

    11700编辑于 2026-03-31
  • 来自专栏C/C++的自学之路

    VSCode主题设计大赛

    参赛要求 作品需适配VSCode最新稳定版,支持主流语法高亮 提交内容包括主题文件、预览图及设计说明文档 禁止抄袭或使用未授权素材 主题设计技术要点 色彩系统设计 遵循WCAG 2.1对比度标准,确保可读性

    13500编辑于 2025-06-11
  • 来自专栏畅所欲言

    【WordPress】Nova WordPress 主题:为内容创作者打造的极致体验

    无障碍访问:遵循 WCAG 2.1 标准,确保所有用户都能无障碍访问。 二、安装与设置 安装方式:支持 WordPress 后台直接上传或通过 FTP 上传。

    21310编辑于 2025-10-29
  • 来自专栏MixLab科技+设计实验室

    关于无障碍设计的七件事

    确保文本与其背景保持足够的对比 根据WCAG,文本和文本背景之间的对比度至少保持在4.5:1。如果你使用的字体是24px或18px加粗,那这个比例为最小值—3:1。 译者注:WCAG(Web内容无障碍指南)涵盖范围广泛,提供了一些原则和建议。当根据WCAG来设计和开发时,可以使网站内容更易被有障碍的人士所接受。 译者注:Color Safe(http://colorsafe.co/)根据你输入的背景色,生成符合WCAG的字体颜色的可选色板。 ? WebAIM颜色对比度检查器(https://webaim.org/resources/contrastchecker/)根据你输入的字体颜色和背景颜色,检查是否符合WCAG标准。 ?

    4.3K30发布于 2019-05-05
领券