This page explores the ways that we link to web pages and files in this template.
Hyperlinks
Hyperlinked text should include the following, wrapped in an <a> tag:
- href="" – This is the destination URL.
- For URLs that are part of the Jindal School multisite (listed below), use a relative URL, such as “/mba/academics/”
- jindal
- accounting
- fin
- infosystems
- marketing
- om
- osim
- mba
- execed
- myjsomkb
- For URLs outside of the Jindal School multisite, use an absolute URL, such as “https://utdallas.edu/”
- Use target="_blank" rel="noopener" on URLs outside of the Jindal School, on MachForms and on PDFs. This opens the link in a new tab. Do not open the link in a new tab if the page is another Jindal School web page.
- In WordPress, you can highlight text, click the “Link” button above the content field, and check “Open link in new window” to make the rel and target attributes appear as indicated above.
- Use this method when linking to PDF files or applications/forms, as well.
- descriptive link text – Use clear, action driven words for the linked text.
- Avoid language like “click here” or “read more,” which are vague and likely to occur more than once on a page.
- Change “click here” and “read more” to something more contextual and specific, such as “visit the admissions page” or “read more about Jennifer.”
- If it is not possible or convenient to make the link text more specific, add aria-label="[describe the specific purpose of the link]"
- title="" – The title attribute is not needed for accessibility, so we do not use it.
Our template underlines hyperlinks unless they are styled like buttons. For all links, hover and focus change the background color for good web accessibility and user experience.
Call-to-Action Links
Add the class cta-link to an anchor element to create a call-to-action link. A call-to-action link usually ends a section of text. Often the format of a section is image, heading, paragraph, call-to-action.
When possible, a piece of content on a page should give the user something to do after they’ve read the content. A call-to-action link serves this purpose.
Use the JSOM Heading Standards for capitalization, but do not use punctuation at the end of the text; punctuation doesn’t look good with the arrow at the end of a call-to-action link.
Use an action word (verb) as the first word.
Below is in example of a call-to-action link.
See JSOM Heading StandardsButtons
Buttons get the user’s attention, so deploy them with care. Too many buttons on a page can create confusion about what the user is expected to do. A button is a call to action, so it needs clear, descriptive, direct text. Capitalize the important words in a button label.
In our template, buttons are simply an html element (usually an <a> tag) with the class “btn.” Adding an additional class gives the button one of the colors seen below. (Note that the buttons don’t float to the right by default; they only float to the right for the purposes of this page.)
Buttons are strong as a call-to-action. We use them less often and more specifically than a call-to-action link (above). A button usually links to an application, pdf, or very important web page, such as application process or financial aid information.
Also, button labels are better when they’re brief. If the text on an important link is long, consider using the cta-link class instead of btn. For example:
Start Your Application for Graduate Admission NowStart your application for graduate admission now
The btn-gray button links to additional information. This is the button we use most often.
The btn-green button links to registration, application or payment. Usually the button text is a strong verb, such as “Apply,” “Request Information,” or “Register Now.”
The btn-orange button is a lesser-used button that links to additional information. As a rule, use btn-orange only as an alternative to btn-gray, when btn-gray would not look good or function well.
The btn-inactive button indicates that an action is not currently available, but we want the user to know that either a deadline has passed or the action is coming soon. Be sure to remove the href attribute from an inactive button, so that the link is truly inactive.
Image Links
While text and button links are the most common way to link to content in this web template, there are some cases when it is appropriate to use an image as a hyperlink. It is important that image links be clear to the user, so our image links include either an arrow or a button to reinforce the linking function of the image. Also, it is best to use icons as hyperlinks, not photographs.
The purpose of a photograph in our web template is to visually reinforce the message of a page and to add color and emotion to the message, whereas the purpose of an icon is to quickly deliver information to the user. Because icons have this symbolic, informative purpose, icons are better suited than photographs to act as a hyperlink.
Catalog link
A sentence will follow with a hyperlink so the catalog can be viewed with one easy click. It will be simply stated and directly take the reader to the catalog.
Please review the UT Dallas Graduate Catalog for the most up-to-date curriculum details.
Multiple Links
Multiple links can be used by being separated and boxed up so clearly stated and a good call-to-action. After a user reads the page content, and there is not one but two or even three actions you would like them to take, multiple links work well individually boxed up. Often a heading “What would you like to learn about next?” precedes with multiple links.
Multiple links work well for two, three or maybe four links that are all of equal importance, as shown below