The (relatively new) account section in the header has the option to use a element which is styled like a link. This is often used for a "Log out" button - to avoid a potential security issue with using links which might cause users to be logged out without actually clicking the button.
However, when testing using screen readers in the accessibility lab, it confused us that using the shortcode for 'next form element' would jump first to "Log out".
Should we add role="link" to the button to avoid this, on the basis that it looks like a link so should behave like one? If so should it also behave like a link, for example opening a new tab if command-clicked?
Are there any other options?
- Would
<button formaction="/log-out"> behave differently from a button embedded in a form, or not?
- Alternatively we could recommend using a real link which takes you to a confirmation page that has a button on it - but this would have the down side of requiring 2 click to log out
The (relatively new) account section in the header has the option to use a element which is styled like a link. This is often used for a "Log out" button - to avoid a potential security issue with using links which might cause users to be logged out without actually clicking the button.
However, when testing using screen readers in the accessibility lab, it confused us that using the shortcode for 'next form element' would jump first to "Log out".
Should we add role="link" to the button to avoid this, on the basis that it looks like a link so should behave like one? If so should it also behave like a link, for example opening a new tab if command-clicked?
Are there any other options?
<button formaction="/log-out">behave differently from a button embedded in a form, or not?