Web standards checklist

1. asu.edu URLs
2. Site settings
3. Design
4. Writing style
5. Navigation
6. Buttons
7. Photo and video
8. Search engine optimization (SEO)
9. Quality of content evaluation
10. Mobile optimization
11. Google Analytics and Tag Manager
12. Accessibility
13. Request for information on degree details pages
14. Development and hosting
15. Security

• The URL structure and format follows the guidelines and standards set for asu.edu.
  • Site must use an “asu.edu” subdomain.
  • All asu.edu subdomains are granted on a case-by-case basis.
• If new, the proposed URL has been approved by the ASU Web Standards Governance Board prior to inclusion in any communications or marketing materials. Request an asu.edu subdomain.
  • All asu.edu sites will be reviewed by the ASU Web Standards Governance Board prior to launch.
  • The launch of sites that do not meet the standards listed in this checklist will be delayed pending discussions regarding standards alignment with requestors.

• Website URL and contact details have been added to ASU’s official website inventory.

  
   

The following are based on ASU writing style, which is the Associated Press Stylebook (AP style) with a few university-specific variances. 

• Does not use serial commas — apples, oranges and bananas NOT apples, oranges, and bananas (View punctuation guide).

   

• All headings and titles are Sentence case, with only the first letter of the first word capitalized in addition to any proper nouns (View capitalization guide).
• All menu text is Title Case, with the first letter of each word capitalized. Do not capitalize shorter words (e.g., "and," "or", "on," "at", "a," "the") unless they are the first word in the title.
• Does not use +, @, & or / unless part of an official name (View symbols guide).
• Does not use ALL CAPS unless part of an official name (View capitalization guide).
• Uses single spaces after periods between sentences (View formatting guide).

Global header

Appears on every asu.edu page and subdomain. See the Unity Design System component specs in the UDS UI kit.

ASU logo

• Located in the upper left-hand corner of the page.
• Does not use a hover state.
• Uses a tooltip via a link title that says exactly “ASU homepage” to indicate to users that the ASU logo links to asu.edu.
• Links to https://www.asu.edu without launching a new tab or browser window.
• No additional logos should be displayed anywhere else on the page.
  • Note: The university standard allows placement of the university logo in the ASU header and an endorsed logo in the footer.

Universal asu.edu links

