跳到正文
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)

在搜索中筛选

article-links

免费有简介AI 评分 100分

根据文章长度和内容检查内部链接与外部链接的数量及相关性,协助补充通往相关文章的路径,以及支持事实和数据的可靠参考资料。

  • 检查文章中的链接数量
  • 添加通往相关文章的内部链接
  • 补充支持事实和数据的来源
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-valid-attr-value

免费有简介AI 评分 100分

检查向辅助技术传达界面状态和标签的ARIA属性值,找出布尔值写法错误及引用ID缺失的问题,并提供符合规范的修正方法和验证步骤。

  • 检查交互控件的ARIA属性
  • 核对ARIA属性引用的ID
  • 发布前验证无障碍修正
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-valid-attr

免费有简介AI 评分 100分

检查HTML中的ARIA属性是否存在拼写错误或规范中不存在的名称,帮助改为标准名称,并说明如何验证辅助技术能否识别元素的角色和状态。

  • 检查HTML中的ARIA属性拼写
  • 排查屏幕阅读器未读出状态的原因
  • 检查共用组件的无障碍属性
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

author-byline

免费有简介AI 评分 100分

检查文章或博客中的作者姓名、职务和个人简介链接,依据实际页面与HTML调整作者栏,并定位需要改进的页面或模板,让读者了解内容由谁撰写。

  • 检查博客中的作者信息
  • 添加作者姓名、职务与简介链接
  • 审核生成HTML中的作者信息
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-text

免费有简介AI 评分 100分

检查页面HTML,找出role="text"内部的链接、按钮等可聚焦元素,帮助修复屏幕阅读器无法识别操作控件的问题,并检查键盘操作。

  • 检查文本中的链接和按钮
  • 排查屏幕阅读器无法识别控件的原因
  • 检查设计系统组件的无障碍支持
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

autofocus-avoidance

免费有简介AI 评分 100分

检查表单的自动聚焦,排查页面加载后直接跳到输入框、略过说明文字的行为,并建议根据用户操作移动焦点,同时考虑登录页和纯搜索页的例外。

  • 检查带有说明文字的表单
  • 排查加载时的意外滚动
  • 在用户操作后移动焦点
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-deprecated-role

免费有简介AI 评分 90分

检查HTML中已弃用的ARIA角色及不应直接使用的抽象角色,协助评估推荐角色或原生HTML元素的替代方案,并梳理浏览器与屏幕阅读器可能存在的解释差异。

  • 查找现有代码中的已弃用角色
  • 评估原生HTML替代方案
  • 检查共用界面的角色设置
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

all-noindex-pages

免费有简介AI 评分 80分

检查通过HTML元标签或HTTP响应标头中的noindex排除搜索收录的页面,依据实际输出确认重要商品和文章是否被误排除,并指出问题位置及修正方法。

  • 确认重要页面是否被排除搜索收录
  • 审查管理页面和辅助页面的排除设置
  • 厘清noindex与disallow的用途
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

avif-format

免费有简介AI 评分 80分

检查网站图片及其分发设置,协助采用压缩效率较高的AVIF格式,同时检查图片尺寸与加载方式,并考虑为不支持AVIF的浏览器提供WebP或JPEG替代图片。

  • 为网站照片引入AVIF格式
  • 为不支持AVIF的浏览器提供替代图片
  • 检查首屏图片尺寸与加载方式
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

author-expertise

免费有简介AI 评分 100分

检查文章作者介绍是否展示相关经验、资质及专业主页链接,并审查渲染后的HTML、元数据、结构化数据和HTTP响应,指出作者信息在SEO方面的改进位置及验证方法。

  • 检查文章的作者介绍
  • 完善资质说明与专业主页链接
  • 审查HTML与结构化数据中的作者信息
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accessible-tooltips

免费有简介AI 评分 100分

检查工具提示能否通过键盘和屏幕阅读器使用,审查关联说明的HTML属性、悬停与聚焦时的显示、Escape键关闭及文字对比度,并指出需要修改的具体位置。

  • 检查工具提示的键盘操作
  • 确认补充说明能被屏幕阅读器读出
  • 检查显示操作与Escape键关闭
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-live-regions

免费有简介AI 评分 90分

检查表单结果、购物车更新等页面变化能否传达给屏幕阅读器用户,审查ARIA实时区域的属性与通知优先级,并指出修改位置及验证方法。

  • 检查表单结果和错误的语音通知
  • 向屏幕阅读器用户通知购物车更新
  • 检查加载状态和状态通知
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-command-name

