黑料社

Web Accessibility Training

In-page buttons

Advisory

The information on this page is only applicable if you're editing the University webpages using T4. It presumes that you have already completed the beginners and advanced level of the .

Introduction

You should never upload an image with text in it to create a button, as this does not result in buttons that are accessibility-compliant.

Instead, a button can be created by editing the code of your page, as described below. If you're not confident doing this, you can ask the web team to do it for you.

The way that the code is edited depends on the type of link you're creating:

  • If you're linking to web content held within T4, you should be using a section link or content link. For these types of links, use method 1.
  • For all other links, use method 2.

Method 1: creating a button to link to content within T4

  1. Create the link to the content in T4 just as you would normally, by clicking on the link icon and then selecting 'Insert section link' or 'Insert content link' as applicable.
  2. Click on 'View' and then 'Source code'.
  3. In the code, find where your link has been created. It will start with <ss-link followed by about three lines of code, ending with > which will be followed by your link text. After the link text you'll see </ss-link> which is the end of the link code.
  4. Before the > that appears immediately before your link text, type class="button". So, for example, if you have a link text that says 'research highlights', your code in that area will say class="button">Research highlights</ss-link>.
  5. Click save. In the editing window, your link will appear unchanged (you won't see the button).
  6. Click 'save changes'. This will save your edit but doesn't approve it to be published to the live site yet. You'll see that the editing element has a status of 'pending'.
  7. Preview your page. You should see the button containing your link text. Click on it to test that the link goes to the place you intended.
  8. Once you've confirmed that the button works correctly, you can click on 'approve' from the actions menu, and it will change the status of the element to 'approved'.

Method 2: creating a button to link to content outside T4

  1. Create the link to the content in T4 just as you would normally, by clicking on the link icon and then selecting 'Link to external site'.
  2. Click on 'View' and then 'Source code'.
  3. In the code, find where your link has been created. It will start with <a href= followed by a short line of code ending with > which will be followed by your link text. After the link text you'll see </a> which is the end of the link code.
  4. Before the > that appears immediately before your link text, type class="button". So, for example, if you have a link text that says 'research highlights', your code in that area will say class="button">Research highlights</a>.
  5. Click save. In the editing window, your link will appear unchanged (you won't see the button).
  6. Click 'save changes'. This will save your edit but doesn't approve it to be published to the live site yet. You'll see that the editing element has a status of 'pending'.
  7. Preview your page. You should see the button containing your link text. Click on it to test that the link goes to the place you intended.
  8. Once you've confirmed that the button works correctly, you can click on 'approve' from the actions menu, and it will change the status of the element to 'approved'.

How to turn a button into a regular link

  1. Go into the editing window
  2. Go into the code ('View' and then 'Source code') and delete only the bit of the code that says class="button" just before your link text.

How to turn a button into regular unlinked text

  1. Go into the editing window.
  2. Click on the link to select it, and then click on 'remove link' (the broken chain icon).

How to delete a button

  1. Go into the editing window
  2. Click on the link to select it, and then press backspace or delete.