Understanding ARIA Roles
• By Developer Team • 3 min read
ARIA roles provide semantic meaning to elements, helping assistive technologies understand the purpose and behavior of web content. This article explores the most important roles...
ARIA ROLE•Document Structure Roles
article
A section of a page that consists of a composition that forms an independent part of a document, page, application, or site. Articles are self-contained and independently distributable or reusable.
Native Element
<article>
Can Contain
Nested Articles
Naming
aria-labelledby
Overview
The article role represents a complete, self-contained composition that is independently distributable or reusable. Examples include blog posts, news articles, forum posts, user comments, interactive widgets, and any other independent content item.
Important: Always use the native <article> element instead of role="article". The ARIA role should only be used when you cannot use the semantic HTML element.
When to Use Article
Use <article> when the content makes sense on its own and could be syndicated, shared, or reused independently. If the content only makes sense in the context of the parent document, consider using <section> instead.
Example: Blog Articles
Building Accessible Forms
• By Accessibility Team • 5 min read
Forms are critical for user interaction, but they must be accessible to everyone. Learn best practices for creating forms that work with screen readers and keyboard navigation...
Note: Each article above is independent and self-contained. Screen readers will announce these as separate articles, allowing users to navigate between them easily.
Code Examples
Basic Article
<!-- Basic Article (use native <article> when possible) -->
<article>
<h2>Understanding Web Accessibility</h2>
<p>Published on January 15, 2024 by Jane Doe</p>
<p>Web accessibility ensures that websites are usable by everyone...</p>
<footer>
<p>Tags: accessibility, web development, WCAG</p>
</footer>
</article>
<!-- With ARIA role (only when <article> can't be used) -->
<div role="article">
<h2>Article Title</h2>
<p>Article content...</p>
</div>Blog Post Article
<!-- Blog Post Article -->
<article aria-labelledby="post-title">
<header>
<h2 id="post-title">10 Tips for Better Web Design</h2>
<p class="meta">
<time datetime="2024-01-15">January 15, 2024</time> •
<span>By John Smith</span> •
<span>5 min read</span>
</p>
</header>
<img src="hero.jpg" alt="Modern web design workspace" />
<div class="content">
<p>Web design has evolved significantly over the past decade...</p>
<h3>1. Focus on User Experience</h3>
<p>Always prioritize your users' needs...</p>
<!-- More content -->
</div>
<footer>
<p>Categories: <a href="/design">Design</a>, <a href="/ux">UX</a></p>
<p>Share this post:</p>
<div class="social-share">
<!-- Share buttons -->
</div>
</footer>
</article>Nested Articles
<!-- Nested Articles (e.g., forum thread with replies) -->
<article aria-labelledby="main-post">
<h2 id="main-post">How to Implement Dark Mode?</h2>
<p>Posted by Alice on Jan 10, 2024</p>
<p>I'm trying to add dark mode to my website. Any suggestions?</p>
<!-- Nested article for comments/replies -->
<section aria-label="Replies">
<article aria-labelledby="reply-1">
<h3 id="reply-1">Reply by Bob</h3>
<p>Posted on Jan 11, 2024</p>
<p>You can use CSS variables and a toggle button...</p>
</article>
<article aria-labelledby="reply-2">
<h3 id="reply-2">Reply by Carol</h3>
<p>Posted on Jan 11, 2024</p>
<p>I recommend using prefers-color-scheme media query...</p>
</article>
</section>
</article>React Component
// React Article Component
interface ArticleProps {
title: string;
author: string;
date: string;
content: string;
tags?: string[];
}
function BlogArticle({ title, author, date, content, tags }: ArticleProps) {
return (
<article
aria-labelledby="article-title"
className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-8"
>
<header className="mb-6">
<h2 id="article-title" className="text-3xl font-bold mb-2">
{title}
</h2>
<div className="text-gray-600 text-sm">
<time dateTime={date}>
{new Date(date).toLocaleDateString()}
</time>
{' • '}
<span>By {author}</span>
</div>
</header>
<div
className="prose prose-lg"
dangerouslySetInnerHTML={{ __html: content }}
/>
{tags && tags.length > 0 && (
<footer className="mt-8 pt-6 border-t">
<p className="text-sm text-gray-600">Tags:</p>
<div className="flex gap-2 mt-2">
{tags.map(tag => (
<span
key={tag}
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
>
{tag}
</span>
))}
</div>
</footer>
)}
</article>
);
}
// Usage in a feed
function ArticleFeed({ articles }: { articles: ArticleProps[] }) {
return (
<main>
<h1>Latest Articles</h1>
{articles.map((article, index) => (
<BlogArticle key={index} {...article} />
))}
</main>
);
}Best Practices
✓
Use native <article> element instead of role="article"
✓
Each article should have a heading (h2-h6)
✓
Use aria-labelledby to reference the article heading
✓
Articles can be nested (e.g., comments within a blog post)
✓
Content should make sense independently from the rest of the page
✓
Include metadata like author, date, and tags when relevant
×
Don't use article for content that only makes sense in context - use section
×
Don't use article just to style content - it's semantic, not presentational
×
Don't nest articles unless they have a clear hierarchical relationship
Common Use Cases
Blog posts
News articles
Forum posts
User comments
Product reviews
Social media posts
Interactive widgets
Syndicated content
Accessibility Notes
Screen Reader Navigation
Screen readers provide shortcuts to navigate between articles. Users can jump from one article to the next, making it easy to browse content-heavy pages like blogs or news sites.
Labeling Articles
Use aria-labelledby to reference the article's heading. This helps screen reader users understand what each article is about when navigating. If no heading exists, use aria-label.