Article Title
Published on
Section Title
Article content goes here.
Welcome to our AI agent services platform. Our intelligent agents can help you with various daily tasks.
Task Management Agent
Let our AI agent organize your schedule and manage your to-do lists efficiently.
Select Service
Email Assistant Agent
Our AI agent can sort, prioritize, and respond to your emails automatically.
Learn More
Sign Up for Services
Content for Tab 1
Content for Tab 2
Content for Tab 3
Modal Title
This is modal content.
Important: Your session will expire soon.
Calendar Integration Agent
Sync your calendar across all devices and get intelligent scheduling suggestions.
More Info
ARIA Labels and Semantic HTML - Compliant Examples
The following examples demonstrate proper use of ARIA labels and semantic HTML:
Semantic HTML5 Elements
Main content area using <main> element.
Semantic HTML5 elements provide meaning and structure that assistive technologies can understand.
Buttons with ARIA Labels
Icon-only buttons have aria-label or visually hidden text to provide accessible names.
Form Labels with ARIA
Form inputs use proper labels, aria-required, aria-describedby, and aria-invalid for comprehensive accessibility.
Modal Dialog with ARIA
Modals use role="dialog", aria-labelledby, aria-describedby, aria-modal="true", and aria-hidden to properly communicate their state.
Tab Interface with ARIA
Basic Plan
$9.99/month - Basic features for individual users.
Tabs use role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls, and aria-labelledby for proper communication.
Progress Bar with ARIA
Progress: 65% complete
Progress bars use role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-label.
Alert with ARIA
Important: Your session will expire in 5 minutes.
Alerts use role="alert" and aria-live="assertive" to immediately announce urgent information to screen readers.
Status Message with ARIA
Status messages use role="status" with aria-live="polite" and aria-atomic="true" for non-urgent updates.
Banner with ARIA
Banners use role="banner" and aria-label to identify important site-wide announcements.
Images with Proper Alt Text
Meaningful images have descriptive alt text.
Decorative images have empty alt text and role="presentation" to indicate they should be ignored.
Iframe with Title
Iframes have descriptive title and aria-label attributes so screen readers can identify their purpose.
Collapsible Content with ARIA
Collapsible content uses aria-expanded, aria-controls, and aria-hidden to communicate state and relationships.
Search Form with ARIA
Search forms use role="search", proper labels, and aria-label for comprehensive accessibility.
Breadcrumb Navigation with ARIA
Breadcrumbs use <nav> with aria-label="Breadcrumb", <ol> for structure, and aria-current="page" to indicate the current page.
Navigation with Current Page Indicator
Navigation uses aria-current="page" to indicate the current page to screen reader users.
Form Validation with ARIA
Form validation uses aria-invalid, aria-describedby, role="alert", and aria-live to communicate errors effectively.
Live Regions for Dynamic Content
Live regions use role="status" or role="alert" with aria-live and aria-atomic to announce dynamic content changes.
Region Landmarks
Service Features
This section is identified as a region with aria-labelledby.
Pricing Information
This div is identified as a region using role="region" with aria-labelledby.
Regions help users navigate to major sections of content using aria-labelledby or aria-label.
Complementary Content
Complementary content uses role="complementary" or the <aside> element with aria-label.
Application Role
This is an application widget that requires keyboard interaction.
Application role indicates a widget that behaves like a desktop application and requires specific keyboard interaction.
Toolbar with ARIA
Toolbars use role="toolbar" with aria-label to identify a collection of commonly used function buttons.
Menu with ARIA
Menus use role="menu" and role="menuitem" to identify a list of choices presented to the user.
Listbox with ARIA
Task Management
Email Assistant
Smart Home
Listboxes use role="listbox" and role="option" with aria-selected to identify selectable lists.