1.6 Creat Accessible Singe Page Apps (SPA) Flashcards
How is an SPA different from regular pages from a SRs POV?
Content changes without page load events.
They use AJAX calls to change and add content to the page.
What are two ways to let SR users know new content has been added via user interaction triggered AJAX (when there is no screen load event?)
Move focus to new content
Use aria-live to announce new content but do not move focus
What is a good way to inform SR users of new content added via non-user interaction triggered AJAX (when they pushed no button and there is no screen load event?)
Make sure the new content appears after their current location in the DOM.
What are the six best practices of accessibility with SPAs?
Update the page title (document.title) Notify the user of page changes Notify the user of updates inside the page (ARIA) Move focus Use HTML 5 semantics Manage browser history (History API)
When and how should you change the page title for an SPA?
Using Javascript, as the URL is changed
How can we notify the user of page changes in an SPA?
Move focus to the first H1 of the new page and add tabindex -1 to it so it is read out.
When would we change focus on an SPA?
User activates button - focus to first element
User activates a link that takes them to a new location in the SPA- focus to first H1 or element
How can ARIA roles be used to help an SPA user?
Where HTML elements do not provide accurate roles natively (, ) use the role attribute with region and a descriptive aria-label
<div></div>
How can you ensure the SPA user is not taken outside of the SPA when they click the previous button?
Use the History API to store the states and use JavaScript to enable normal previous and next operability
Can screen readers see when new content is added via AJAX?
No. (maybe in the future?)
