GSA / px-benefit-finder

1 stars 1 forks source link

Announce Web Page Title Changes to Screen Reader Users #1904

Open scottqueen-bixal opened 3 weeks ago

scottqueen-bixal commented 3 weeks ago

User / Persona

individual using screen reader(s)

Reason / Justification

for improved accessibility and experience

Acceptance Criteria (AC)

with client side router

Other Notes

When you navigate on a server rendered page, the page is torn down by the browser and focus is reset to the top of the window. Once at the top of the window, a screenreader will read the new page (and URL sometimes) to give the user a frame of reference of where they are and confirmation they got to where they were going. Then the user begins tabbing through content, hopefully assisted by some helpful skip navigation links.</p> <p>we have already implemented 2 out of 3 requirements to improve a11y on our "virtual pages"</p> <ol> <li>focus is reset to the top of the window.</li> <li>user begins tabbing through content, hopefully assisted by some helpful skip navigation links.</li> </ol> <p>we can explore adding this additional functionality to complete the a11y improvements and better align our embedded apps with similar server rendered experiences</p> <p>***NOTE: search engines will not have access to or crawl to index these title changes</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>