Explore UAB

Any website created on behalf of the university, including when grant funds are awarded to the university, must comply with the following UAB research website brand guidelines and UAB web content guidelines.

• UAB websites must be hosted an an official UAB-approved Content Management System (CMS), either Joomla or WordPress.
• UAB will provide free hosting of your site on Joomla or WordPress.
• Domain name registrations and transfers for all domain names held by users across campus are managed by MarComm and charged back to the appropriate GL account.
• Current web guidelines do not allow outside vendors to perform web work for the university with the exception of High Level Marketing and Shawn Wright. In addition, UAB has a defined process through our Master Service Agreements (MSA) when working with outside agencies.

For UAB research websites where UAB is the sole awardee of funds, websites must follow the UAB Web Branding Guidelines which include:

• The UAB standardized header (full-width green bar with the UAB logo) must be visible and not manipulated.
• The UAB standardized footer containing the UAB logo, text-only link, links to our Privacy website and Terms of Use, our copyright and Equal Opportunities statement required by law must be visible and not manipulated.
• UAB research websites should use Proxima Nova and Kulturista fonts, which are available in Adobe Typekit or licensed from Adobe Creative Cloud.
• UAB colors should be incorporated into your research website. However, you may use additional colors that complement the UAB color pallet to help distinguish the research study. The color red should be avoided unless it has symbolic meaning related to the research study and should only be used as an accent color.
• Web accessibility standards must be met.

For UAB research websites where UAB is part of a multi-site study:

• The UAB standardized header (full-width green bar with the UAB logo) may be removed for research studies that are being conducted with other universities and institutions outside of UAB.
• The UAB standardized footer containing the UAB logo, text-only link, links to our Privacy website and Terms of Use, our copyright, and Equal Opportunities statement required by law must be visible and not manipulated.
• Fonts and colors are flexible on multi-site research study websites as long as web accessibility standards are being met.
• If you are displaying a third-party logo of another university or institution outside of UAB on the website, you must receive written permission from the university or institution for their logo to be displayed on a UAB-hosted website.

1. Applications should provide a specific utility or function not available on a mobile-optimized website. Converting a mobile website into a mobile application will not qualify as an approved app.
2. Applications should not duplicate the functionality of existing or planned apps.
3. Applications must meet all UAB Branding guidelines outlined in the Brand & Communications Toolkit. Special exceptions can be made for research studies that are collaborations with other universities or national centers. Branding will be reviewed before any application is published to the Apple/Google Play Store.
4. Applications must be published under an official UAB Apple or Google developer account. UAB has an institutional developer account for enterprise apps such as the main UAB mobile application and UABwell. UAB also has a developer account dedicated to applications for research purposes. UAB IT’s mobile application team is responsible for publishing all applications.
5. Applications must adhere to all guidelines outlined in the in UAB’s Terms of Use & Privacy Policy.
6. Applications must adhere to all specifications set out in the Apple and/or Google Play terms and conditions.
7. Applications should pass all ADA accessibility requirements as outlined in the UAB Web Accessibility policy.
8. Applications should adhering to all information security policies and complying with relevant laws and regulations.
9. All contracts with third-party vendors and custom developers must be reviewed by IT & Marketing & Communications prior to the finalization of the contract.Important note: Purchasing will flag any app-related requested expenditures and will not authorize payment without contract approval.
10. Any application that has commercialization or licensing potential will be reviewed by the Bill L. Harbert Institute for Innovation and Entrepreneurship. UAB Patent Policy requires all faculty members, university employees, and students, as a condition of their employment and/or enrollment, to report any invention or discovery which they have conceived or developed, or which has been conceived or developed under their direction, during their employment or enrollment.

Steps to publishing a mobile application

1. Submit Mobile Application Approval Form. Requests for mobile applications are approved by UAB IT and Marketing & Communications. This includes applications that will be developed by 3-party vendors.
2. Develop Application
3. Submit final application for branding review by Marketing & Communications.
4. UAB IT’s Mobile Application team will work with user to publish app in Apple/Google Play store.

• ARIA landmarks
• Keyboard navigation
• Accessible forms
• Text magnification
• Audio & video control

Website accessibility depends on the website's code as well as its content. If you are using a Joomla or Wordpress site built by Marketing & Communications, much of the following functionality has already been programmed into your site. If you are creating a website or other online content, you should keep the following in mind.

ARIA landmarks and other semantic elements to communicate document structure

