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.
中文简介正在准备中。当前显示英语简介。
Use when applies to all CSS layout rules. Check `width`, `min-width`, fixed pixel values on containers, `overflow`, `white-space`, and `word-break` properties. Use when auditing responsive design or WCAG 2.1 Level AA compliance. Test at 320px viewport width and at 400% browser zoom.
安装前可以查看交给 AI 代理的指令内容。
Low-vision users who cannot read at standard zoom levels increase browser zoom to 200–400%. At these zoom levels, a 1280px-wide page becomes effectively 320px wide. If elements overflow the viewport, users must scroll both vertically and horizontally to read content — this is exhausting and error-prone with a screen magnifier. WCAG 2.1 SC 1.4.10 (Reflow) specifically addresses this, requiring that all content is available without two-dimensional scrolling at 400% zoom.
width: 100vw not accounting for scrollbar width, long unbreakable strings, white-space: nowrapmax-width: 100% on images and media, overflow-wrap: break-word on text containers, and fluid layout unitsTest the page at a 320px CSS viewport width (equivalent to 400% browser zoom on a 1280px screen). Look for horizontal scrollbars or content overflowing outside the viewport. Specifically check: (1) elements with fixed width values in px that exceed the viewport; (2) min-width values that prevent shrinking; (3) images or media without max-width: 100%; (4) white-space: nowrap on text that causes overflow; (5) width: 100vw on elements (scrollbar width causes overflow); (6) long URLs or unbreakable strings in content areas.
(1) Replace fixed width: Npx on layout containers with max-width: Npx plus width: 100%. (2) Add max-width: 100% and height: auto to all images and media. (3) Apply overflow-wrap: break-word (with fallback word-wrap: break-word) to text containers that may contain long strings. (4) Replace width: 100vw with width: 100% on full-width elements (avoid scrollbar overflow). (5) Use CSS Grid or Flexbox with flex-wrap: wrap for multi-column layouts. (6) For data tables, wrap in a scrollable container: overflow-x: auto on the table wrapper, not the page body.
WCAG 2.1 SC 1.4.10 (Reflow, Level AA) requires that content does not require two-dimensional scrolling when displayed at a width of 320 CSS pixels or a height of 256 CSS pixels. This corresponds to 400% zoom on a 1280×1024 display. Exceptions are made for content that requires two-dimensional layout for usage (e.g., data tables, map interfaces, video). For all other content — body text, navigation, forms, images — horizontal scrolling is a barrier for screen magnification users who cannot see the full page width.
Review stylesheets, component styles, and responsive states related to Prevent horizontal scrolling. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/css/horizontal-scroll
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
中文简介正在准备中。当前显示英语简介。
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
中文简介正在准备中。当前显示英语简介。
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
中文简介正在准备中。当前显示英语简介。
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
中文简介正在准备中。当前显示英语简介。
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
中文简介正在准备中。当前显示英语简介。
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.
中文简介正在准备中。当前显示英语简介。