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

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.

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.

Thanks,
Jinelle

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

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

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?

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 :)

Cheers,
Jinelle

This has been done as part of the Bootstrap work.