The structure of your site is important for providing users of screen readers a positive experience. If you are coding a page yourself, mark up different regions of pages (headers, footers, content, etc.) so that they can be properly identified by web browsers and assistive technologies. Provide "skip to main content" links to allow visitors to bypass redundant navigation links. 

Verify your page is keyboard navigable

Using just your keyboard, make sure that each input and interaction on the page can be triggered. This includes noticing if the order in which a visitor tabs down the page is logical and that each element has focus when it is selected. Interactive elements should be:

• reachable via keyboard only,
• visible when in focus by the keyboard,
• usable once focused, and
• presented in a logical tab order.

Create accessible forms

Forms need to function without a mouse and must be labeled clearly — fields and labels must be programmatically associated with one another. Keep your forms as simple as possible — visitors may give up on long forms or forms that ask for irrelevant information. Read more about form options on UAB websites here.

Allow magnification of text without losing functionality

When users zoom into text or increase their browser’s font size up to 200%, the page content should still be readable and navigation or other interactive parts should still function.

Give visitors control over audio and video content

• Features that scroll automatically, such as slideshows, should have controls allowing users to easily pause, stop, or advance them. See the W3C guidance on Pause, Stop, Hide. 
• Video and sound features must have accessible controls, and do not autoplay. See the W3C guidance on audio controls.
• If your page contains an element which requires a visitor to complete a task in a certain amount of time, warn them in advance and give them an opportunity to extend the time. See the W3C guidance on time limits.
• Avoid flashing or flickering content. See the W3C Three Flashes or Below Threshold guidance. 

• Clear, concise content
• Alt text
• Captions
• Heading structure
• Other structural elements
• Color representation
• Color contrast
• Link text
• Flashing elements
• iframes
• Site validation

The following list is an overview of checks that each webpage should be subject to prior to publication.

Write clear, concise content

Use the clearest and simplest language appropriate for a site's content. Create a descriptive, concise page title. Write in short, clear sentences and keep your paragraphs brief. Avoid unnecessarily complex words, phrases, and jargon. Use bullet lists to break up sentences that are long lists of items. 

Provide alt text for images, graphics, and charts

