Eliminate links-that-look-like-buttons & buttons-that-look-like-links

Bug #1387412 reported by Aaron Wells on 2014-10-29
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Aaron Wells

Bug Description

Mahara contains quite a few HTML links (<a> tags) that are styled to look like buttons. It may also contain some buttons (<input> tags and <button> tags) that are styled to look like links.

These interfere with our ability to write automated tests, and they're bad for accessibility. As the Mahara accessibility checklist says:

"Use buttons and links consistently.
- Use a link if you're navigating to a predefined page or section (navigation, tabs, etc.)
- Use a button if you're changing information or state (submitting a form, editing or deleting content, searching, etc.)"

From https://wiki.mahara.org/index.php/Developer_Area/Accessibility_Checklist#Forms

To facilitate this, we should write a PHP function (and Dwoo tag) that allows you to create a "link button", i.e. a button that, when clicked, simply takes you to a specified URL. Then we can systematically locate all the links-that-look-like-buttons and replace them with actual buttons using this functionality.

Aaron Wells (u-aaronw) wrote :

Possible implementation strategies for a link-button:

1. A wee form with just one input tag in it: <form action=$url><input type="submit" text="text"></form>

Problem: Some of these link buttons are positioned inside of other forms. HTML doesn't allow <form> tags to be nested. This could potentially be workarounded by placing the <form> tag outside the surrounding one and using CSS to make it appear in the right place, but that's complicated (and also bad for accessibility).

2. Javascript on a <button> tag

3. The HTML5 <input formaction="$url"> attribute.

Problem: Need to check which browsers support it.

Changed in mahara:
importance: Undecided → Medium
status: New → Confirmed
assignee: nobody → Aaron Wells (u-aaronw)
milestone: none → 15.04.0
tags: added: accessibility
removed: accessibilyt
Jinelle Foley-Barnes (jinelleb) wrote :

Hi AaronW,

Here's a list of ways to get to the link/buttons that we discussed. You should be able to identify patterns in the data from this. The next lot I find I'll post up here also.

(Mahara 15.04dev)

1. Content- > Profile -> Social media -> Create the social media accounts. When they display "Edit" and "Delete" are links disguised as buttons.

2. Content -> Files -> Upload the files -> The "Edit" and "Delete" buttons are links.

3. Content -> Journal -> Add new entries -> The "Edit and "Delete" I think they're buttons and they look like buttons.

4. Content -> Resume -> Education and employment -> Add (Either education history or employment histroy) -> The "Edit" and "Delete" buttons are links.

5. Content -> Resume -> Achievement -> Add (Certifications, accreditations and awards, Books and publications, Professional memberships) -> The "Edit" and "Delete" buttons are links.

6 . Content -> Resume -> Goals and skills -> The "Edit 'name' goal" is a link disguised a button

7. Content -> Plan -> New plan -> All the buttons are links.

8. Portfolio -> Pages -> "Edit Content and layout" and "Delete this page" buttons are links

9. Portfolio -> Collections -> Create new collections -> "Manage pages", "Edit title and description" and "Delete collection" are all buttons are links.

10. Portfolio -> Collections -> Copy a collection -> The "Copy page" buttons, are wrapped in <span></span> tags and not recgonised as a button easily.

11. Portfolio -> Collections -> The actual "New collection" button itself is a link, but has the appearance of a button. Also it is in the class "btn" which could be confusing.

12. Portfolio -> Collections -> The actual "Copy a collection" button itself is a link, but has the appearance of a button. Also it is in the class "btn" which could be confusing.

13. Portfolio -> Shared by me -> Edit access butons and Secret URLs all look like buttons but are links

14. Administration -> Configure site -> Licences -> All the "Edit" buttons are actually links and the "Delete" buttons are actually buttons.

15. Administration -> Configure site -> Pages -> "Edit content and layout" and "Delete" and both actually links but look like buttons.

16. Administration -> Configure site -> Collections -> Adding a collection -> then the "Done" is a link but disguised as a button. All other buttons at the bottom of a fom are actually buttons. However this is a link.

17. Just for comparison, Administration -> Configure site -> Cookie consent -> "Save changes" is a button in table data and not a link.

18. Administration -> Configure site -> File -> "Edit" and "Delete" look like buttons and are buttons.

19. Administation -> Users -> Site staff -> "Submit" button is a button, not a link.

20. Administration -> Institution -> Institution -> "Edit" is a button and is also displayed as a button.

21. Administration -> Extensions -> Allowed iframe sources -> "Edit" buttons are actually links and the "Delete" buttons are buttons.

22. On the Main page the Dashboard "Edit dashboard" button is actually a link and not a buton as it appears.


Aaron Wells (u-aaronw) wrote :

I think the best implementation for this is #2 above, <button> tags with Javascript "onclick" methods.

Jinelle Foley-Barnes (jinelleb) wrote :

Just adding to it, so we can keep track of them all :)

23. Portfolio -> Pages the "Create page" button is a button
Portfolio -> Collections the "New collection" button is actually a link disguised as a button

Jono Mingard (mingard) wrote :

I don't think having links disguised as buttons is a bad thing - just as long as they genuinely link to another page. From the accessibility guidelines as quoted above (paraphrased): "Use a link if you're navigating to a predefined page or section; use a button if you're changing information or state"

For example, the "New collection" button creates a new collection *by taking you to the 'Edit collection' page* - I think for a screen reader (for example) styling it as a link makes sense.

From articles like http://formidablelabs.com/blog/2014/05/08/anchors-buttons-and-accessibility/ and http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/ it looks like the main problem is links which *act* like buttons, regardless of what they look like, so surely buttons which act like links would be just as confusing?

Jinelle Foley-Barnes (jinelleb) wrote :

Hi Jono,

One of the issue is, when you're writing a Behat test there's no easy way to teach the community/beginner testers the difference between links and buttons.

And I press "Button name"
And I follow "Link name"

Having a link with a img places over it makes people think they are pressing a button. So when the test doesn't work/run they wouldn't understand why. I don't want to have to get them "inspecting element" to see if it's a link or a button. It's more user friendly if they can tell immediately.

Another one of the issues we were discussing was if you consistently use buttons for just things that change data (e.g. save actions, delete actions), and links for everything else people can guess if clicking it will be dangerous or not. If they don't won't make a change yet, they can click and see if there is more information or whatever. If you start making some links buttons, then people lose the association and can never be sure if it's safe to click or not.

See if you can come up with a way we can approach this, more ideas the better. We've been discussing it for a while but haven't found a "best practice" yet :)


Robert Lyon (robertl-9) on 2015-04-17
Changed in mahara:
milestone: 15.04.0 → 15.04.1
Aaron Wells (u-aaronw) on 2015-04-21
Changed in mahara:
milestone: 15.04.1 → 15.10.0
Pat (pat-kira) wrote :

This has been done as part of the Bootstrap work.

Changed in mahara:
status: Confirmed → Fix Committed
Robert Lyon (robertl-9) on 2016-11-06
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers