47+AI
ZH

Thedaviddias Front End Checklist

合集
@thedaviddias7.4万+开源协议: MIT

在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义,再根据需要检查键盘行为、焦点流程、可访问名称…

GitHub

x-content-type

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计任何 Web 服务器或 CDN 上的 HTTP 响应标头,以加强安全防护。
 */

x-frame-options

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于在任何具有已认证用户操作的 Web 应用程序上审查 HTTP 响应头中的点击劫持防护设置时使用。
 */

ymyl-detection

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何涉及健康、医学、金融、法律、安全、新闻或类似领域的站点。用于审计 YMYL 类别的站点内容质量,或调查看似高质量的内容为何表现不佳时使用。
 */

zoom-reflow

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与支持 400% 缩放下内容重排相关的渲染 HTML、交互组件或设计系统模式。优先检查原生语义,然后视情况检查键盘行为、焦点流程、可访问名称以及屏幕阅读…
 */

404-page

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅与 Create a custom 404 error page 相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记,而不仅仅是源…
 */

about-page

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计与「创建专属的关于页面」相关的元数据、可抓取性、结构化数据或可索引性时使用。需通过校验渲染后的 HTML 与 HTTP 响应来核实,而非仅依赖源文件。
 */

accessibility-testing

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查组件库、页面流程或 CI 流水线中需要可重复执行的可达性检查的场景。自动化测试最擅长捕捉结构层面和属性层面的问题,但它不能取代键盘、屏幕阅读器以及手动用…
 */

accessible-authentication

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查登录、注册、MFA、验证码、找回和重新认证流程时使用。评估完整的身份验证路径,包括错误处理和备用方法,而不仅仅是主要的登录表单。
 */

accessible-notifications

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与“让通知具备可访问性”相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记,而不仅仅是源代码层面的框架抽象。
 */

accessible-tables

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与「为屏幕阅读器使用语义化表格标记」相关的渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,再检查键盘行为、焦点流转、可访问名称以及屏幕阅读…
 */

accessible-tooltips

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅与创建可访问工具提示相关的模板、渲染后的 HTML 或共享组件时使用。校验最终呈现在浏览器中的标记,而不是仅仅查看源框架的抽象层。
 */

accesskeys

@thedaviddias

编程协作开源协议: MIT
/**
 * 在对已渲染的 HTML、交互组件或设计系统模式进行审查时使用,重点是确保 accesskey 的取值唯一。优先检查原生语义,再视情况审查键盘行为、焦点流转、可访…
 */

accordion-accessibility

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查模板、渲染后的 HTML 或与“使手风琴可键盘导航”相关的共享组件时使用。验证最终面向浏览器的标记,而不仅仅是源框架的抽象。
 */

affiliate-disclosure

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与 Provide clear affiliate disclosures 相关的元数据、可抓取性、结构化数据或可索引性时使用。请验证渲染后的 HTML …
 */

all-noindex-pages

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与 Audit all noindex pages 相关的元数据、可抓取性、结构化数据或可索引性时使用。通过验证渲染后的 HTML 和 HTTP 响应,而…
 */

alt-text

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与图片相关的资源、标记以及 CDN 或构建产物变换时使用。为图片提供有意义的 alt 文本。同时检查编码后大小、渲染后大小、加载策略以及对首屏的影响。
 */

anchor-smooth-scroll

@thedaviddias

编程协作开源协议: MIT
/**
 * Use when reviewing rendered HTML, interactive components, or design-system patte…
 */

anchor-text

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与"使用描述性锚文本"相关的元数据、可爬取性、结构化数据或可索引性时使用。需验证渲染后的 HTML 与 HTTP 响应,而非仅依赖源文件。
 */

animated-content

@thedaviddias

编程协作开源协议: MIT
/**
 * 在排查与「将动画 GIF 转换为视频」相关的页面加载缓慢、资源过重或渲染延迟时使用。在给出修改建议之前,请先在 DevTools、Lighthouse 或线上真…
 */

animation-performance

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与「动画使用 transform 和 opacity」相关的样式表、组件样式和响应式行为时使用。在提出修复方案前,先在各个断点和交互态下检查渲染后的布局。
 */

aria-allowed-attr

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅渲染后的 HTML、交互组件或与"每个角色仅使用允许的 ARIA 属性"相关的设计系统模式时使用。优先检查原生语义,其次在相关时检查键盘行为、焦点流转、可…
 */

aria-command-name

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与“为 ARIA command 元素提供可访问名称”相关的已渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,然后根据需要审查键盘行为、焦…
 */

aria-deprecated-role

@thedaviddias

编程协作开源协议: MIT
/**
 * 在对渲染后的 HTML、交互组件或与“避免使用已弃用的 ARIA 角色”相关的设计系统模式进行审查时使用。优先检查原生语义,然后在相关场景下检查键盘行为、焦点流…
 */

aria-dialog-name

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“确保对话框具有可访问名称”相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,再根据需要审视键盘行为、焦点流转、可访问名称以及屏幕…
 */