Account login is available via UA NetID at: https://www.lpl.arizona.edu/user

Main LPL website account holders can log into the site to access certain resources, such as LPL Logos & Templates, and bypass CAPTCHAs on forms. Additional features may be provided based on the role of the account holder (such as profile page updating). Various other groups (e.g., outreach, library, sys, business office, etc.) may receive additional permissions to edit certain sets of pages or content types.

LPL profile pages are provided to graduate students, faculty, postdocs, and staff scientists. To update your profile page, click the "Update Your Profile" button on your page, log in, and click on the Edit buttons to see fields which you can update.

There are two options for creating a personal web page:

• Maintain your LPL profile page.
  • See the FAQ item "How do I update my profile page?" for more information.
• Create a site using a third-party service and add the link to your LPL profile page.
  • UA offers Google services that are included with all student CatMail accounts and available to faculty and staff by opt-in on UITS Accounts Management. Google Sites is a service available under the UA's Google services offering.

LPL sites use the Arizona Quickstart asset package on the Drupal content management system (CMS).

Learn how to work with Drupal with these resources:

• AZ Quickstart
• Drupal
• Contributed Modules

AZ Quickstart

• Working with Content
  • Adding Content
  • Finding Content
  • Content Types
    • Pages
    • Events
    • News
    • People & Directories
    • Webforms
  • Blocks
• Navigation
  • Main Menu
• Best Practices
  • Accessibility
  • Descriptive Links
  • Writing for the Web

Drupal

Drupal User Guide

• Understanding Drupal
  • General concepts
  • Content types
  • URL paths
• Nodes, content types and fields
  • About nodes
  • Working with content types and fields
  • Create a custom content type
  • Add a field to a content type
  • Rearrange the order of fields
  • Specify how fields are displayed
• Organizing content with taxonomy
  • About taxonomy
  • Add a term to a vocabulary
  • Add a vocabulary to a content type
  • Create a vocabulary
  • Guidelines for taxonomy design
  • Organizing content with taxonomy
• Working with menus
  • Overview
  • Adding a link to a menu
  • Drop Down menus
  • Named anchors in menus

Contributed Modules

• Views
• Webforms

Accessibility on the web ensures all individuals have equal access to the content on a site.

The University has adopted the World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) 2.0, level AA and Revised Section 508 Standards of the Rehabilitation Act.

Key Elements in Creating Accessible Sites

• Ensure text color has sufficient contrast from the background.
  • Color Contrast: Color your site with care
  • WCAG 2.0 1.4.1: Use of Color
    • Understanding WCAG 2.0: Use of Color
    • Techniques for WCAG 2.0: Use of Color
  • WCAG 2.0 1.4.3: Contrast (Minimum)
    • Understanding WCAG 2.0: Contrast (Minimum)
    • Techniques for WCAG 2.0: Contrast (Minimum)
  • WebAIM: Color Contrast checker
• Structure a page with headings H1 > H5.
  • Use Headings to organize your documents
  • WebAIM: Semantic Structure Guidelines
• Avoid elements that only activate with hover-over.
  • All content is accessible with keyboard alone, in a logical way
  • WebAIM: Keyboard Accessibility
  • WebAIM: Keyboard Accessibility - Tabindex
• Use descriptive labels for form fields.
  • Design your forms for accessibility
  • WebAIM: Creating Accessible Forms
• Use tables only for data, not for page layouts.
  • Create accessible Data Tables
  • WebAIM: Creating Accessible Tables - Layout Tables
  • WebAIM: Creating Accessible Tables - Data Tables

Additional Resources

• University Commitment & Obligation to EIT Access
• Accessibility Standards
• Website Accessibility
• Taming the Wild West of Dynamic Content on the Web for Accessibility
  • WebAIM: Accessible JavaScript
• Use an Accessible Content Management System
  • Drupal 7 and 8 Accessibility

From the editor, links can be added that either link to another page/site or to a file uploaded to the site through the File Browser.

Please review How do I make links accessible? for things to consider when making a link.

1. Navigate to the page you want to edit and click the "Edit" button.
2. Edit the relevant textarea and type in the text.
3. Highlight the text to be linked.
   
4. Click the 'Link' button in the middle row of the toolbar (button shows a picture of a chain link).
   
5. Enter the link URL:
   
   • If the link should go to a file uploaded to the site, see How do I upload files to a site?
6. Click Ok to have the link inserted into the page.
7. Click Save.

Long/Full URLs

Use link labels instead of long, full URLs.