Alt text is a short description of no more than 125 characters describing the content of an image. For example, instead of alt text reading "students," provide details: "Students throwing frisbees on the UAB Campus Green."  Your content editor (for Joomla, it's JCE) makes this field visible to you as you place the image in the content. Visitors using screen reader programs will hear the alt text read aloud.

If you cannot summarize the content of the image in 125 characters and the content is not supplied in the text of an article, you will need to supply a text equivalent. This is often the case with infographics, org charts, and other information-heavy images. Provide a link to the information written as web text on a separate page, or add the text to the page. Remember to update the text equivalent whenever the original image is updated.

Please note that text should be used within/as an image for decoration only, or when the information cannot be presented with text alone.

If the image is purely decorative (for example, the image of a faculty member on their faculty bio page), use the empty alt text attribute, alt="". Learn more about decorative images.

Provide video captions and audio transcripts

Video and audio content can enhance your site, but they can also be challenging for people with disabilities. All audio and video web content must be presented with either captions or a transcript. The UAB Disability Support Services office recommends several free captioning services to UAB faculty and staff. Go to the Commitment to Captioning page to see a list of those apps and learn more about some of the university's efforts to ensure universal access to communication.

If you are captioning your own videos, do not rely solely on automatic captioning. 

There are two types of video captioning available in Canvas: machine and professional. Machine captioning is around 80% accurate and can be edited to increase accuracy. Please note that machine captioning does not meet the needs of students who are approved for video captioning as a DSS accommodation. 

Professional captioning is more accurate and can be requested via the UAB Disability Support Services request form. Professional captioning is strongly recommended by DSS for all course videos and is the required method of captioning when a student in the course is approved for captioning as an academic accommodation.

Remember to update both captions and transcripts if the original material is changed.

Structure your content with headings

Headings (H1 to H6) give structure to the content on your page. When headings are coded correctly, users of voice input, screen readers, refreshable braille display, and other browser technologies benefit by being able to use voice and keyboard commands to navigate between headings. This makes pages more scannable and less restrictive for users as they don’t have to navigate content linearly, which can be very time consuming. Some search engines also use headings to index pages.

These tips will help you utilize headings effectively in your sites:

• Headings should represent sections of a page's content structure and not be used merely for visual effects. Headings should be consistent throughout the site — do not change the heading stylngs in Joomla (for example, do not add bold or underline or change their color).
• For all visual headings in web pages, you must apply a heading structure using H1 through H6:
  • Pages should only have one main heading, H1, which is the main title of the page and should be positioned at or near the top. 
  • Sub headings of the H1 must be coded as H2, subheadings of an H2 must be coded as H3, etc.
  • Multiple H2, H3, etc., can be used as needed.
  • Heading levels can’t be skipped, i.e., do not jump from H1 to H3.
• Headings should not be coded around content that is by itself; they should always be followed by associated content.
• Headings should not be used on form labels such as the text label “Search” that comes before an input field.
• Use headings to break up large chunks of text.
• Keep headings short and succinct (this way they are easy to scan and understand).

Use lists, tables, aria landmarks, and other structural elements

Lists

Use the built-in list formats in your content editor to create ordered (numbered) and unordered (bulleted) lists instead of typing a number or using a graphic. This helps users of screen readers understand your content. 

• W3C Bullet List Tutorial

Tables

It is best to avoid using a table unless absolutely necessary as they are often difficult to read on mobile devices and by screen readers. Tables should never be used merely as page design elements or for general page structure. If used, tables must be coded fully with proper semantic HTML information.

• Branded UAB table coding (Dragon Scale)
• W3C Tables Tutorial
• WebAIM Creating Accessible Tables
• 18f.gov Table Examples

Paragraphs

Make sure that all of your paragraphs are marked with the paragraph tag: <p>. This will help users aided by a screen reader know where one paragraph ends and a new one begins.

Aria Landmarks and Other Semantic Page Structure Elements

If you are coding a page yourself, mark up different regions of pages (headers, footers, content, etc.) so that they can be properly identified by web browsers and assistive technologies.

• W3C Page Regions Tutorial
• WebAIM Semantic Structure

Do not use color or other visual characteristics to communicate information

Have you used instructions like "click the image on the right?" Have you signified important information by putting it in red text or bold text (or both)? Have you used color to indicate which fields on a form are required? Using only visual descriptions in your text makes it difficult or impossible for people with certain disabilities to understand that the specific information is important. 

Possible solutions:

• "Click the image on the right" — Instead, supply the link in the text.
• "Required fields are in green" — Instead, use "* indicates a required field." As the asterisk itself is in the text, a screen reader will read it out loud and a color-blind person will see it.
• Using red text to make content stand out — Do not use colored text for this purpose. Instead, use a heading or some other element in the text to call attention to the content you want to emphasize (such as starting a paragraph with "Important:"). 

Use sufficient color contrast in graphics and text

When using colors to provide visual interest, there must be sufficient color contrast between the foreground and background. 

Give links unique and descriptive text

Visitors using screen reader may not read through an entire page to find what they are looking for. They can simply move from link to link. If your link text does not make sense, the visitor will have a negative experience with your site. 

Avoid language like "link" or "click here" or "read more." This gives your visitor no useful information. Also avoid using the actual URL in the text as the screen reader will read every character in the URL (imagine being read the information on a page and having to listen to https://www.uab.edu/news/research/item/11574-likely-molecular-mechanisms-of-sars-cov-2-pathogenesis-are-revealed-by-network-biology before you can move to the next link).

Link techniques:

• Make the link text meaningful. Instead of, "for more information about how to apply, click here" (with click here being the linked text), link the phrase "Learn more about how to apply."
• If you must include a URL, include a shortened version. Instead of "Read the full article at https://www.uab.edu/news/research/item/11574-likely-molecular-mechanisms-of-sars-cov-2," link "read the full article at uab.edu/news."
• Advanced users can use aria labels to make link text more accessible.

Avoid flashing or flickering content

Flickering or flashing content can trigger seizures. The W3C Web Content Accessibility Guidelines 2.0 provide general and specific guidelines for you to follow. If you choose to use content in this manner, it should not flash more than three times in any one-second period.

Give titles to iframes

When a screen reader encounters an iframe, it is helpful to have a title in place to describe its purpose.

Validate your site

Once you are finished designing your website, it is important to validate the site for accessibility issues. Web accessibility evaluation tools are software programs or online services that help determine if a website meets accessibility guidelines. There are a variety of validators available for free. One of the more popular sites is WebAIM's WAVE web accessibility evaluation tool. These tools are software programs or online services that help determine if a website meets accessibility guidelines. 

Important: While web accessibility evaluation tools can significantly reduce the time and effort to evaluate websites, no tool can automatically and fully determine a site's accessibility.