• Appears on every page. 
• The background color is ASU Gray 6: #E8E8E8.
• Text is ASU Gray 1: #191919.
• The order, text and capitalization is exactly:
  • ASU Home (links to: https://www.asu.edu).
  • My ASU (links to: https://my.asu.edu).
  • Colleges and Schools (links to: https://asu.edu/academics/colleges-schools).
  • Sign In (links to: https://weblogin.asu.edu/cas/login).
    • Once signed in, the constituent name is displayed with authentication to ASURITE.
  • Font Awesome magnifying glass for search.
    • Search is a single search field that returns results for all of ASU (https://search.asu.edu/).

Primary subdomain navigation

See the Unity Design System component in the UDS UI kit.

• Text is ASU Gray 1 (black): #191919.
• The background color is ASU White: #FFFFFF.
• Top-level links do not wrap to a second line.
• All menu text is Title Case, with the first letter of each word capitalized. Do not capitalize shorter words (e.g., "and," "or", "on," "at", "a," "the") unless they are the first word in the title.
• Does not use all lower case, all capital letters or sentence case
• Does not use external link indicators.
• Does not include links to non-asu.edu sites (user expectation is that primary navigation helps them navigate the current site).
• The only icons present are the home icon, chevron for drop down menus and magnifying glass icon for search. No other icons or imagery are permitted in the navigation.
• Top-level navigation links show a gold underline on hover (See guidelines for gold underlines in navigation). The gold underline stays showing on the navigation item when the user is on a page within that menu section.
• Links within dropdown menus are underlined on hover, but not underlined by default. 
• The home icon always leads the user to the homepage of the subdomain or subsite unit.
• Home icon uses a link title tag to display the name of the subdomain or subsite unit on hover. Example: “ASU Library homepage”.
• Site title is the unit name (eg. college or school name). If the site is a subsite, the site title uses the parent and child header (View site title details).
• Text is not bold or italic.
• Unit name, as a proper noun, is Title Case (first letter of each word capitalized).
• The site title links back to the unit homepage and has a black underline on hover.
• The parent unit name, if present, links to the parent unit homepage and has a black underline on hover.
• Site title does not use +, @, & or / unless part of an official name, per ASU writing style (View writing style guide).
•  Menu links with drop down menus are click-to-open and do not link to anywhere.
• College, school or academic unit primary navigation must follow these requirements:
  • Degree Programs
    • Must be in your college, school or academic unit navigation
    • Placed in the first position to the right of the home icon. 
    • Use the exact wording provided for required navigation items, selecting the options that best fit your unit.
      • Undergraduate
      • Graduate
      • Online 
      • Minors
      • Certificates
      • Etc.
  • About
    • Required top-level navigation in college, school or academic unit navigation (recommended for most sites).
    • Should be placed in the last position — the last link on the right, before any CTAs.
    • Must include “Contact Us” as the last link in the about drop-down menu.
    • May also include items such as:
      • Why Choose (college name or unit)
      • News and Events
      • Faculty and Staff

      • Leadership

         

    • Note: All links are title case.

       

Global footer

See the UDS UI kit for footer specs.

Universal asu.edu footer

• Appears on every asu.edu page and subdomain.
• The universal footer is always the last item on all pages and may not be altered. 
• The universal footer links are as follows, in this order:
  • Gold bar:
    • Maps and Locations (links to: https://asu.edu/about/locations-maps).
    • Jobs (links to: https://cfo.asu.edu/applicant).
    • Directory (links to: https://isearch.asu.edu/asu-people/).
    • Contact ASU (links to: https://www.asu.edu/about/contact).
    • My ASU (links to: https://my.asu.edu/).
    • Includes current U.S. News and World Report messaging.
      • If using Webspark, the newest U.S. News and World Report messaging will be released in Webspark updates.
      • If you are not using Webspark, the latest U.S. News and World Report messaging is available in the ASU Brand Library. 
  • Gray bar:
    • Copyright and Trademark (links to:https://www.asu.edu/about/copyright-trademark/).
    • Accessibility (links to: https://accessibility.asu.edu/report).
    • Privacy (links to: https://www.asu.edu/about/privacy/).
    • Terms of Use (links to: https://www.asu.edu//about/terms-of-use/).
    • Emergency (links to: https://cfo.asu.edu/emergency).

Subdomain footer

• The subdomain footer is placed above the basic universal asu.edu footer.
• Includes the name of the college and/or the unit logo in the subdomain footer. Including both is good for accessibility.
  • If the unit has an approved logo, its use is required. (View logo guide).
  • Make sure an alt tag is in place for the endorsed logo. It should be the full name of the unit plus the word logo. Example: Herberger Institute for Design and the Arts logo.
  • If the unit does not have an endorsed logo, use the name of the unit. Follow ASU writing style.
  • The logo must be all white (#FFFFFF) (no modified or full-color logos).
  • The endorsed logo alignment is to the left.
  • If the site is representing multiple ASU units, use the ASU logo and list the names of each unit in text.
    • Note: Multiple ASU unit logos may not be used together in any communications.
• Social media icons, if included, follow these standards:
  • Social icons are Font Awesome (See icons in footer).

  • Social icons are ASU Gray 4: #BFBFBF.

     

  • Hover for social icons must include hovering alt tags, recommendation: Platform account name — example: Facebook arizonastateuniversity
• Includes a “Contact us” link below the unit logo.
• A short summary or description may be added below the unit logo.
• A gold “Support ASU” button is required.
  • This button can say “Support (the name of your unit)” rather than ASU if desired. However, it is required to say “Support” based on message testing by the ASU Foundation.” 
  • The button should link to either https://www.asufoundation.org/ or your unit’s specific donation or giving page.

See the Unity Design System UI kit for specs.

• No drop shadows, design elements or alternative formatting should be introduced.
• Button hover state is that the button grows 5% in scale — text color does not change and text is not underlined.
• Buttons use sentence case — the first letter of the first word is capitalized.
• Button text is left aligned.
• Gold buttons should be reserved for the most important call to action on each page.
• Call to action (CTA) button labels need to be actionable, concise and specific. Avoid using vague, default button labels such as “Learn more”, “Read more” or “Click here”. 
  • Using vague, default button labels goes against best practices for accessibility and SEO. 
  • Button labels should describe what users will be doing or where they will be going.
  • An example of a specific, actionable label is “Read the brand guidelines”.
  • Button labels should not exceed one line in desktop and mobile.

See UDS UI kit for image and video specs.

Photos

• Images should be jpg or png files.
• Images should be compressed to optimize page load speeds.
  • Compressor.io is a free image compression tool.
  • Images should be no larger than 2MB, ideally no larger than 1MB
  • Use webp files where accessible.
• All images require the use of alt text for both accessibility and search engine optimization.
  • Text should contain descriptive/meaningful of what’s displayed in the image for both screen readers and search engines. 
  • An example of effective alt text is “ASU Tempe Campus map”.
  • Read more about writing effective alt text.
• Image file names should be meaningful and can include keywords to benefit SEO.
  • An example of a meaningful image file name is asu-tempe-campus-map.jpg
• Static images do not contain text that is not included in an alt tag or elsewhere on the page (this is an accessibility violation).
• Imagery should be meaningful, relevant, high-quality, and authentic. Users should be able to connect the imagery with the content. Pre-approved, high-quality images can be found in the ASU Brand Library. 

Videos 

See ASU's video standards

• Videos embedded on asu.edu should be hosted on YouTube, except for hero videos (View the video guide).
• All videos with audio have captions available.
• All videos need to have a play and pause button for accessibility, including hero videos. 

See the steps for implementing ASU’s SEO strategy.

• Customize robots.txt for search engine optimization. 
  • Robots.txt is a file in the root of your Drupal install that tells search engine crawlers what to index on your site. By default, crawling is disabled on Dev and Test and enabled on Live. If you’re doing a soft launch and don’t want the live environment to be indexed you will need to customize your robots.txt on Dev and pull it to Test and then pull it to Live.
• Once launched, submit your sitemap to Google via Google Search Console. Learn how
  • Each site should have a sitemap that only lists the crawlable pages.
• Ensure your URLs are readable and meaningful for the content of the page and do not include nondescript terms like ‘node’.
• Each page has a unique title tag and meta description specific to the page.
  • A title tag is the name of the web page that appears in search results.
  • Title tags should be sentence case.
  • A meta description is the summary of the web page that appears in search results. 
  • See best practices for title tags and meta descriptions.
• Each page should have a canonical URL to itself OR to the page that originally had the content.
  • The canonical tag tells search engines what URL should be considered the definitive version for a page’s content.
  • This can help avoid duplicate content issues from the same content appearing on technically different URLs.

  • Define canonical tags for any URLs that house the same content as another. For example, if you have a printer-friendly version of a web page, be sure its canonical tag points to the original page. 

     

• Each section on a page has a header, and pages should have the proper H1, H2, H3 structures within each section. Learn more about HTML headings.
  • Headings should follow a logical hierarchy. 
    • All headings should be followed with content with the exception of heroes.
    • For example, don't use a level-four heading directly after a level-two heading merely because it looks better. Instead, use the correct level-three heading—then if you don't like the look of it, alter its appearance with WYSIWYG (rich-text) editor options (or in the CSS).

• Images have short descriptive names and alt text.
  • Text should contain descriptive/meaningful of what’s displayed in the image for both screen readers and search engines. 
  • Read more about writing effective alt text.
• Image file names should be meaningful and can include keywords to benefit SEO (Learn more about file names for SEO).
  • An example of a meaningful image file name is "asu-tempe-campus-map.jpg"
• Ensure all links and CTA buttons are labeled with specific, actionable statements rather than vague labels such as “Here”, “Click here”, “Read more” or “Learn more”.  
  • A good example of a specific, actionable label is “Read the brand guidelines”.

• All content is accurate, timely and free of error.
• Editing and styling are consistent including the case for titles (see ASU writing style).
• All links work and are error-free.
• Information on the homepage and high circulation pages such as about sections, faculty and home sections communicate quality statements such as rankings, faculty accomplishments and points of pride.
• Photography and videography selections are brand-aligned and project a positive image of the university.

• All Unity Design System components are responsive and have a mobile-specific version.
  • This free browser extension can be used to simulate mobile experiences on desktop browsers.
• Put content first and remove navigational barriers to information to help improve conversions.
• Make content glanceable and primary content primary. You must continue to ask how you can engage the user through mobile experiences. You must find a more beneficial way to display specific content for mobile.
• When testing, check each page with Google's Mobile Friendly Test, Lighthouse and Google Pagespeed Insights to verify a mobile-friendly design.

• Site is either Webspark or uses the Unity header component, which includes ASU’s deployment of Google Tag Manager and Google Analytics Premium. Review the ASU header guide
  • Google Tag Manager is the tag management solution for ASU.
  • Google Analytics 360 is the enterprise analytics solution for ASU.
  • Follows ASU’s data and analytics standards

ASU is committed to making the asu.edu domain accessible to people of all abilities. As part of that commitment, ASU's Unity Design System has been optimized for and is routinely tested for accessibility. You can get more detailed information on digital accessibility on ASU IT Accessibility. 

The ASU IT Accessibility Standard is ASU's commitment to meeting the Web Content Accessibility Guidelines (WCAG) 2.1 level AA, the legal standard for U.S. public websites.

Please note: ASU does not permit the use of accessibility overlays, which often lead to more accessibility barriers.

To test websites and applications for accessibility, semi-automated accessibility checkers such as the Siteimprove and WAVE browser extensions can be helpful. However, automated tests identify less than 25% of issues, so ASU also requires manual testing. 
 

The ASU Web Accessibility Audit Tool is a step-by-step guide to help you learn to manually audit your own webpages.
 

Or use this simplified checklist to audit your site or app for nine important accessibility issues:

• The page has a unique and descriptive <title> meta tag.
• Headings:
  • The page has an H1 heading.
  • All headings (and only headings) have heading tags.
  • Headings are in the correct hierarchical order.
• All images have an ALT tag, and meaningful images have alternative text.
• All videos have closed captions.
• Keyboard-only access:
  • A skip-to-content link the first thing you tab to on the page, and it skips you to the main content.
  • You can use the keyboard alone to navigate all interactive items.
• Forms:
  • Every form field has an accessible label.
  • Help and instructions are located above the form or field they relate to.
  • Error messages are helpful and it is clear which field they refer to.
• Links are clear, descriptive and unique.
• When text is magnified (zoomed) to 200%, all content is still usable.
• Color and contrast:
  • Sensory cues are always accompanied by secondary text cues when conveying meaning.
     
  • The color contrast is sufficient. (See ASU brand standard and accessible color palette details and link and background color combinations.)

For college/academic unit websites:

• Every degree detail page has a request for information form (RFI) at the bottom of the page.
• Every form field should have a label on top of the text box (View examples of how form fields should be designed).

• All required form fields should be indicated with a maroon dot before the field label (View examples of how form fields should be designed).

   

• A button may be used on the top 1/3 of the page that links to the form below.

   

• The default selection in the “My programs” field in the RFI matches the subject of the degree detail page.

   

• Upon completion of the form, users should receive a confirmation message.
  • A unit can customize that confirmation message to be specific to that unit.

• When creating a new site in Pantheon, please select the Webspark 2 custom distribution that is offered when you are first setting up the site to be created. (Pantheon will be replaced by Acquia in May 2025).
• Review Pantheon workflow and create test and live guides.
• When adding custom code or upgrading a module, be sure to:
  • Make changes in the Dev environment first.
  • Deploy code from Dev to Test.
  • Confirm everything is working in Test, then deploy code to Live. View Pantheon Workflow.
  • Keep your site connection mode in Git and apply updates promptly.
  • In Git mode, updates will appear automatically on your Pantheon dashboard.
  • Apply any pending updates as soon as possible.
• Use the Pantheon Backups Tool to manually backup the environment every time you pull code, database or add files.
• Ensure your site content is ready to “Go Live” before submitting your launch request form using your Live Pantheon environment.
  • Allow 3-5 business days for a site request to process and provide sufficient time for the request to be received.
• When replacing an old site and redirecting traffic to the new one, set up a 301 redirect.
  • A site redirect indicates that a page has moved. Redirects are helpful for smooth transitions, site standardization, and search engine optimization (SEO). Additionally, ASU policy requires that your site redirect HTTP traffic to https. For guides on redirect settings, use the sites/default/settings.php and under Pantheon/Domains/ under Modules and Plugins.
• Set up automatic backups on the Pantheon dashboard. 
  • With a free Dev site, you can manually create backups. With a paid plan, you can enable automated backups. Backups are not saved indefinitely and we encourage you to download backups periodically.
• Set Drupal Performance and Caching Settings: Enable caching and CSS and JS optimization for performance.

  • Configure performance settings in your Live environment so your site will be as fast as possible. In some cases, caching may break certain dynamic functionality, but we recommend first trying to enable all caching, and only disable it if absolutely necessary.

     

• Request vulnerability scanning.
  • Contact the ASU security scan team to coordinate an assessment of your development site. Security scan results will identify medium and high vulnerabilities that you should address prior to launch. Visit getprotected.asu.edu for information on vulnerability management.