SuperAPI AI 工具集

wcag-accessibility-widget

通用与其它

查看项目

更新于 10-16 08:46

技能介绍

用途:为以色列 React 或 Next.js 网站构建自托管的无障碍偏好组件(悬浮按钮 + 偏好面板),并提供无障碍声明页撰写指引。技能同时说明以色列网页无障碍法规的一般要点,但明确声明这不构成法律意见,也不替代审计;组件本身不会让网站自动符合 ת"י 5568,义务落在网站自身内容与标记上。

主要能力:面板含键盘导航高亮、关闭动画、高对比、字号(小/中/大三档)、可读字体、标记标题、标记链接等开关。设置持久化在 localStorage,并以 CSS 类应用到 <html>;默认同时尊重 prefers-reduced-motion。附 WCAG AA 自检清单(跳转链接、alt 文本、对比度、键盘焦点、表单标签、ARIA、lang/dir、缩放、动效、媒体与文档、声明页)。

使用方式:组件为客户端组件,文件顶部加 "use client"。先读取已保存设置,完成后再应用并写入;避免挂载时持久化默认值覆盖用户选择。面板打开时把焦点移入,Escape 关闭并交还焦点,点击面板外关闭。切换开关用 role="switch" 与 aria-checked,尺寸用 px 固定以配合字号缩放。CSS 模式通过 html.a11y-* 类实现高对比、缩放、标记等。在 layout 里渲染于 {children} 之后,并用 <head> 内联脚本在 hydration 前应用类,避免默认样式闪烁;因脚本修改 <html> 的 class,需 suppressHydrationWarning。

限制与注意:高对比不要用 CSS filter,带 filter/transform/perspective 的祖先会成为 position:fixed 后代的包含块,导致悬浮按钮随页面底部定位。字体可读模式的 :not() 内只用简单选择器,否则旧引擎整条规则失效;它会影响 svg 文本与代码高亮内部 span。暂停自动播放视频与 GIF 需 JavaScript,CSS 无法停止。合规判断、豁免与声明内容应咨询持牌无障碍服务人员或律师。具体价格、平台授权等资料暂未提供。