When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined
1. Perceivable
1.3 Adaptable
WCAG 2.0
Content must be presented in a logical order that makes sense when read sequentially. Screen readers and other assistive technologies read content in the order it appears in the DOM (HTML source), not in the visual order created by CSS. When CSS changes the visual layout, the logical reading order must still make sense.
Published today by the W3C
The World Wide Web Consortium (W3C) has announced new accessibility guidelines that will help make the web more inclusive for everyone.
These guidelines focus on improving screen reader compatibility, keyboard navigation, and visual accessibility features.
✅ This layout reads logically: headline → metadata → main content → related links. The DOM order matches the visual order and makes sense when read sequentially.
margin and paddingfloat (with logical order)display: block/inlinetext-alignposition: absolute/fixedflexbox with ordergrid with positioningtransform positioninggrid-template-areas for complex layouts<!-- Good: Logical HTML structure -->
<article>
<header>
<h1>Article Title</h1>
<p>Published date and author</p>
</header>
<section>
<h2>Introduction</h2>
<p>Article introduction...</p>
</section>
<section>
<h2>Main Content</h2>
<p>Main article content...</p>
</section>
<footer>
<p>Related links and metadata</p>
</footer>
</article>
<!-- Bad: Illogical structure -->
<div>
<div id="footer">Related links</div>
<div id="content">Main content</div>
<div id="intro">Introduction</div>
<div id="header">Title</div>
</div>
<!-- Use CSS to position visually -->
<style>
/* Good: CSS for presentation only */
.article-layout {
display: grid;
grid-template-areas:
"header header"
"intro sidebar"
"content sidebar"
"footer footer";
}
</style>// Good: Logical component structure
function ArticleLayout({ title, content, sidebar }) {
return (
<div className="article-grid">
{/* Header first in DOM */}
<header className="article-header">
<h1>{title}</h1>
<ArticleMetadata />
</header>
{/* Main content second */}
<main className="article-content">
{content.map((section, index) => (
<section key={index}>
<h2>{section.title}</h2>
<p>{section.text}</p>
</section>
))}
</main>
{/* Sidebar third (will be positioned by CSS) */}
<aside className="article-sidebar">
{sidebar}
</aside>
{/* Footer last */}
<footer className="article-footer">
<RelatedArticles />
</footer>
</div>
);
}
// CSS for visual layout
const styles = `
.article-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
gap: 1rem;
}
.article-header { grid-area: header; }
.article-content { grid-area: content; }
.article-sidebar { grid-area: sidebar; }
.article-footer { grid-area: footer; }
`;