免费有简介AI 评分 100分

检查按钮、链接和菜单项的朗读标签是否能传达操作目的,找出缺少无障碍名称的元素,并提供文本或ARIA属性的修改建议及浏览器验证步骤。

  • 检查按钮和链接的标签
  • 审查设计系统的无障碍支持
  • 修改标签后验证屏幕阅读器输出
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accessibility-testing

免费有简介AI 评分 80分

为页面和共用组件添加自动无障碍测试,检查现有测试的覆盖缺口,并将检查接入持续集成流程,以发现结构、属性问题及修改引入的新问题。

  • 检查共用组件的测试覆盖范围
  • 为页面交互测试添加无障碍检查
  • 在持续集成中运行无障碍检查
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-required-attr

免费有简介AI 评分 100分

检查表明界面控件用途的ARIA角色是否具备必需属性,结合实际呈现的HTML和交互状态,帮助补充屏幕阅读器所需的状态与数值信息。

  • 检查自定义滑块的必需属性
  • 审查共用界面组件的无障碍支持
  • 核查屏幕阅读器接收的状态信息
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-meter-name

免费有简介AI 评分 100分

检查电量、存储容量等仪表是否具有无障碍名称,找出并补充缺失的标签,让屏幕阅读器能够说明数值的含义,并提供修改后的验证方法。

  • 检查电量或容量仪表的标签
  • 为仪表添加供屏幕阅读器使用的名称
  • 检查共用界面组件中的仪表
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

accessible-tables

免费有简介AI 评分 100分

检查表头与数据单元格的对应关系,将 HTML 调整为屏幕阅读器也能传达数据含义的结构。从简单表格到包含合并单元格的复杂表格都可检查。

  • 检查表格的屏幕阅读器支持
  • 检查合并单元格与表头的关联
  • 审查设计系统中的表格
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

animated-content

免费有简介AI 评分 80分

检查网页中的大型动画GIF,通过实际测量确认其对加载和资源消耗的影响,帮助转换为MP4或WebM,并改用适合自动循环播放的视频标签。

  • 调查含有GIF的页面为何缓慢
  • 将大型GIF转换为MP4或WebM
  • 检查循环视频的播放属性
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

anchor-smooth-scroll

免费有简介AI 评分 100分

检查页内链接的滚动行为,确认减少动态效果的设置生效时能立即跳转,并检查键盘焦点是否移至目标位置,提供相应的修改方法。

  • 检查页内导航
  • 确认减少动态效果时的滚动行为
  • 修复锚点跳转后的键盘焦点
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

back-forward-cache

免费有简介AI 评分 100分

检查浏览器在后退或前进时从内存恢复页面的机制,找出阻止恢复的事件处理及恢复后信息过期的原因,并协助修改相关逻辑。

  • 排查后退或前进缓慢的原因
  • 检查阻止缓存恢复的处理逻辑
  • 修复恢复后仍显示旧信息的问题
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-labels

免费有简介AI 评分 100分

检查按钮、链接等交互元素是否具有能说明操作或目标位置的无障碍名称,指出显示文字或 aria-label 的缺失及含义不清之处,并提出具体修改建议。

  • 查找缺少名称的按钮和链接
  • 修改含义不清的标签
  • 审查共用组件的操作名称
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-hidden-focus

免费有简介AI 评分 100分

检查对屏幕阅读器隐藏的区域内,是否仍有可通过键盘聚焦的链接、按钮或输入框,指出导致焦点位置不明的问题,并提供修改方案和验证方法。

  • 检查隐藏区域中残留的交互元素
  • 排查键盘导航时朗读中断的原因
  • 审查通用界面组件的无障碍支持
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

aria-allowed-attr

免费有简介AI 评分 90分

检查界面元素的角色是否支持所设置的ARIA属性,核对输出HTML和交互状态,指出不兼容的组合并指导删除或修正,帮助屏幕阅读器正确理解元素。

  • 检查公共组件的ARIA属性
  • 审查设计系统的无障碍支持
  • 调查不符合预期的朗读
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

anchor-text

免费有简介AI 评分 100分

检查网站中“点击此处”“阅读更多”等含糊的链接文字,帮助改成能说明目标页面内容的表述,并检查渲染后的页面,支持搜索引擎和屏幕阅读器理解链接去向。

  • 修改含糊的链接文字
  • 为屏幕阅读器用户检查链接
  • 检查内部链接是否堆砌关键词
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

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