J4.x:Article Links

Select a link in a document and your browser opens the linked document, either in the same window, a new window or a new tab. A person using a screen reader my be navigating by links alone so link text needs to be meaningful.

The following is an example of bad practice.

The following is an example of good practice:

To find out more about accessible links see this article on Creating valid and accessible links.

Insert an External Link

For an external link you will need to copy the link to the clipboard from the url bar of your browser. For this purpose it is helpful to have separate windows or tabs open for your Joomla administrator Articles: Edit form, your Joomla site article view and the remote site you are creating a link to.

Open your article for editing. There are several methods available for link creation. One method is to type in sentence that contains the text to be used for the link text. For example:

For more information, please visit the Joomla! website.

• Select the word or words to be linked, in this case Joomla! website.
• either Select Insert → Link from the Article Text menu.
• or double click the selected text to open a popup menu that contains a link icon to select.

Either method will open an Insert/Edit Link dialog box:

In the Insert/Edit Link dialog:

• In the URL field, paste the link copied from the destination window url bar.
• The Text to display field should contain the text you selected before opening the dialog. If not, any text you type here will be inserted into the article so needs to be something that makes contextual sense. Avoid Click here or Read more.
• The Title field creates a link Title attribute but its use by browsers is inconsistent and controversial for accessibility purposes. If in doubt, leave it blank.
• The Rel field has a number of options. If in doubt, leave it set to None. There is a list of options available in the mdn web docsarticle on HTML attribute: rel
• The Open link in. field is a simple choice between Current Window and New Window. The browser settings control whether that results in a new separate window or a new tab.
• Save

After saving the article, switch to the site view and check that the link looks good and works properly. Also, try it with a Screen Reader!

Insert an Article Link

The process to insert a link to an article in the same website is similar up to the point where the link text is selected. For example:

• Type in the sentence containing the link text: For more information, please see the Typography page.
• Select the link text: Typography
• From the CMS Content drop-down list select Article.
• An Article dialog appears with a list of articles. Select the Typography article title.

Save the article and try it out in the site view.

Remove a Link

• Click on the link.
• Select the ellipsis icon (. ) to open the editor's expanded menu.
• Select the Remove Link icon.

The text remains but the link is gone.

• Double click on the link.
• Select the Link icon in the small popup.
• In the Insert/Edit Link dialog, delete the content of the URL field.
• Save

The text remains but the link is gone.