Change buttons to links when appropriate

[eelzi-ONRR]

Best practice is to only use buttons to complete an action, not to simply link to another site or page. Many of our buttons on onrr.gov should just be links - we use action words on these buttons but they are still just links.

Homepage: Revenue Data button in the top right, View All buttons for reporter letters and press releases.

We can stylize the links to draw attention to them - especially the view all links. Maybe we can add additional style options to the new link editor to do so - such as font size?

[AlexandracmONRR]

We need more clarification on this. @lpgoldstein

[AlexandracmONRR]

From Accessibility in Design course

How does using the wrong element negatively affect accessibility?

I’ll answer this with a little story someone told me: a person, who uses a screen reader, calls the help desk with an issue. The tech support rep begins walking them through how to troubleshoot the issue. The rep tells them “click the button...”. And visually it does look like a button, but it’s coded as a link. Because, programmatically, it was most appropriate for it to be a link. But the designer designed it to look like a button for stylistic reasons. Now the screen reader user is going through the elements on the page listening for the “button” element, but they can’t find it, and won’t find it, because it’s going to be announced as a link.

This is one example of how accessibility is negatively affected when buttons and links are not appropriately designed and coded to be consistent.

One more thing that’s helpful to know is that: Keyboard users select a button with the Space bar or the Enter key, but they select a link with just the Enter key (the Space bar does not work to select links). So if they see a button on the page and hit Spacebar to select it, but programmatically it's a link, the spacebar will not select it. If it looks like a button and is programmatically a button, then the spacebar will work.

When
When to use a link and when to use a borderless button (or a button in general)?

Use a link when...

• ...the action is navigational. Meaning, it’s going to take the user to another place or another view. Like another page, or scroll/jump you down to a completely different section on the page. (It's helpful to think of this: Use a link when "linking between a site's pages" — U.S. Web Design System)
• ...the action does NOT change the front- or back-end.
• ...it can change the URL, make the browser refresh/redraw, do an internal page jump, or open something in a new window or tab.
• “...the action is less popular or less important. Less popular or less important actions may be visually styled as links.” — U.S. Web Design System

Use a button when...

• ...the action is an action (e.g., Submit, Next, Save, Create New, Merge, Upload, Play), and this action will happen on the same page, or progress you to the next step in a flow. Also, "Use buttons for the most important actions you want users to take on your site, such as Download, Sign up or Log out." — U.S. Web Design System
• ...there is a change in the website’s front- or back-end (e.g. form data is submitted to a server).
• ...it can trigger some kind of javascript functionality (e.g. revealing a menu, or showing a date picker).
• ...it can trigger new content to show, it can toggle something on the interface (like tab views), it can trigger a modal or popup, it can play media content, it can open or close something.

[lpgoldstein]

This should be a link:

[lpgoldstein]

These should be links:

[lpgoldstein]

More button notes: For a quick review:

Links take users to a new page or location when activated.
Buttons trigger an action, such as submitting a form or opening hidden content.
In this case, a "Sign In" component functions as both a link and a button since it has both actions. It is recommended to code "Sign In" or "Log In" components as buttons since they submit information and perform an action

[cthomasONRR]

@greensomes We need your help to change the NRRD header button to just a link and for the "view all" links within collections.

I can go in and fix the other NRRD link today.

[cthomasONRR]

Removed buttons and replaced as links for:

• NRRD bottom homepage
• Getting started - new to reporting
• Reporting homepage
• All handbook cards
• Events and Training card (for Indian events calendar)
• FOIA - submit a request online

All updates are noted in the content audit.

Need Jeff's help to remove buttons for:

• NRRD button on header
• Buttons associated with collections

Only buttons that should be left alone are for:

• Emarf, WebCenter Portal, solids.onrr.gov logins/forms
• Pay.gov logins/submissions

[cthomasONRR]

Putting this back in the backlog for when Jeff has time. Everything that doesn't require Jeff's help is complete.

[cthomasONRR]

@greensomes Updated the NRRD button on header - it's now a link with an external indicator :)

Last item left in this issue, and also needs Jeff's help:

• Remove buttons associated with collections (ie: "view all press releases" and "view all reporter letters"