I was recently told that if a link opens the requested content in an HTML dialog instead of navigating to an entirely new page that the link should be converted to a button because people using screen readers only expect links to navigate to a new page. Is that true?
3 Answers
I don't think it's 100% true, but it's better. See Web Accessibility recommendations, specifically this part:
Developers must alert users when a link is used to open a simulated dialog. When links do not indicate the purpose of opening a simulated dialog, users of assistive technology may expect another action and may be confused when that expected action does not occur. Text should be added to the link alerting users that a simulated dialog will be opened when the link is activated, using either the title attribute, off-screen text using CSS, or on-screen text. The simulated dialog must appear directly after the link that activates it in the source code. Screen readers and other assistive technology will render content to the user in the order it appears in the HTML source code, not the order in which it appears visually on the screen. When simulated dialogs are rendered visually with CSS but appear in the wrong location within the rendered source code, users of screen readers (and even keyboard-only users who are sighted) may have difficulty locating the new content or understanding its relationship to the activating control.
Keep in mind that buttons are also links, so you could style them as you wish. Also, from regular links you may expect other elements to be triggered. Not only dialogs, but toasts, snackbars, tooltips, popovers and more. So it's NOT a question of styling and affordance, but a matter of properly telling screen readers what is the element about
In a way your hyperlink then would act like a button. So you could use WAI-ARIA to set the role button to notify screen readers that this link will in fact behave like a button.
https://www.w3.org/TR/wai-aria/roles#button
Or you could use a button in the first place (and just style it as a hyperlink if you want to).
people using screen readers only expect links to navigate to a new page
This part is simply not true, visually disabled users understand that some links point to elements on the same page and many screen readers help to accomodate that.
Links to Anchors on the Same Page
Links are often used to jump to another location on the present page... In-page links can provide great accessibility functionality, particularly with "Skip" links to bypass page navigation or links to jump over lengthy lists of links or other complex or potentially confusing information.
Screen readers generally identify in-page links by reading "in page link" in association with them.
http://webaim.org/techniques/hypertext/hypertext_links#same_page
answered Mar 16, 2016 at 17:05
