Hyperlinks are pathways between web pages that users can click on to go to another internal or external page on the internet. OpenCities has a few different forms of links you can use to highlight your content or encourage your community to take action on your site.
You can use text links, call-to-action buttons, styled buttons, or featured links on your site as you need to, but there are some tips we can give you for best practice.
But first, here are some details of the different types of links you can insert into a page:
|
Internal or external links: Internal or external links are inserted as text with specific styling to differentiate them from regular text. Text links can link to internal web pages, external web pages, anchor links, email addresses, or phone numbers. These links can be inserted into a WYSIWYG Editor through the Hyperlink Manager or page fields, including Supporting information links. |
|
|
Document links: Text links to documents, with an icon indicating the document types (such as PDFs or XLS docs) that appear at the end of the link and the file size. This is so the user can tell the link is a file that can be downloaded and how big it is before they do so. These links can be inserted into a WYSIWYG Editor through the Document Manager or page fields, including Supporting information links. |
|
|
Call-to-action buttons: Hyperlinks styled as buttons with a small arrow icon, indicating that there is an action you want to encourage your community members to take. These buttons will be styled when we create the theme for your site and will be unique to your city or council styling. Call-to-action buttons are best used for specific actions, such as "Apply now" or "Register here", or when filling out a form. They can be used in the WYSIWYG Editor. |
|
|
Styled buttons: Hyperlinks that are styled as buttons designed to highlight internal or external links. Styled buttons are found in a few different places on your site but can also be used in the WYSIWYG Editor. Styled buttons are styled as we create the theme for your site. They do not display with icons and will be unique to your city or council branding. These buttons are best used to highlight links to web pages, such as "View more" links. |
|
|
Featured links: Hyperlinks that are styled and grouped as buttons that link out internally or externally. Featured links are styled as we create the theme for your site and do not possess icons. They are styled according to your city or council branding but differently than styled or CTA buttons. They can be inserted into WYSIWYG Editors. They are best used to create navigation or group important links, particularly with content types such as OC Department pages or OC General pages with a full-width template. |
Now that you understand the types of links in OpenCities, read on for some best practice tips.
Writing Link Text
- Using appropriate keywords, link text should be meaningful, descriptive, and unique.
- Link text should always start with the most relevant words first, and a site visitor should know where a link will take them before they click on it.
- Hyperlinks in the text should also fit into the flow of the content, as these links are often followed when people are looking for more information.
- Avoid links from phrases such as "click here" or "read more," and avoid using URLs as the link text, as screen readers will read each letter individually.
- Screen Reader users can also use the link text to get an overview of the content on a page, but they have to read the entirety of the link, so make sure the link text is not too long but still long enough to provide context.
- Link text should be consistent, particularly with buttons or styled links. You may want to include instructions in your style guide about how your content authors should write links.
Email and Phone Links
OpenCities provides the capability to insert linked email addresses and phone numbers. When writing link text for emails and phone numbers, you must write the email address or number in full for these reasons:
- These links will often directly open the user's preloaded email client or phone app, which may not be the preferred option. Users must be able to read, copy, and paste the text.
- A link from a contact name could be linking to a page about that person or organization, but linking the complete phone number or email address will indicate an action.
For example, instead of using "contact us via email or phone", you should write "To contact our customer service centre, email services@pointrussell.gov or call us on (09) 8383 2929."
Same or New Window
When creating links, you can set them to open in the same window or a new window. You should think carefully about which option you choose. Automatically opening new tabs or windows can disorientate the user, particularly on mobile devices, making it harder for users to manage their open windows.
The best reason for opening links in a new window is if the link relates to a task the user needs to complete. For example, if they need instructions to complete a service, such as more information about an OpenForm a user is completing. We recommend selecting how you want all text links and document links to open and including this information in a style guide for your content authors.
Additionally, always use the same words for the same URL; users shouldn't reach the same URL from different link text, nor should they reach different URLs from the same words.
Tooltips and Alt Text
Tooltips and alt text provide additional information for links and images. Tooltips allow you to add text to your links, displaying as users hover their cursor over the link. Screen readers will also read this text.
You can use the Tooltip field in the Hyperlink Manager to provide additional context for a link's destination. For example, a link to a document may use the document name as a tooltip, while a link to a page may have more ambiguous link text, requiring an explanation.
Lastly, try not to use images as links, but if you need to, you must use the alt text to describe the image and where the link goes.