====== Links and Navigation ======

**Note:** as of early October 2023, the Sandbox (/staff/sandbox) contains a series of examples for text-only buttons, buttons that look like links, icon-only buttons, and buttons with both icons and text. ([[https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commitdiff;h=701603a8174b74fa1bad48978ee7f75676741695|See the commit.]]) Copy the appropriate example to ensure your links and buttons are accessible.

Use <a> links when the user will be taken to a new route or destination. (Skip links and other in-page anchors are the exception to this rule.)

Use <button> when the user is triggering an action or event on the current page, like a dropdown or a modal. By default, buttons have focus in the tabbing order and their click events can be triggered via the keyboard without extra keyboard-specific functions.

Beware of <a> links without href attributes! They do not have focus in the tabbing order, and you will need to add tabindex=”0” if they cannot be replaced with <button>. You can use <button class=”btn btn-link”> in Bootstrap to make a button that looks like a link.

Marcy Sutton writes, “The starkest difference between a link and a button to me is that a link navigates the user to a new resource, taking them away from the current context (internal links are the only wrinkle here). A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup.”

If an **<a>** tag does not have an **href** attribute and it is visible to the user (i.e. it’s not just an anchor, which can do with just an **id**), it _must _have a **tabindex** attribute. This should be set to **0** unless there is an excellent reason to set the tab order explicitly. (Specifying **tabindex** is like manually incrementing your database table’s primary key ID: a very bad idea. Just don’t.) However, in most situations where <a> tags appear this way, <button> is more appropriate.

==== Further readings on buttons and links ====

  * [[https://www.buttoncheatsheet.com/|Button Cheat Sheet, Manuel Matuzović]] - demonstrations of good vs. bad buttons
  * [[https://marcysutton.com/talk/smashing-conf-sf-the-links-vs-buttons-showdown|The Links vs. Buttons Showdown, Marcy Sutton]] - Presentation slides and video
  * [[https://marcysutton.com/links-vs-buttons-in-modern-web-applications|Links vs. Buttons in Modern Web Applications, Marcy Sutton]] - Much of the same information as the presentation, in article form
  * [[https://www.a11y-collective.com/the-perfect-link/|The perfect link, Rian Rietveld]]

===== Writing Good Links =====

[[https://dequeuniversity.com/tips/link-text|Link text needs to make sense when read out of context]], because screen readers include a function to let the user navigate a list of all the links on a page. Link text therefore needs to be unique, and it needs to describe the user’s destination. A repeated “read more…” link should include screen reader-only text giving more context, like repeating the title of the item. [[http://stephanieleary.com/2015/05/why-click-here-is-a-terrible-link-and-what-to-write-instead/|Never use “click here” as the text of a link]].

Links that lead to file downloads should include the file format in parentheses.

===== Skip Links =====

In addition to the ARIA landmarks and headings, there should be a skip link at the top of every page that allows keyboard navigators to bypass the main navigation menu. In the early days of accessibility practice, it was common for these to be hidden with screenreader-only styles, but because sighted people with mobility impairments also navigate using the keyboard or a switch device, it is now a requirement that the skip link be visible when it has focus. [[https://knowbility.org/blog/2019/skip-links-gallery/|The Knowbility Skip Links Design Showcase]] demonstrates variations on the accepted design pattern.

Note that “skip to content” will be mispronounced in many screen readers; adding an adjective forces the software to stress the first syllable in “content.”

In Angular, URL fragments need to be specified separately.: 

''<a i18n class="skip-nav" [routerLink]="" [fragment]="'staff-banner'">Skip to main content</a>''

Adding target=”_self” may be necessary if there are conflicts with other router operations.

===== Opening new tabs or windows =====

When using **target=”_blank”** to open links in new windows or tabs, the text of the link must warn the user. See [[https://www.w3.org/TR/WCAG20-TECHS/G201.html|WCAG Technique G201]]. It is generally recommended that you leave this decision to the user; see [[https://www.w3.org/TR/WCAG20-TECHS/G200.html|WCAG Technique G200]]. This is because warning the user about the new window doesn't give them the opportunity to choose differently, and empowering user choice is a primary tenet of accessible design.

See the discussion on [[https://bugs.launchpad.net/evergreen/+bug/2015592|Bug #201559 In web client, indicate when a link opens in a new tab]] for more details.