WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Meaningful Sequence in SPAs

for

From: Dean.Vasile@outlook.com
Date: Apr 16, 2024 9:15AM

When dealing with view changes in a single-page application (SPA) website, managing focus properly is crucial for accessibility and usability, especially for keyboard and screen reader users. Here are some best practices for handling focus when changing views in an SPA:Set Focus to New Content: When new content loads, especially after an interaction like clicking a link or a button that results in a view change, you should set the focus to an element within the new content. Typically, this should be a container element (like a <div> or <section>) that wraps the content of the new view. This element should have a tabindex="-1" attribute to make it programmatically focusable without adding it to the natural tab order.Use ARIA Roles and Labels: Apply appropriate ARIA roles and labels to the new content container. For example, assigning role="main" to the main content container can help screen reader users understand the role of the region they have navigated to. Using aria-live="polite" can also be useful to announce when new content is loaded, though this should be used carefully to avoid unnecessary verbosity.Restore Focus on Navigation Back: When users navigate back to a previously visited view (e.g., using the browser’s back button), it is important to restore the focus to the element they interacted with last within that view. This could be a link, button, or another interactive element. This restoration improves the user experience by providing a seamless navigation experience.Manage Focus on Modal Dialogs: If a new view opens as a modal dialog, focus should be set to the dialog container, and then managed within the modal elements. Ensure that the focus is trapped within the modal as long as it remains open. When the modal closes, return the focus to the initiating element in the main content.Announce Page Changes: For users who rely on screen readers, it's helpful to announce page changes. This can be accomplished through ARIA live regions, which can dynamically announce changes in content. However, make sure the announcements are not too verbose or frequent.Consistent Navigation: Maintain consistent navigation across different views. For instance, if your navigation bar is at the top of the page, keep it consistent across all views and ensure that focus can be moved to it from any part of the page.Testing and Validation: Regularly test your website using keyboard navigation and screen readers to ensure that focus management is working correctly across all views. This helps in identifying any areas where users might get stuck or lose context.By following these guidelines, you can enhance the accessibility and user experience of your SPA, making it navigable and understandable for all users, including those with disabilities.
Dean Vasile


617-799-1162

> On Apr 16, 2024, at 10:47 AM, Brian Lovely < <EMAIL REMOVED> > wrote:
>
>
> My question is when changing views in a single-page application-style
> website, how should focus be handled? I specify "website" to differentiate
> from a single page application that is simply a series of form views.