跳到正文
cccskills

David Dias

@thedaviddias

Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs

467 个技能6 个仓库 7.5万

技能(467)

在搜索中筛选

aria-tooltip-name

免费有简介AI 评分 100分

检查工具提示中的补充信息能否传达给屏幕阅读器,核查无障碍名称及其与触发元素的关联,逐项指出问题,并提供修改方案和验证方法。

  • 确认工具提示能否被朗读
  • 检查触发元素与补充说明的关联
  • 审查共用工具提示组件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

ai-content

免费有简介AI 评分 90分

从事实准确性、独特价值和自然表达等方面审查AI生成的文章,帮助融入原创研究与亲身经历,并检查发布页面的HTML、元数据和响应头。

  • 核查AI生成文章的事实
  • 融入原创研究和亲身经历
  • 调整为符合品牌的表达
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

audio-descriptions

免费有简介AI 评分 100分

检查视频中仅靠画面传达的动作、表情和屏幕文字等信息,整理面向盲人及低视力用户的音频描述补充方式,以及实现时的检查要点。

  • 检查产品演示中音频未传达的信息
  • 规划动作与屏幕文字的音频描述
  • 检查视频描述相关HTML与操作
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-dialog-name

免费有简介AI 评分 100分

检查对话框的名称能否让屏幕阅读器用户了解其用途,找出标题或标签的问题,提出关联或命名方案,并说明需要检查的元素及修改后的验证方法。

  • 检查模态框的朗读名称
  • 核查警告对话框的标签
  • 审查共用对话框组件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-toggle-field-name

免费有简介AI 评分 100分

检查复选框、单选按钮和开关供屏幕阅读器朗读的名称,找出缺失或含糊的标签,提出能说明选择或切换目的的标注方案,并说明验证方法。

  • 检查复选框和单选按钮的标签
  • 核对开关名称是否说明用途
  • 修正缺失或含糊的无障碍名称
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

blocked-links

免费有简介AI 评分 80分

检查HTML和JavaScript中可能被广告拦截工具阻止的链接与外部资源,找出跳转和加载问题,并提出直接链接、自行托管脚本或服务器转发等修改方案。

  • 排查启用广告拦截后的链接故障
  • 检查外部脚本和图片能否加载
  • 检查使用跟踪重定向的链接
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-roles

免费有简介AI 评分 100分

检查向辅助技术说明页面元素作用的 ARIA 角色属性,修正拼写错误和未定义的值,并协助改用标准 HTML 元素、验证键盘操作与屏幕阅读器输出。

  • 查找角色属性拼写错误和未定义值
  • 将自定义控件替换为标准 HTML
  • 检查共用界面组件的无障碍支持
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-required-parent

免费有简介AI 评分 90分

检查菜单项、标签页等元素的ARIA角色是否位于所需的父角色内,调查影响屏幕阅读器分组识别与操作的问题,并提供合适容器等修正建议。

  • 确认菜单项所需的父角色
  • 检查标签页和列表结构
  • 审查设计系统组件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accesskeys

免费有简介AI 评分 90分

检查页面中accesskey属性值是否重复,找出键盘快捷键冲突。建议重新分配值或移除多余设置,并整理修改后的键盘操作验证方法。

  • 检查键盘快捷键是否重复
  • 审查交互元素的键盘导航
  • 验证快捷键修改后的操作行为
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

about-page

免费有简介AI 评分 90分

检查或创建说明网站用途与运营方的介绍页面,核对组织历史、使命、专业能力及联系方式,并检查实际页面输出,找出信息缺漏。

  • 检查现有的网站介绍页面
  • 创建介绍组织与使命的页面
  • 核对页面输出中的运营方信息
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-progressbar-name

免费有简介AI 评分 100分

检查进度条是否具有说明具体任务的无障碍名称,补充标签并核对进度值属性,让屏幕阅读器用户也能理解进度所代表的任务及其状态。

  • 检查进度条的无障碍名称
  • 为加载提示添加任务名称
  • 核对当前进度值及范围
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-required-children

免费有简介AI 评分 100分

检查自定义标签页、菜单等界面中,ARIA 父角色是否包含必需的子角色,指出缺失和结构问题,协助修正,使屏幕阅读器能够识别各个项目。

  • 检查自定义标签页和菜单结构
  • 排查屏幕阅读器无法识别的项目
  • 检查用 div 或 span 构建的列表与选择框
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

tooltip

免费

Use when implementing provide additional context on hover or focus.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when you need to organize and structure site navigation.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

password

免费

Use when implementing secure password entry with feedback.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when you need to search through content efficiently.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing show completion status of an operation.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing password recovery and reset flows.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing navigate through multiple pages of content.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing enter time in a structured format.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing real-time AI response streaming.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

popover

免费

Use when you need to display focused content or actions.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

sidebar

免费

Use when you need to organize and structure site navigation.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

Use when implementing product display cards for e-commerce.

中文简介正在准备中。当前显示原文说明。

thedaviddias/ux-patterns-for-developers2662026年10月5日 更新

这是你的账号吗?关联 GitHub 后可以汇总到你的创作者页面(日语)