检查页面是否仅有一个标识主要内容的main区域,找出缺失或重复的情况并提供修正方法,为屏幕阅读器用户明确跳转到正文的目标。
- 检查页面模板的main区域
- 修正组合布局中重复的main区域
- 用屏幕阅读器验证正文跳转
@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万
检查页面是否仅有一个标识主要内容的main区域,找出缺失或重复的情况并提供修正方法,为屏幕阅读器用户明确跳转到正文的目标。
Audit CSS class names for inconsistency and ambiguity, then organize them using BEM, a convention that names components, their elements, and variations. Check the rendered interface across screen sizes and interaction states when reviewing changes.
中文简介正在准备中。当前显示英语简介。
检查网站图片格式,协助转换为 WebP、AVIF 并设置备用图片,同时核对显示尺寸与加载方式,指出具体修改位置。
Compare button and link text with accessible names, the names assistive technology uses for controls. Identify mismatches and suggest ARIA label changes so people using voice control can refer to the words they see.
中文简介正在准备中。当前显示英语简介。
Review form fields to ensure each has a properly connected label. Identify placeholder-only names and missing group headings, then guide markup fixes that help screen readers identify inputs and make labels clickable.
中文简介正在准备中。当前显示英语简介。
找出拖慢页面首次加载的地图、编辑器等可选功能,改为在点击或获得焦点等操作后加载所需代码,并补充加载状态提示,检查初始页面和操作后的功能。
Audit a page’s HTTP requests to find unnecessary network activity behind slow loading. Confirm bottlenecks with performance measurements, then suggest changes such as combining files, grouping icons, or embedding resources needed for the initial display.
中文简介正在准备中。当前显示英语简介。
检查HTML表单和JavaScript请求的提交目标,找出未加密的HTTP通信,并调整目标网址、页面HTTPS配置及重定向,防止输入信息泄露。
Review HTML to find important fonts, images, and scripts discovered late during loading. Suggest resource hints, instructions that start fetching or connecting earlier, and check the final markup delivered to the browser.
中文简介正在准备中。当前显示英语简介。
Review CSS layouts for unwanted horizontal scrolling on narrow screens and at high browser zoom. Identify fixed widths, overflowing media, and unbroken text, then apply layout fixes that keep content readable within the viewport.
中文简介正在准备中。当前显示英语简介。
Review website image delivery and configure an image CDN, a service that optimizes and distributes images. Check file formats, dimensions, loading behavior, and initial screen impact, with guidance on verifying changes in DevTools.
中文简介正在准备中。当前显示英语简介。
检查生产环境中发布的JavaScript是否经过压缩,审查构建配置和未使用代码的移除方式,帮助缩小文件体积、减轻加载负担,并说明修改后的浏览器验证方法。
实测Google Tag Manager对页面加载和显示速度的影响,检查多余的标签、触发器及加载方式,并根据测量结果提出改进建议。
Find JavaScript code that changes existing objects or arrays, then replace those updates with modified copies. Review shared state and browser behavior to make data changes easier to trace and check fixes in context.
中文简介正在准备中。当前显示英语简介。
Audit HTML page size and identify oversized embedded JSON, SVGs, images, or scripts. Use the findings to plan lighter pages and investigate whether document size could explain content missing from Google's search index.
中文简介正在准备中。当前显示英语简介。
Review interface copy for assumptions about disability, gender, or culture. Suggest neutral wording, clearer instructions, and constructive error messages that guide people through problems without blaming them or relying on culturally specific expressions.
中文简介正在准备中。当前显示英语简介。
梳理希望被搜索收录或排除的页面,检查robots.txt、noindex和canonical之间的冲突,查找意外收录或排除的原因,并协助按预期修正设置。
Review public forms for automated abuse protection. Check CAPTCHA, a mechanism for detecting bots, along with hidden trap fields and request limits, then help integrate a CAPTCHA service and validate its tokens on the server.
中文简介正在准备中。当前显示英语简介。
检查网站是否使用有效证书通过HTTPS提供所有页面,核对证书期限和主机名覆盖范围、HTTP跳转、内部链接及资源网址,并协助修正配置。
Measure how quickly a webpage updates after user interactions using INP, a responsiveness metric. Identify confirmed bottlenecks and improve event handlers, split long tasks, or move heavy computation to web workers.
中文简介正在准备中。当前显示英语简介。
按用途检查网站图片文件大小,列出超标图片与压缩目标,区分容量问题和显示尺寸不匹配,并协助调整压缩、格式及不同设备的图片分发。
Check form fields for duplicate labels that may confuse screen readers or voice control. Identify affected inputs and suggest consolidating labels or using aria-labelledby, an attribute that connects a field to multiple pieces of naming text.
中文简介正在准备中。当前显示英语简介。
Review web page headings for skipped levels, unclear labels, and incorrect structure. Organize HTML headings around the content so people using screen readers can understand page sections and navigate between them.
中文简介正在准备中。当前显示英语简介。
Review website images and reduce file sizes while limiting visible quality changes. Check compression, formats, display dimensions, loading behavior, and delivery settings, then recommend suitable tools or build automation and verification in browser DevTools.
中文简介正在准备中。当前显示英语简介。