Thedaviddias Front End Checklist
合集@thedaviddias7.4万+开源协议: MIT
在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义,再根据需要检查键盘行为、焦点流程、可访问名称…
focus-management
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查渲染后的 HTML、交互组件或与「在动态交互中管理焦点」相关的设计系统模式时使用。优先检查原生语义,然后视情况检查键盘行为、焦点流转、可访问名称以及屏幕阅…
*/focus-not-obscured
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查粘性导航、同意横幅、聊天小部件、跳转链接或任何固定定位 UI 时使用。需要在真实缩放比例下验证实际的 Tab 顺序和视口行为。
*/focus-order
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查渲染后的 HTML、可交互组件或与「确保逻辑焦点顺序」相关的设计系统模式时使用。优先检查原生语义,再按需检视键盘行为、焦点流转、可访问名称以及屏幕阅读器输…
*/focus-styles
@thedaviddias
编程协作开源协议: MIT
/**
* 在检查与自定义可见焦点指示器相关的样式表、组件样式和响应式行为时使用。提出修复方案前,先检查不同断点和交互状态下渲染后的布局。
*/font-loading
@thedaviddias
编程协作开源协议: MIT
/**
* 在审计与 Optimize web font loading 相关的页面加载缓慢、资源过重或渲染延迟时使用。在提出修改建议之前,应先在 DevTools、Lig…
*/font-size
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于所有 CSS `font-size` 声明,特别是正文字体、UI 标签和导航中使用 `px` 单位的声明。适用于审查移动端响应式和无障碍合规性。检查针对小…
*/form-captcha
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查公开的 HTML 表单(无需身份验证即可访问)是否具备机器人与滥用防护机制。
*/form-field-multiple-labels
@thedaviddias
编程协作开源协议: MIT
/**
* 用于检查已渲染的 HTML、交互组件或与“每个表单字段使用单一标签”相关的设计系统模式。优先检查原生语义,然后根据需要检查键盘行为、焦点流转、可访问名称以及屏幕…
*/form-https
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查 HTML 表单、fetch/XHR 调用以及表单 action 属性,确保数据仅通过 HTTPS 提交。
*/form-labels
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查渲染后的 HTML、交互组件或与表单控件关联标签相关的设计系统模式时使用。优先检查原生语义,然后根据需要检查键盘行为、焦点流转、可访问名称以及屏幕阅读器输…
*/form-validation
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与"以无障碍方式验证表单"相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记,而不仅仅是源框架的抽象层。要区分浏览器提交的表单与…
*/frame-title
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查已渲染的 HTML、交互组件或与“为 iframe 和 frame 提供标题”相关的设计系统模式。优先检查原生语义,再根据需要检查键盘行为、焦点流程、可…
*/freshness
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计内容页面的新鲜度信号、在 Web 服务器配置中设置 HTTP Last-Modified 响应头,或确保在 CMS 内容变更时更新 Article JS…
*/frontend-checklist-global
@thedaviddias
编程协作开源协议: MIT
/**
* 用于通过单一入口对任意前端代码库,按照完整的 Front-End Checklist 规则库进行审计或改进时使用。
*/geo-meta
@thedaviddias
编程协作开源协议: MIT
/**
* 用于在面向本地或区域受众的页面(特别是面向必应或区域性搜索引擎的站点)上审查地理定向信号。注意:这些 meta 标签对谷歌排名没有已记录的效用。
*/gtm-present
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计与 Optimize Google Tag Manager 实现相关的页面加载缓慢、资源过重或渲染延迟问题。在提出变更建议之前,先在 DevTools、…
*/h1
@thedaviddias
设计多媒体开源协议: MIT
/**
* Use when auditing a page's heading structure, generating H1 text for landing pag
*/has-selector
@thedaviddias
编程协作开源协议: MIT
/**
* 当审查使用 JavaScript 基于子元素状态、表单输入值或内容存在与否在父元素上切换类名的样式表或组件时使用——:has() 可能会完全替代这些 JavaS…
*/heading-hierarchy
@thedaviddias
编程协作开源协议: MIT
/**
* 在审查与“使用合理的标题层级”相关的已渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,然后根据需要检查键盘行为、焦点流转、可访问名称以及屏幕阅读…
*/heading-order
@thedaviddias
编程协作开源协议: MIT
/**
* Use when reviewing rendered HTML, interactive components, or design-system patte
*/horizontal-scroll
@thedaviddias
编程协作开源协议: MIT
/**
* 适用于所有 CSS 布局规则时使用。检查 `width`、`min-width`、容器上的固定像素值、`overflow`、`white-space` 和 `w…
*/hreflang
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审计与多语言站点的 hreflang 标签相关的元数据、可抓取性、结构化数据或可索引性。需要验证渲染后的 HTML 和 HTTP 响应,而不仅仅依赖源文件。
*/hsts
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查任何通过 HTTPS 提供内容的站点的 HTTP 响应头时使用。
*/html-resource-hints
@thedaviddias
编程协作开源协议: MIT
/**
* 用于审查与添加资源提示(preload、prefetch、dns-prefetch)相关的模板、渲染后的 HTML 或共享组件时使用。需要校验最终面向浏览器的标…
*/