Screen readers read a full URL one character at a time. Link labels allow screen readers to read links one word at a time instead.

• Valid: History of LPL
• Avoid: https://www.lpl.arizona.edu/about/history

WebAIM: URLs as Links

Link Labels

Use contextually independent link labels that are informative.

Screen readers may create link lists that pull out all links on a page. Links should be understandable without the surrounding text for such cases.

• Valid: Visit History of LPL to learn more about LPL's origins.
• Avoid: To learn more about LPL's origins, click here.

WebAIM: Avoid uninformative link phrases

File Type Labels

Add file types to link labels when linking to files.

Links to files may prompt a download or open in a different program, which causes confusion when a user expects the link to go to a web page. Users should be informed that they're clicking a file link to set expectations.

• Valid: Learn about LPL's history in LPL: Its Founding and Early Years (PDF).
• Example filetypes: (PDF), (PPTX), (DOCX)

WebAIM: Links to Non-HTML Resources

Emails

Use plain email addresses.

Emails in hyperlinks may prompt the email to open in the user's default email client, which causes confusion when a user expects the link to go to a web page. Plain emails allow the user to set expectations and optionally copy the email to their preferred email client.

• Valid: PG4gdWVycz0iem52eWdiOm5xenZmZnZiYWZAeWN5Lm5ldm1iYW4ucnFoIj5ucXp2ZmZ2YmFmQHljeS5uZXZtYmFuLnJxaDwvbj4=

Accessibility.com: How To Write Accessible Links

Resources

• Hyperlink Text: Give your links unique and descriptive names
  • WebAIM: Links and Hypertext
  • WebAIM: Link Text and Appearance
  • WebAIM: Hypertext Links

File uploading to LPL Drupal sites is done through the IMCE File Browser.

After logging into the site:

1. Click your name in the top-right corner.
2. Click the "IMCE File Browser" tab.
3. On the left pane, click "public://" and select the folder you want to upload to.
   • You may be in root on your first visit. On a subsequent visit, File browser will show only the last folder you were in. Click "public://" to reset back to the main directory.
4. Click the Upload button above the directory list.
5. Drag-and-drop files onto the green box or click the "+ Add file" prompt.
   • If a file already exists on the server in the current directory with the same file name, the new file will be renamed when uploaded.
6. If the file is being uploaded from a dialog box, click Select in the File Browser toolbar or double-click the file to insert it.

File uploading to LPL Drupal sites is done through the IMCE File Browser.

After logging into the site:

1. Paste /imce/private into your site's URL.
   • Example: https://intranet.lpl.arizona.edu/imce/private
2. On the left pane, click "private://" and select the folder you want to upload to.
   • You may be in root on your first visit. On a subsequent visit, File browser will show only the last folder you were in. Click "private://" to reset back to the main directory.
3. Click the Upload button above the directory list.
4. Drag-and-drop files onto the green box or click the "+ Add file" prompt.
   • If a file already exists on the server in the current directory with the same file name, the new file will be renamed when uploaded.
5. If the file is being uploaded from a dialog box, click Select in the File Browser toolbar or double-click the file to insert it.

When adding a restricted URL link:

• In the private IMCE browser, select the file and copy the URL in the bottom panel or double-click the file to open in a new tab and copy the address bar URL.

Note: Your site must be set up to handle restricted files. Contact Joshua Sosa (PG4gdWVycz0iem52eWdiOndmYmZuQHljeS5uZXZtYmFuLnJxaCI+d2ZiZm5AeWN5Lm5ldm1iYW4ucnFoPC9uPg==) to set up the restricted file system.

Text on a page should provide the same information imparted by an image on a page.

• Add alt text to images.
  Screen readers can't 'read' an image. Alt text helps add that information.
• Keep alt text short and descriptive.
  Alt text should not contain a paragraph.
• Use plain text on a page instead of text embedded in an image.
  Where possible, opt to use regular text when embedding text isn't necessary.
• Use an empty 'alt' tag for decorative images.
  Images used for simple decoration don't need to be described.
• Use an empty 'alt' tag for images with descriptive plain text adjacent to them.
  Images of a portrait photo of a person alongside their plain text name don't need to be described.

Resources

• Image Descriptions (Alt Tags): Make images accessible
  • WCAG 2.0 1.1.1: Non-text Content (Level A)
    • Understanding WCAG 2.0: Non-text Content
    • Techniques for WCAG 2.0: Non-text Content
  • WCAG 2.0 1.4.5: Images of Text
    • Understanding WCAG 2.0: Images of Text
  • WebAIM: Accessible Images
  • WebAIM: Alternative Text
  • Level Access Webinar: Quick Tips for Writing Meaningful Alt Text

