0

When a screen reader reads links, should they be pronounced as 'Link button', or 'Link'?

Example: Show more... (a link): should the screen reader say 'Link button', or 'Link'?

Also, how should the screen reader read an icon button? Should it read as 'Icon button' or 'button'?

2
  • Do you mean that you state in each label whether it is a links or button? Because you don't have to, screen readers already read the semantics for you. Just label it with where it points to.
    – jazZRo
    May 7 '21 at 12:21
  • No, i wanted to understand that when the screen reader read a link text then should it read it as a button or link which way is better? Ex: Show more link button or Show more button. May 7 '21 at 14:25
0

'Show more button' is better because it shorter. Also 'button' supposed further action after pressing it. So button text should describe this action. Obviously 'Show more' will be link to details page as 'Save button' will result in storing entered data and 'Send button' will result in sending something somewhere. Just avoid a kind of 'Go' label on button - I mean something indefinite. Also in this case 'Go button' is more correct as you don't know is it link or some action.

0

The real question is whether you should use a link (<a>) or a button (<button>) for your interface. How the screen reader announces it is totally up to the screen reading software. As long as you use the right semantic element, it will be announced properly.

Use links for navigation (going to a new page or navigating within the same page via a #foo href) and use buttons for immediate actions.

A simple rule I follow is, after clicking on the element, does it make sense for the browser's "back" button to work? For example, if a "contact us" link takes you to a page with contact information, then pressing the browser's back button should take you back to the previous page. If you select an "add to cart" button, then that action should not be undone by using the browser's back button so a button is more appropriate than a link.

0

A screen reader will announce a standard a element with an href attribute as "link" and a button element as "button". In order to avoid confusion, you should use links for navigation and buttons for actions.

If you are building a web app, you may run into the issue that HTML has no elements for specific UI components that you may wish to create. For example, HTML has no elements for menubars, menus and menu items. For that scenario, you may wish to use ul, li and a elements and add specific WAI-ARIA roles to these elements, namely menubar, menu and menuitem, respectively.

However, for something as simple as an image button, you can simply use an input element with the appropriate attributes, as explained in Image button has accessible name (W3C Web Accessibility Initiative).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.