Navigation and links
-
- The URL is the address or location of the destination page, technically, the “href” (hypertext reference). An example would be https://www.fdu.edu/admissions/freshman/counselors/. It starts with https:// (Secure HyperText Transfer Protocol) and includes the domain name (www.fdu.edu/ or fdu.edu/ for short) followed by a path (admissions/freshman/) which leads to the “resource” (counselors/). In this case, it’s another webpage. URL stands for Uniform Resource Locator. By design, the resource is another webpage. But its role has been expanded to identify an image, video, PDF, audio recording, or other media. By law, everything we link to must pass the accessibility guidelines.
-
- The “anchor” is either a “text link” or an “image link.” It is the thing we select by clicking or touching that invites us to access the resource. The anchor must contain text in some way so that a person who cannot see the link can have it read aloud to them by their own device’s reading system. In the example above, “admissions counselors and their territories” would be referred to as “link text” or “anchor text.” For accessibility reasons, the link should never be the URL itself. It should use words to describe the destination resource. Notice the difference between “text link” and “link text.”
Main navigation: parents and children
On the desktop, and on most tablets held horizontally, the navigation is on the left of the screen.
On a smartphone (either orientation), and most tablets held vertically, the navigation is not visible. At the top of the page (below the breadcrumb trail) the navigation is found by clicking the large plus (+) icon to the right of the word “Navigation.”
This navigation is commonly understood to be a list of the child pages of this page if it is a parent, or the list of sibling pages, if the page is not a parent.
Redirection is not allowed in the main navigation
In the past, we created pages in this navigation list that do not have any content. That blank page was used to redirect the user’s browser to a page in another section of the website, or to another website altogether. This practice is not accessible. The reason is that it produces an unexpected result. In layman’s terms is can be described by the principle of least astonishment (POLA). “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.” More generally, the principle means that a component of a system should behave in a way that most users will expect it to behave; the behavior should not astonish or surprise users.
Alternate navigation
Instead, links can be included in the content area of the page. Several design components are implemented in this website that can clearly serve the purpose of linking elsewhere within the website.
Lists of links
Links are often displayed on a web page in a list. For example, FDU has two New Jersey campuses:
How to create a link
Type in the link text, highlight it, click the Insert/Edit Link icon (it looks like a piece of a chain). Type or paste the destination URL into the field, click the Enter icon.
Alternately, click the link icon and then start typing in the title of the destination page. As you type, a filtered list of pages will appear. When you find the page you want, click the Enter icon. If more than one page has the same title, look at the URL of that page. If it does not make sense, search again select a different page. Notice that the entries are classified as Page, Directory, Program, or a date (these are news items). These classifications will help you select the page you want.
Special formatting for links
A link on a line by itself can be displayed in a blue box. Create the text link first. Then select it (or simply click anywhere in it), and select Blue Button from the Formats > Button menu.
Components
The Button Bar component provides a red heading and up to three buttons in a row on the desktop, two on a tablet, and one per row on a smartphone. (This is a general rule. Brands and models may produce slightly different results.)
Other components follow that allow (or require) the inclusion of an image link.
CTA Cards
- Two across in the Default template on desktop or tablet.
- Three across in the Landing Page template on desktop.
- One-across on either template on the smartphone.
- Link is required. Surprisingly, link text is not.
World Wide Web Consortium