• Get the Google Maps Embed Code
• Place Google Maps Embed Code into Page
• Example

Get the Google Maps Embed Code

1. Go to Google Maps and search for the address.
2. After finding the location, in the details pane on the left, click the "Share" button.
   
3. Click on the "Embed a map" tab and choose the size.
   
4. Click on the <iframe> HTML line and copy it.

Place Google Maps Embed Code into Page

1. Navigate to the page you want to edit and click the "Edit" button.
2. Under the relevant textaera, ensure the Text format is either Full HTML or HTML.
   
3. If using Full HTML, click the "Source" button to view the textarea's HTML.
   
4. Paste the embed code in the HTML where needed.
   
   • Optionally, edit the iframe's width and height attributes as needed.
   • Example: To make the map span across its available content space, set the iframe width to 100%.
5. Click the "Source" button again to see the embedded iframe container in the normal editing view.
   
   • Optionally, double-click on the IFRAME or highlight it and select the IFrame in the top row.
   • Edit additional iframe options, such as width and height.
6. Click Save.

Example

Images are added to a page using the page's edit mode text formatter.

1. Navigate to the page you want to edit and click the "Edit" tab.
2. In the relevant textarea, place your cursor where you want the image to show.
3. Click the 'Image' button in the top row of the toolbar (button shows a picture of mountains and a sun).
   
4. Enter the image URL:
   • If the image should go to a file uploaded to the site, see How do I upload files to a site?
5. Optionally use the Image button with music icon instead to "embed media."
6. Click Ok to have the image inserted into the page.
7. Click Save.

The Arizona Digital team created the Arizona Bootstrap HTML template based on the Bootstrap 4 front-end framework. AZ Bootstrap can be used for creating HTML pages with the U of A web design. All LPL Drupal sites and pages use the AZ Barrio theme to automatically apply the UArizona web design.

The LPL-themed version of the AZ Bootstrap template is available here for download which can be edited with your favorite code editor.

Download az-bootstrap.html (8 KB)

The LPL Calendar provides an iCal option to subscribe to the event list in your own calendar program.

On the LPL Calendar page, at the bottom of the event list, the iCal icon gives a link to the web calendar:
webcal://www.lpl.arizona.edu/calendar/ical.ics

Visit the LPL Internal Calendar page for an internal iCal subscription option.

See the following help articles to subscribe to the web calendar in a calendar program.

Google Calendar

Use a link to add a public calendar:

1. On your computer, open Google Calendar.
2. On the left, next to "Other calendars," click Add From URL.
3. Enter the calendar's address: webcal://www.lpl.arizona.edu/calendar/ical.ics
4. Click Add calendar. The calendar appears on the left, under "Other calendars."

Tip: It might take up to 24 hours for changes to show in your Google Calendar.

Windows Outlook Calendar

Add internet calendars:

1. Open your Outlook calendar, and on the Home tab, select Add Calendar > From Internet.
2. Paste the URL from your internet calendar and select OK: webcal://www.lpl.arizona.edu/calendar/ical.ics
3. Outlook asks if you would like to add this calendar and subscribe to updates. Select Yes.
   • Ignore the error saying "Sorry, something went wrong." 
4. Under My Calendars or Shared Calendars, checkmark to enable the LPL Calendar.

Tip: It might take up to 24 hours for changes to show in your Outlook calendar.

Mac Calendar

Subscribe to calendars on Mac:

1. In the Calendar app on your Mac, choose File > New Calendar Subscription.
2. Enter the calendar’s web address, then click Subscribe: webcal://www.lpl.arizona.edu/calendar/ical.ics
3. Enter a name for the calendar in the Name field, then click the adjacent pop-up menu and choose a color.
4. Click the Location pop-up menu, then choose an account for the subscription.
   • If you choose your iCloud account, the calendar is available on all your computers and devices that are set up with iCloud.
   • If you choose On My Mac, the calendar is saved on your computer.
5. To get the calendar’s event attachments or alerts, deselect the appropriate Remove checkboxes.
6. Click the Auto-refresh pop-up menu, then choose how often to update the calendar.
7. To prevent alerts from appearing for this calendar, select “Ignore alerts.”
8. Click OK.

Tip: It might take up to 24 hours for changes to show in your Mac Calendar.