how the screen reader announcement for page log out

when I click on logout button, I can see the page gets loaded and there is text displays on the screen.

you have logged out, click here to login again.

Actual result

at this time,Screen reader announces logout button then it was remains silent. and tab focus to the out of the page, if press tab again, focus does not reach on click here link

what should be the expected result? does it announces the status ? does the tab focus move to click here link? does the click here link need descriptive text ?

Expected result

After click on log out button

[screen reader announces status ] you have logged out.

[screen reader press tab key focus move to click here link and announces] click here to login again link

Alternate approach

[screen reader announces status ] you have logged out.

[screen reader automatically focus move to click here link and announces] click here to login again link.

which approach is more accessible ?

Solution

There's a good number of approaches you could take.

You could make the logout message focusable by giving it a tabindex of 0, and then set focus to that element on page load. You would also need to give the element a role, like region, so the screen reader user can infer they haven't landed on a control.

Another approach is to provide an id attribute to the logout text, and reference it with an aria-describedby attribute on the link.

A third approach would be to wrap the logout text in an <alert> tag, which automatically gives it aria-live="assertive" and aria-atomic="true". This comes with a gotcha - you would have to make sure the text is hidden to screen readers until after the page loads. Live Live regions report changes in content, so loading one with a static string won't announce it. It'd look something like this:

<alert>
  <p id="logoutmessage" aria-hidden="true">
    You have been logged out.
  </p>
</alert>

and in your scripts

setTimeout(() => {
  document.getElementById("logoutmessage").setAttribute("aria-hidden", "false")
}, 100)

Also, it'd be a good idea to make "click here to login again" the text of the link. Users of screen readers often navigate by opening lists of elements on a page, and "click here" doesn't provide enough context on its own.