Changing Content

---

​

Overview

Directly Related WCAG Guidelines(s):

• 2.2.2 Pause, Stop, Hide (Level A)
• 3.2.1 On Focus (Level A)
• 3.2.2 On Input (Level A)
• 4.1.2 Name, Role, Value (Level A)
• 4.1.3 Status Messages (Level AA)

Dynamic content changes and state updates must be properly communicated to all users to ensure they can understand and interact with applications effectively. Screen readers and assistive technologies rely on proper ARIA attributes and live regions to announce status changes, loading states, and progress updates, while all users need clear feedback about what is happening in the interface. Proper accessibility implementation ensures that users can track changes, understand current states, and control the pace of dynamic interactions. This includes providing status announcements, loading indicators, progress feedback, and clear controls for collapsible content. Without proper changing content accessibility, users may become confused about application state, miss important updates, or fail to understand when processes have completed or failed.

---

​

Status Updates

Directly Related WCAG Guidelines(s):

• 3.3.1 Error Identification (Level A)
• 3.3.3 Error Suggestion (Level AA)
• 3.3.4 Error Prevention (Level, Financial, Data) (Level AA)
• 4.1.3 Status Messages (Level AA)

Status updates and notifications must be properly announced to screen readers so users can stay informed about changes in the application. Screen readers rely on live regions to announce dynamic content changes, while all users need clear feedback about system state changes and form validation results. Proper accessibility implementation ensures that users can track changes, understand current states, and receive timely feedback about their interactions. This includes providing appropriate ARIA live regions, clear error messaging, and status announcements that respect user preferences. Without proper status announcements, users may miss critical information, remain unaware of successful actions, or fail to understand when errors have occurred.

​

Best Practices

• Write clear, helpful status messages appropriate for the type of status being displayed
• Keep important messages persistent with clear next-step actions or instructions
• Use appropriate status types (success, error, warning) that match the message content

​

Common Pitfalls

• Using vague or unhelpful status messages that don’t guide users
• Assigning status types that don’t match the content (e.g., using “error” styling for success messages)
• Overwhelming users with too many status messages or auto-hiding critical information

---

​

Loading States

Directly Related WCAG Guidelines(s):

• 2.2.2 Pause, Hide, Stop (Level A)
• 3.2.2 On Input (Level A)
• 4.1.2 Name, Role, Value (Level A)
• 4.1.3 Status Messages (Level AA)

Loading states provide feedback to users about ongoing processes and prevent confusion about whether actions are being processed. Screen readers rely on aria-busy attributes to announce when elements are loading, while visual users need clear loading indicators to understand that work is in progress. Proper accessibility implementation ensures that users can track progress, understand system responsiveness, and receive appropriate feedback during wait times. This includes providing clear loading indicators, progress announcements, and proper ARIA attributes that communicate loading status to assistive technologies. Without proper loading indicators, users may attempt to repeat actions, become frustrated by apparent system failures, or abandon tasks that appear to be unresponsive.

​

Best Practices

• Provide clear feedback for both visual users and assistive technologies about what is loading
• For long-running processes, display a progress indicator and provide a cancel option
• Announce loading state changes to screen readers using ARIA attributes

​

Common Pitfalls

• Providing vague or missing feedback about state changes
• Blocking page interaction without offering a way to cancel the operation
• Failing to communicate loading status to assistive technologies

---

​

Progress Indicators

Directly Related WCAG Guidelines(s):

• 1.4.1 Use of Color (Level A)
• 2.2.2 Pause, Stop, Hide (Level A)
• 4.1.2 Name, Role Value (Level A)
• 4.1.3 Status Messages (Level AA)

Progress indicators help users understand how much of a task has been completed and how much remains. Screen readers rely on proper ARIA attributes like role=“progressbar” to announce progress information, while visual users need clear visual feedback about completion status. Proper accessibility implementation ensures that users can track completion status, understand remaining work, and make informed decisions about continuing or pausing processes. This includes providing both visual and programmatic progress information, clear completion percentages, and appropriate ARIA attributes that communicate progress to assistive technologies. Without proper progress communication, users may become uncertain about task completion, lose track of their progress, or abandon long-running processes.

​

Best Practices

• Clearly communicate both the progress percentage and what operation is being performed
• Provide controls to pause or cancel the operation when appropriate
• Use proper ARIA attributes like role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax

​

Common Pitfalls

• Using vague or overly elaborate descriptions that confuse users
• Relying solely on visual progress bars without text or ARIA attributes
• Blocking page interaction during long operations without providing a cancel option

---

​

Collapsible Content

Directly Related WCAG Guidelines(s):

• 1.3.1 Info and Relationships (Level A)
• 2.1.1 Keyboard (Level A)
• 2.1.2 No Keyboard Trap (Level A)
• 2.4.3 Focus Order (Level A)
• 4.1.2 Name, Role Value (Level A)

Collapsible content must clearly communicate its current state and allow users to control expansion and collapse. Screen readers rely on aria-expanded attributes to announce whether content is currently visible, while all users need clear visual indicators for the expanded/collapsed state. Proper accessibility implementation ensures that users can understand content relationships, control information disclosure, and navigate between sections effectively. This includes providing proper ARIA attributes, keyboard navigation support, and clear state communication that works for both visual and non-visual users. Without proper collapsible content implementation, users may become disoriented about what content is available, struggle to navigate between sections, or miss important information that is hidden from view..

​

Best Practices

• Write clear, descriptive trigger text that indicates what content will be revealed
• Use aria-expanded to communicate current state to assistive technologies
• Organize content in a logical way that makes sense when collapsed or expanded
• Ensure keyboard navigation works properly for expand/collapse controls

​

Common Pitfalls

• Using unclear trigger text that doesn’t describe the hidden content
• Grouping unrelated content together in collapsible sections
• Failing to update aria-expanded when state changes