1. Knowledge Base
  2. WYSIWYG Content Editor

Creating & Managing Hyperlinks

Adding and updating links in the WYSIWYG Editor and complying with WCAG Standards.

When working on pages and other elements that use the WYSIWYG Editor you will want to be able to include links to other information either internally or externally.

You also need to ensure that how you add the links comply with the latest WCAG Standards.

In this section we will show you how to do just that.


General Guidance

  • Underlines are no longer required for links
  • All links must user proper language.
  • Should be in proper case. Only Buttons should be in all Caps.
Good
  • Click here to complete our online form
  • Visit their website for more information
Bad
  • https://www.treeviewdesignsdemo.co.uk/contact
  • Click here

Internal Links

Internal links are for content that exists either as a Page, News Article or Team Page. This means that any forms or media items need to be embedded on a page for you to be able to link to them.

  1. Add the proper text you wish to use for the link.
  2. Highlight all the text you have used
  3. Select the link icon from the tool bar. 
    Add Link 
    You will be presented with this pop-up
    Link Window
  4. From the 'Select internal resource' dropdown you can choose from a Page, News Article or Team Page.
  5. Next choose the 'Target' Tab and select 'Same Window' from the drop down
    Same Window
  6. Click Ok

You now have created the link and you will need to review the content on site to check it works.


External Links

These are used when you are linking to content that is on an external site.

  1. Add the proper text you wish to use for the link.
  2. Highlight all the text you have used
  3. Select the link icon from the tool bar. 
    Add Link 
    You will be presented with this pop-up
    Link Window
  4. You will need to paste the link from the external page into the URL field.
  5. Next choose the 'Target' Tab and select 'New Window' from the drop down
    New Window
  6. Next choose the 'Advanced' Tab.
  7. In the 'Advisory Title' field add the name of the site followed by: (Opens in a new window). This is done to provide assistive technology an interpretation to offer. 
  8. In the 'Relationship' field add: nofollow noreferrer noopener. This is done to promote assistive technology can promote this as a safe link.

    Advanced Link

You now have created the link and you will need to review the content on site to check it works.


Further reading