Skip to main content

Website Support

The topics below address some of the issues encountered most frequently by our users. If you have additional questions, please submit a Drupal/Website ticket.

A Drupal 9/10 Training Guide is also available as a Google Doc for help with our Drupal 9 Upgrade.

To request an account on any Drupal site, submit a Drupal/Website ticket in Freshservice. Seawolf ID is required.

Drupal website editors must complete the training course on Canvas, Drupal Training for Content Editors and Leads.  If you have not completed that training, the Web Office will give you access to the course before enabling your Drupal account.

What is caching?

Caching is the process that stores copies of web pages and files in a temporary storage location (not the actual web server). Caching helps to improve the page performance and the time it takes to download and render a page for users. Drupal websites have three levels of caching.

  • The user’s web browser will cache pages so the next time the user wants to view the same page, it can be quickly retrieved from the browser cache, instead of downloaded anew from the web server.
  • The Drupal application will cache pages for a set amount of time, usually up to 6 hours. Note: Do not change this setting. Changing this setting will negatively impact the site's performance.
  • Varnish, a caching system in between Drupal and the network, will cache pages for some set amount of time, usually up to 6 hours. If a requested page is in Varnish, that is the version of the page delivered to the browser. Varnish only caches content for use via Anonymous SSL (see below).

Whenever a user requests a page, if the page exists in one of these caches, that is the version of the page that is sent to the user's web browser. If the page is not cached, Drupal sends the page to the user's browser and keeps a copy in Drupal's cache and in Varnish. 

Varnish and Acquia Purge

Acquia Cloud, our Drupal hosting platform, uses a module called Acquia Purge to watch for certain changes. When a node is changed and published, Acquia Purge adds the node to a queue for clearing from Varnish. The purging process runs hourly. However, cache rules can be somewhat complex, and other settings may prevent a specific item from being purged from Varnish when expected.

Content in a View

Some content is displayed both as a Node and a View.

  • A node is sometimes thought of as the page you create when you Add a new piece of content with a Content Type (like a Basic Page, Landing Page, Article or Faculty/Staff Profile).
  • A view is a dynamically generated list of nodes, usually of a specific content type. The lists can be all nodes, or even just the most recent 1 item. Views are usually inserted into nodes (like a Basic Page or Landing page) in addition to the node's "Body" content. Common views on SSU sites are a list of Faculty and Staff in a department, a list of News Articles, a list of Events, the Homepage Top Notice, Forms & Resource Links, and Lecture Series).  

Both nodes and views can be cached in Varnish. Sometimes, when a node is updated, a related view might not be immediately cleared from the Drupal and Varnish caches.

What do caching issues look like?

Sometimes, when you edit and publish content, and then go look at the page, you won’t immediately see the change you made.

Sometimes you might update a node, but the related view that includes the node's content doesn't immediately update. 

This is usually because the content is cached in Drupal and/or Varnish.

Don't panic, caching is a good thing for your site's performance.

However, if you can't wait for the change to take effect for all site visitors, here are some things to try.

First, try this:

  1. Clear your browser cache and reload the page.
  2. Try visiting the page using Incognito mode, or a use different browser (Chrome, Firefox, Safari, Edge, etc.).
  3. Clear the Drupal cache (Drupal menu > Shortcuts > Clear Cache > Click the Clear Cache button).
  4. Wait for that to process, then clear your browser cache and reload the page.

If the content that is not updating is in a View, try this:

  1. While logged into Drupal, visit the node you changed to verify that the change was published.
  2. Visit the page with the view, clear your browser cache and reload the page.
  3. Copy the path of the page (everything after "sonoma.edu/") with the view, and manually purge it.
    1. Drupal menu > Shortcuts > Clear Cache > Manual Purge
    2. Paste the path into the Paths to be purged field.
    3. Click Queue.

Note: Do not change any of the settings on the Performance pages.  This will negatively impact the performance of your site. Please contact the Web Office if you think a change needs to be made.

What about the Clear Acquia Purge queue button?

There is a new button "Clear Acquia Purge queue" on the Performance page, next to the Clear all caches button.  Clicking this will erase the list of pages currently in the Acquia Purge queue.  Usually, you should not push that button.

How to report a Website Caching Issue to the Web Office

Go to the Drupal/Website request form and select "Problem/Issue with Live Site."

In the ticket, include:

  • Screenshots that include the URL in your browser bar of the content on the page that is changed but not displayed (so we can verify where the problem is and when it is fixed)
  • The reason why the page must be cleared on an urgent basis instead of waiting for Drupal and Varnish to clear automatically.

Allow 4 hours for a response to urgent issues during normal business hours. For all other issues, allow 24-48 hours for a response.

Please note, urgent issues are defined as those that convey critical information to the campus community such as emergency notifications or significant system or building outages. Due to the workload demands, we ask that non-urgent issues observe the 6 hour cache purging processes. 

General Advice When Sharing URLs

  • After making a change, use your browser's Incognito mode, without logging into Drupal, to test that the change is visible, or use a different browser to test the page.
  • Before sharing the URL, wait an hour after saving the change for the page to be automatically cleared from Varnish. Test the URL (not logged into Drupal), and then share it.

Yes, here are the currently available options for SSU faculty.

Department Drupal website, Faculty profile page

Who can see the site: public facing
Who can edit the site: updated by department content lead
Good for: This is a good option if the department website is on SSU Drupal, and the desired faculty website is minimal, similar to a CV.
How to get this: Talk with your department Drupal content lead.
Examples:  Biology Faculty & Staff (each person listed has a Faculty/Staff profile page)

Google Sites in SSU’s Google Workspace (formerly Google Apps)

Who can see the site: public facing, or can be shared to limited users
Who can edit the site: faculty member, or can be shared to limited editors
Good for: This is a good option if the faculty member wants to "do their own thing," and not necessarily use a Drupal site.  This should not be used for a course website or course materials (use Canvas instead).  Best for a personal interest site, or to share research.  If the site is used for a class project, it will need to comply with accessibility standards.
How to get this: Login to your SSU Google account, then click the Google Apps menu icon (

) and then select Sites.

Drupal Faculty Lab/Research pages 

Who can see the site: public facing
Who can edit the site: faculty member, department Drupal content leads
Good for: If the Department wishes, the Web Office can add the Faculty Lab/Research content type to the department Drupal site.  Faculty can be given a Faculty role, and create/edit their own pages within the department site.  This should only be used for their SSU professional/research work.  It should not be used for a course website. Faculty will have to complete the Drupal training in Canvas.  Site will need to comply with accessibility standards.  Faculty Lab/Research pages are not offered to Emeritus faculty.  These are not intended to function like a blog.  Note:  the department should have multiple faculty who want Faculty Lab/Research pages, and the department's web editors will need to be able to provide some support for the faculty creating these pages.  This is not a good option if the faculty member wants their grad students to edit the Faculty Lab pages.
How to get this: Talk first with your department Drupal content lead to find out if there is interest in adding this content type.  Then you and your Department content lead should contact the Web Office to request the content type be added to your department's Drupal site.
Example:  Biology Faculty Labs

Canvas

Who can see the site: private - instructor, enrolled students, other enrolled members
Who can edit the site: faculty member, other teachers in the course
Good for: This should be used for course websites and materials.
How to get this: All university courses are added to Canvas automatically.  Login to check Canvas for your site.  If you don't find it, contact CTET.

Off-Campus Hosting

Who can see the site: private or public facing
Who can edit the site: faculty member, and anyone the faculty member gives access to
Good for: Faculty may choose to host their content with an off-campus provider. This option should not be used for official university sites or any use that would be considered required for SSU courses or other SSU business. This type of site is not supported by IT & Web Office. IT does not redirect web.sonoma.edu or Drupal site URLs to off-campus sites.
How to get this: The IT Web Office doesn't recommend or endorse any off-campus hosting providers.  There are many website hosting providers available.  Some are free, others cost money.  Try searching for "website hosting" and other terms important to you.  If the site will be used for SSU students, or if you're working with a government agency, or using government funds (including grants), you may be required to meet accessibility standards, so look for a provider that can provide WCAG 2.1 AA compliant templates.

Department Legacy website (web.sonoma.edu), Faculty profile page

Who can see the site: public facing
Who can edit the site: updated by department web editor
Good for: This is a good option if the department website is on web.sonoma.edu, and the desired faculty website is minimal, similar to a CV.
How to get this: Talk with your department web person.
Effective June 2021, all department sites have migrated to Drupal, and are no longer available on the legacy web server.
Effective January 12, 2022: Legacy website user directories will be deleted as part of a project to retire the legacy web server.  The Web Office will contact all user directory owners in Fall 2021 about options for backups or moving content elsewhere.

User Sites on web.sonoma.edu/user/...

IT no longer provides individual user accounts and directories on web.sonoma.edu, and IT Web Services has been working to identify old/abandoned sites for removal.  While no end-of-life date has been set for the server web.sonoma.edu, a deadline for backing up or moving content in web.sonoma.edu/user sites has been scheduled: Noon on January 12, 2022. After that, all /user sites will be deleted.  Faculty and staff who already have sites with URLs beginning web.sonoma.edu/user/ should consider the options listed above, and move their content to the site that best meets their needs. 

Questions?

Please contact the Web Office if you have questions about any of these options.

Note: As of fall 2018, the IT Web Office no longer creates user directories on our legacy web server, web.sonoma.edu.  Eventually, all web.sonoma.edu/user directories will be removed, as part of our long-term web publishing platform changes.

Yes, we have posted a copy of all the lesson content from the course, Drupal Training for Content Editors and Leads, on Google Drive as a single Google Doc. You must be logged into your Seawolf Google Drive account to view this file.

View Course Content

Please note: reviewing the training content here is not a substitute for completing the course in Canvas. SSU employees who need access to edit an SSU Drupal site must complete the Drupal Training for Content Editors and Leads in Canvas. After submitting your Drupal/Website ticket, the Web Office will contact you to enroll you in the course.

If I put up a page today, how soon will it show up in search engines?

Search engines are constantly crawling SSU's websites.  Assuming the search engine can find your page, it should update the index for your modified page within a 1-7 days.  If your site is not showing up in search results, or if old versions of your page are showing up in results, contact the IT Web Office.

If I delete a page, how long until it is removed from the search index?

If a deleted page is still showing up in search results, make sure you have unpublished the page on Drupal. If there is still a problem, call the Web Office. Some search engines provide a cached version of pages after they have been deleted from the web server, so even after your old page is gone, it may live on in search results for several weeks.  It can be helpful to make sure your site no longer links to the old page.

There are several things you can do to make sure your pages show up in search results, or show up nearer the top.

Make sure your pages have meaningful titles. 

It's very important to give your pages meaningful titles, using words and phrases describing the topic of your page.  In Drupal, page titles are displayed as a Heading 1 <h1> above the main content.  It is also used in the <title> tag - this is the text users will see in their browser tab, and search engines will use it as the link text in search results.  Pages with the search terms in the title will be ranked higher than they would with the search terms in the body of the page. Try to make the title short and specific. Front-load the most important words - that's best for usability, accessibility, and search engine optimization (SEO).

Use heading tags to define the headings in your pages. 

If you've been using font size tags to make larger text for headings, your page isn't getting the rank it should have. For example, <h1>English Department</h1> will get a much higher ranking than <font size="+3">English Department</font>. 

Use logical heading structure in your content. 

Don't skip heading levels. Don't use headings for any images or text that is not supposed to function as a heading for the following content.  Don't use headings to make big links.  Make sure your content starts with an h1, followed by an h2.  Headings after the h2 should proceed logically according to the page structure without skipping levels.

Use meaningful and descriptive text in your headings. 

Make sure the heading text describes the content of your page.  Use the important key phrases in your headings. Avoid using vague, unclear or gimmicky heading text.

Use meaningful link text.

When making links, make sure the link text uses relevant, meaningful words and phrases that describe where the link goes.  Don't use "Click here" or other vague words and phrases.  If you must use "Read more" or Learn more" add text to make it meaningful - like "Learn more about the alignment of accessibility and SEO."

Get linked.

Search engines will find your site if they can get to it by crawling other known sites.  Make sure your page is appropriately linked in the menu of your site. Contact the Web Office to have your department or program site linked on the SSU A-Z index or an appropriate resource page, like Students, or Faculty & Staff

If after doing all of the above, your pages still don't show up, or show up high enough in search engine results, contact the IT Web Office and request a consultation.

 

FASD is a searchable directory of all current SSU employees.  Employees are responsible for keeping their entries up to date.

Updating your entry is easy.

  1. Go to https://ldaps.sonoma.edu/fasd/
    You can also use the URL people.sonoma.edu as a shortcut, or you can use the link in the menu on most SSU websites - click the "hamburger" menu button, then click Directory.
  2. Click Update your information.
  3. Login via Online Services.  
    If you are already authenticated, this step will be skipped.
  4. A new page will be displayed, with a form labeled "Edit Your Existing Directory Entries."
    Some information is locked and cannot be updated directly. If this information is incorrect, please contact the IT Help Desk for assistance. If you wish a preferred name be displayed, contact Human Resources or Faculty Affairs.
  5. You can update your Phone number, Building Name, Room number, and URL.  
    • For phone numbers, use the full number, not just the extension. The desired format is area code, prefix and number
      Example: (707) 664-0000 
    • If you have an employee profile on your SSU department website, you can add that in the URL field.  Make sure the URL is complete, and includes the https:// or https:// at the beginning.
  6. Display entry? Yes or No.  If you select Yes, it will be displayed in the FASD.  If you select no, then only the IT Help Desk and a few other departments can access the data.
  7. Click Update This Entry.

Sonoma State's central website publishing platform, Drupal, is available for all official departments - e.g. Divisions, Schools, and Departments.  SSU Drupal is intended to build sites that are primarily public-facing, though there are tools to limit access to content to Seawolf account holders (students, employees, and some contractors with LDAP credentials).

Most SSU departments already have a Drupal website.

New departments may request an SSU Drupal site by submitting a Drupal/Website request. In the "Details" section, please include:

  • the official name of the department
  • the purpose of the website
  • the SSU employees who will help to build, edit and maintain the site

Requests for sites that are not for official departments are not automatically granted.  Usually, pages or mini-sites for specific projects or events should be built as part of the sponsoring department's site.

The Web Office will respond with any follow-up questions needed to establish the site.

SSU's Siteimprove service is scheduled to send monthly automated accessibility reports to Drupal website Content Leads.  The email contains a link to the report for your site. 

The report provides an overall accessibility status for the chosen site:

  • Number of issues by conformance level (A, AA, AAA) in total and as a history graph
  • Complete list of issues on the website by severity level (‘Errors,’ ‘Warnings,’ and ‘Reviews’)
  • 10 top level / most viewed pages with accessibility issues.
  • 10 PDFs with accessibility issues.

The report links to detailed Issue, Page and PDF reports in Siteimprove, where Drupal Content Leads can get more information about specific accessibility issues and how to repair them.

View a sample report for IT's website.

Other Types of Reports

Siteimprove can also send automated one-time reports for site quality (broken links, misspellings, etc.) and SEO.  Content Leads can send Dashboard reports directly from their Siteimprove account.  For more information, see "How do I email a dashboard report?" on Siteimprove's support site or use the Siteimprove Issue/Request form for support.

SSU employees (faculty, staff, student assistants) have access to a large collection of training materials and courses in Siteimprove's Academy.  Some of the courses are free to anyone with a Siteimprove account.  Others require that the user be enrolled in a course or series by the Siteimprove Administrator.

To access Siteimprove's free courses:

  1. Login to Siteimprove with your Seawolf account.
    This creates your account.
    Any SSU employee or student assistant can login to Siteimprove. 
  2. Once in Siteimprove, click the Help Center and Academy link at the top of the page, and select Academy.
  3. View the Course Library, and use the Tags field to search for "free_course."

If you would like access to any of the courses that are not free, please use the Siteimprove Issue/Request form to request access.

This page links to Siteimprove Tutorials, widgets that guide you through pages in Siteimprove step by step.  Before following the tutorial links, login to your Siteimprove account with your Seawolf ID.

Once you have your account and group membership established, you will be able to see reports for your site via Siteimprove’s Dashboards. 

Note: If you don’t yet have an account or group membership on Siteimprove, see our FAQ “Siteimprove - How do I gain access for my SSU website?

The default is the DCI Dashboard.  This includes scores for Digital Certainty Index (DCI), Quality Assurance, Accessibility and SEO.  The DCI score combines the scores for QA, Accessibility and SEO. Each of those links to an overview report for that area.

Because SSU is required to make all our public-facing sites accessible by meeting WCAG 2 A and AA standards, website editors should focus on the accessibility reports.  

Second priority for SSU web editors should be the Quality Assurance section. QA reports will help you identify pages with misspellings, broken links, links to unsafe domains, and other issues affecting the quality and usability of your site.

For a full list of FAQs, guides and user community, see Siteimprove's Help Center.

Recommended Dashboards

Click on the DCI Dashboard heading to expand the list of available dashboards.

  • Editor Dashboard (Accessibility) includes information helpful to website content editors about a specific site:
    • Overall progress bar
    • List of WCAG A and AA issues to fix.  These link to Issue pages that explain the issue and list/link to pages with that issue.
    • Accessibility-test PDFs
  • Accessibility Report is similar to the Editor Dashboard, but includes all the sites groups the user is a member of.
  • Editor Dashboard (QA) shows information about Broken links, misspellings, words to review, and links to issues to correct.  It also includes a Priority Pages list, that prioritizes issues to fix based on the number of times people have viewed that page or document.

Setting up your access to Siteimprove is a 2 step process.

  1. Log in to Siteimprove with your Seawolf account. This creates your account. Any SSU employee or student assistant can log in to Siteimprove. 
  2. Submit a Siteimprove request to be added to your department’s Siteimprove group. The Web Services team will grant you permission to view reports for your department site.

Group membership will be assigned to:

  • People who are content leads or content editors on an SSU Drupal site.
  • Appropriate administrators, Deans, Department Chairs or others who have content ownership responsibilities for an SSU Drupal site.
    Please note: only people with Content Lead or Content Editor access to their department website will be able to make changes to their site.

If you work on some other sonoma.edu website that is not on SSU Drupal, please submit a Siteimprove request asking to discuss the use of Siteimprove with your non-Drupal SSU website.

Bookmark the Siteimprove Login URL

For future login purposes, you should bookmark the login URL:

https://my2.siteimprove.com/Auth/Saml2/66356729
 

SSU's Drupal platform has Test, Stage and Production servers which allow the Drupal team and content leads to build and test Drupal sites before going live.  Unfortunately, sometimes content authors create links to Drupal pages and files using absolute URLs instead of relative URLs.  

This leads to Stage site URLs being used on live production sites.  These links are found and crawled by search engines, leading to bad and incorrect links in search results.

Links to the stage server always include "dstg0" in the URL.  

Effective June 5, 2022, our old local stage server has been decommissioned.  All links with URLs containing "dstg0.sonoma.edu" are now broken.

Absolute URLs vs Relative URLs

An absolute URL is the full address of the page or file, beginning with the protocol, site and domain name, and full path to the resource.

https://www.sonoma.edu/about/mission
/kb/website-support/drupal-how-make-link

A relative URL contains only a path to the resource, from the starting point of the page the link is on, or from the site's root like these. 

/about/mission
/kb/website-support/drupal-how-make-link

Siteimprove uses the Policy feature that scans SSU websites and looks for links that point to the stage and test sites.  SSU content authors should use the policy "HTML source match dstg0.sonoma.edu →" to find and correct these links.

Note: You should also look for the policy links for our legacy webserver, and links using "drupal-vip" in the URLs. These should also be repaired.

  • Links to SSU's Legacy Webserver - Needs to be updated 
  • HTML source match drupal-vip.sonoma.edu

Instructions

  1. Login to your Drupal site.
  2. In a new tab, login to Siteimprove.
  3. Pull down the Groups select menu and choose your site.
  4. Make sure you are in the Dashboard "Accessibility and Quality Assurance".
  5. Scroll toward the bottom, and find the widget labeled "Policies with the most matches".
  6. Click on "HTML source match dstg0.sonoma.edu →"
    • If you don't see that policy listed, click "View whole list of your policies" and then look for the link.
  7. On the Policy Details page, you'll see a chart showing the number of matches found over last 6 months, and a table listing all the pages that have links to URLs using dstg0. Click on a page in the list. This opens the page report in the Policy view.  The Policy view cannot identify and outline the relevant portion of the page in the Content view.
  8. Click the Show HTML button.
  9. The relevant link in the HTML will be highlighted and underlined.  Read the full URL and nearby text to identify the content and link that must be updated.
    • Note: some pages will have more than one occurrence of a dstg0 URL.  Look for the Occurrences button in the upper right area of the HTML view to switch to other occurrences.
  10. Click the page's link at the top of the Siteimprove page report to go to the page in Drupal to make repairs.
  11. Click New Draft.
  12. In the HTML editor, find the link that needs to be fixed.
  13. Click the a tag in the tag selector area.
  14. Click Remove Link.
  15. Following the instructions "Drupal - How to Make a Link", create a correct link to the page or file.
    • If the link is to something on the same Drupal site, using the Link to Content button This will make a relative link using the resources Drupal ID number.  Drupal automatically converts this to a human-friendly URL.  Added benefit: if the page's path ever changes (if the page is moved in the menu or renamed), Drupal will update the human-friendly URL, preventing the link from breaking.
    • If the link is to something on a different site, find the production version of that site and resource, and copy the link from the browser.  Then use the Link button to make the link.
    • If the dstg0 URL is being used for an image, click the Add image button to select the image.  If the image doesn't exist on your production Drupal site, you will need to upload the image from your computer, or replace the image with a different one.

SSU's legacy web platform (web.sonoma.edu) has been decommissioned, effective June 5, 2022. All links that point to URLs starting https://web.sonoma.edu or https://web.sonoma.edu are broken, and we recommend that content authors update them as soon as possible. Broken links negatively affect our site visitors, as well as our sites' Google search results - the more broken links your site has, the lower Google ranks all of your pages.

Content authors can use Siteimprove to identify where these links are so they can be corrected.  If you don't have access to Siteimprove, see Siteimprove - How do I gain access for my website?

Note: These instructions are specific to SSU Drupal sites, but a similar process can be used for other sonoma.edu sites that are on other content management systems.  If you have questions, contact the IT Help Desk.

Instructions

  1. Login to your Drupal site.
  2. In a new tab, login to Siteimprove. Use the SSO login screen with your Seawolf username and password.
  3. Pull down the Groups select menu and choose your site.
  4. Make sure you are in the Dashboard "Accessibility and Quality Assurance".
  5. Scroll toward the bottom, and find the widget labeled "Policies with the most matches".
  6. Click on "Links to SSU's Legacy Webserver - Needs to be updated"
    • If you don't see that policy listed, click "View whole list of your policies" and then look for the link.
  7. On the Policy Details page, you'll see a chart showing the number of matches found over last 6 months, and a table listing all the pages that have links to URLs using web.sonoma.edu. Click on a page in the list. This opens the page report in the Policy view.  The Policy view cannot identify and outline the relevant portion of the page in the Content view.
  8. Click the Show HTML button.
  9. The relevant link in the HTML will be highlighted and underlined.  Read the full URL and nearby text to identify the content and link that must be updated.
    • Note: some pages will have more than one occurrence of a web.sonoma.edu URL.  Look for the Occurrences button in the upper right area of the HTML view to switch to other occurrences.
  10. Click the page's link at the top of the Siteimprove page report to go to the page in Drupal to make repairs.
  11. Click New Draft.
  12. In the HTML editor, find the link that needs to be fixed.
  13. Click the a tag in the tag selector area.
  14. Click Remove Link.
  15. Following the instructions "Drupal - How to Make a Link", create a correct link to the page or file.
    • If the link is to something on the same Drupal site, use the Link to Content button. This will make a relative link using the resource's Drupal ID number.  Drupal automatically converts this to a human-friendly URL.  Added benefit: if the page's path ever changes (if the page is moved in the menu or renamed), Drupal will update the human-friendly URL, preventing the link from breaking.
    • If the link is to a different site, find the live site and resource, and copy the link from the browser's URL field.  Then use the Link button to make the link.
    • If the web.sonoma.edu URL is being used for an image, click the Add image button to select the image.  If the image doesn't exist on your production Drupal site, you will need to upload the image from your computer, or replace the image with a different one.

Questions?

Contact IT Help Desk,  or submit a Drupal/Website service request ticket.

Siteimprove Issue:

Element IDs are not unique
Two or more elements on this page have the same id value. These should be unique.

This means there are multiple HTML tags on the page that use the ID attribute with the same value.  Here's an example:

<p id="some-string-1234">Here's a paragraph.</p>

<p id="some-string-1234">Here's a different paragraph with the same ID.</p>

Why This Is Important

IDs must be unique - the same ID should not be used more than once in the same page. Otherwise, they can interfere with the user agent's (e.g. web browser, assistive technology, search engine) ability to properly parse and interpret the page.  Depending on how the IDs are used, this could prevent users with disabilities from being able to access and operate the web page properly.

Where These IDs Come From

Most often, we see these duplicate IDs when content is copied and pasted from Google Docs.  They may be necessary for content in Google Docs, but could cause problems outside of Google Docs.

How to Fix the Issue in Drupal

Usually, these IDs are not necessary as part of your Drupal content.  Removing the IDs fixes the issue.

  1. Login to your Drupal site.
  2. Go to the page with the issue.
  3. Make a new draft.
  4. In the HTML editor, select the content that has the ID - the Siteimprove page report shows you which parts of the content have the issue.
    The WYSIWYG page editor box in Drupal 7 with the Remove Formatting button highlighted and some text selected in the editor window.
  5. Click the Remove Format button.
  6. Repeat steps 4 and 5 for each area with the duplicated ID.
  7. Save and publish.

The Remove Format button may also remove some formatting you want, like bold and italics,  so you may also need to select some parts of text to reapply those formats.  

BONUS: Usually, reapplying the <strong> and <em> elements to your content will fix another issue with Google docs content.  Google uses the <b> and <i> tags for bold and italics. These are not accessible.  Drupal's HTML editor will use <strong> (B button) and <em> (I button), which are accessible.

How to Avoid This Issue

Whenever you copy and paste content from Google Docs into Drupal's HTML editor, immediately select the pasted text and click Remove Format.  Then apply the formatting options you want using the HTML editor's buttons.

Siteimprove Issue:

Empty Headings
This page contains one or more "empty" headings (heading tags with no text content).

This usually means there are HTML heading tags in the Body field that have no content  Here are some examples:

<h1> </h1>

<h2> </h2>

Why This Is Important

Headings help to break up content and make it easier for visitors to scan a page for information. They need to be set up correctly so that visitors using screen readers can use them in this way.

A heading is considered "empty" if there is no text for a screen reader to relay to the user. Image headings are considered empty if no text alternative is available.

Where Empty Headings Come From

These empty headings might be due to:

  • The content owner added a heading to add more whitespace between elements on the page.
  • The content owner copied and pasted an empty heading from an original document.
  • The content owner deleted the contents of a heading, but didn't delete the heading tags.

How to Fix the Issue in Drupal

  1. Login to your Drupal site.
  2. Go to the page with the issue.
  3. Make a new draft.
  4. In the HTML editor, click in the area that has the empty heading - the Siteimprove page report shows you which parts of the content have empty headings.
  5. Click the Paragraph Format button (it will show the heading level), and then select Normal. This converts the heading to a paragraph (<p>) and will keep a little white space, but won't cause Siteimprove to flag the page.
    TIP: Don't select Normal (DIV).
  6. Repeat steps 4 and 5 for each area with an empty heading.
  7. Save and publish.

How to Avoid This Issue

When copying and pasting content into the HTML editor, do a quick review for any extra space between paragraphs, after tables, or at the end of the content.  Click your cursor into any suspicious spaces, and check the Paragraph Format button (top left of HTML editor) and Tag Selector area (bottom right of HTML editor.  These will indicate the HTML tag being used.  Adjust any empty headings before saving and publishing.

Siteimprove Issue:

Headings Are Not Structured
One or more heading levels have been skipped.

 

Why This Is Important

Heading tags help assistive technology users to understand how content is structured. They're also used for in-page screen reader navigation.

When adding heading tags, you should ensure that they follow a nested structure. h1 is used for the primary heading, followed by h2 for subheadings, and so on to h6.

Correcting your heading structure may also help to improve your site's SEO.

Where Incorrect Heading Levels Come From

On most Drupal pages, the content title is displayed as an h1. In the screenshot above, "On Campus Rates & Installments" is the h1.

The first heading inside the content's Body field should be an h2. In the screenshot above, "Rates" is using h3, when it should be using h2.

Headings after that first h2 should be either another h2 (if it's not a subheading), or an h3 (if it is a subheading). Further levels of sub-subheadings would use h4, then h5, then h6.  Most content on SSU's sites never needs to go beyond h4. 

Siteimprove can see when headings are skipped, but can't tell if any subsequent headings are at the correct level. In the screenshot above, "Installment Schedule" is an h3.  This is fine if "Installment Schedule" is a subheading in the Rates topic.  However, it's more likely that "Installment Schedule" is separate from "Rates", so it should also be changed to use h2. 

Headings should not be used for text or images of text that do not actually function as a heading.  They should not be used for making "fine print" below tables or for image captions - those should just use paragraph tags.

Incorrect heading levels might be due to:

  • The content owner chose the wrong heading level by accident.
  • The content owner chose a heading level that has a size they like (because they think a heading looks too big or small).
  • The content owner used a small heading to make image captions or fine print below a table.
  • The content owner copied and pasted an incorrect heading level from an original document.

Note: Sometimes headings are created dynamically by a Drupal View in a way that cannot be changed.  For example, if your site uses the Faculty & Staff Profiles to display a list of employees sorted by employee type taxonomy (like we do on our IT Department Staff page), Drupal makes those category headings an h3, which cannot be changed.  If you're not sure about headings on one or more of your pages, use the Siteimprove Issue/Request form to ask for specific for support.

How to Fix the Issue in Drupal

  1. Login to your Drupal site.
  2. Go to the page with the issue.
  3. Make a new draft.
  4. In the HTML editor, click in the area that has the incorrect heading.
  5. Click the Paragraph Format button (it will show the heading level), and then select the correct heading level. If the heading should be converted to a paragraph, select Normal.
    TIP: Don't select Normal (DIV).
  6. Repeat steps 4 and 5 for each area with an incorrect heading level.
  7. Save and publish.

How to Avoid This Issue

  • When copying and pasting content into the HTML editor, do a quick review to make sure all headings are at the correct level.  Make sure no headings are skipping a level.
  • Use a browser extension like WebAIM toolbar or Web Developer Toolbar to get an outline of the page's heading structure.

 

Siteimprove Issue:

Inline frame without a text alternative
Every inline frame (iframe) should have a text alternative that summarizes its content or purpose.

This usually means the page has embedded content, usually from another site, but is missing a title.

Why this is important

Inline frames (iframes) are used to insert content from other parts of the web.

A title that summarizes the visual content will help screen reader users to understand the iframe's purpose on the page.

Where Iframes with Missing Titles Come From

Most often, these iframes are copied from YouTube, Vimeo, Google Apps, Yuja, and other applications that allow embedding (sometimes labeled "Share") of their content on other sites.  Usually, you click a Share link, and are provided HTML code to copy to your Drupal site.  Unfortunately, this share code is not always completely accessible, and very often does not include the title attribute or ARIA label required for accessibility.

Example Code from YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KyqVDewZ2kU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

To be accessible, that code should include the title attribute, with the title of the video or a very short description or summary, like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KyqVDewZ2kU" title="Sacred Tibetan Sand Mandala"> frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here's an example of a YouTube video iframe with the title attribute.  Use your browser's View Source command to see what the code looks like.

How to Fix Iframe's Missing Title Text in Drupal

  1. Login to your Drupal site.
  2. Go to the page with the iframe missing title text - Siteimprove's dashboard can direct you to these pages.
  3. Click New Draft.
  4. In the Body field (HTML editor), locate the iframe and double-click it.
  5. In the Advisory Title field, type the title of the embedded content, or a very short summary of what it is.
  6. Click OK.
  7. Save and publish.

Note:  Some applications will provide default title text, such as "Youtube Video Player" - this is not adequate to meet accessibility requirements.  Also, if you have multiple iframes on the same page all using the same title text, this will create another accessibility issue.  The title text must be unique, meaningful and related to the embedded content.

Iframes Generated by Javascripts

Some applications provide a javascript instead of iframe code.  The javascript is inserted into your page, and that generates the iframe when the page is displayed.  Unfortunately, we cannot edit a third-party javascript, and cannot add the required title or ARIA label.

How to Avoid the Problem

Follow our instructions for Adding Video to a Page - there are 2 methods.  Use the HTML editor's Add Media button for YouTube (this will automatically add the title), and the Share > Embed method for other applications.

For non-video content, you can usually use the same Share > Embed method.

Siteimprove’s support site contains many tutorials, webinars and FAQs to help website content editors learn about accessibility and how to use Siteimprove. Some of the support content is only available to Siteimprove users.  Login to your Siteimprove account, then click the Help Center & Academy menu to make a selection.

Tutorials are interactive step-by-step guides that provide an overview of Siteimprove features.  These work best if you first login to your Siteimprove account.

 

 

Siteimprove is cloud-based Digital Presence Optimization (DPO) software. It includes dashboards to assist in optimizing quality assurance, accessibility, and search engine optimization (SEO). SSU utilizes this software primarily to address and improve website accessibility.

All SSU Drupal websites are scanned by Siteimprove.  Content Leads are given access to Siteimprove reports for their sites.

Siteimprove may be available for other sonoma.edu sites. Contact the Web Office for more information.

IT Web Services has developed and maintains a set of template files that may be used for official University sites that are not hosted on SSU Drupal.  These may be shared with vendors or contractors who are building sites for SSU departments, programs, and services.

The template files are available on SSU IT's Gitlab site. Please submit a general-type Drupal/Website ticket to request access.

Web accessibility is the practice of applying design principles to make web sites, web applications and web content accessible to persons with disabilities who may be using assistive technologies to access the site.

It is the policy of the CSU system to make information technology resources, including web sites, web applications and web content, accessible to all CSU students, staff, faculty and the general public regardless of disability.

SSU web sites must conform to Section 508 of the Rehabilitation Act of 1973. The University has appointed a steering committee to develop plans for ensuring the University meets the requirements of the CSU Accessible Technology Initiative. See SSU's Accessibility site for more information.

Is Your Web Site Accessible?

The Web Office can evaluate department sites for accessibility compliance.

Automated Scan with Siteimprove
Siteimprove is an application that can crawl a website, checking for potential accessibility and quality issues.  
Manual Evaluation
Some accessibility requirements require a human to validate.  The Web Office can use the manual evaluation process developed by the CSU ATI Web group to identify accessibility problems and possible solutions. Submit a "Problem/Issue with Live Site" Drupal/Website ticket.

Sonoma State University Web Policy provides rules and guidelines for SSU websites.

See Web Policy on the University Policies site for more information.

New Brand

Effective March 25, 2021.

Here are samples of SSU brand colors for SSU websites.  These are available on Drupal sites using the new SSUedu Child theme.

New SSU Brand Colors & Combinations
Sample Color Name RGB Hex Use with
  University Blue 0 76 151 #004C97 White
  University Blue 50% 172 202 233 #ACCAE9 Black
  University Blue 25% 232 242 254 #E8F2FE Black
  Black 0 0 0 #000000 White
  Dark Grey 83 85 84 #535554 White
  Light Grey 205 207 211 #CDCFD3 Black
  White 255 255 255 #FFFFFF Black
  Field dark 123 59 12 #7B3B0C White
  Field 239 181 50 #EFB532 Black
  Field light 255 227 156 #FFE39C Black
  Hills dark 50 96 39 #326027 White
  Hills 122 188 87 #7ABC57 Black
  Hills light 217 237 164 #D9EDA4 Black
  Salmon dark 152 54 61 #98363D White
  Salmon 245 148 112 #F59470 Black
  Salmon light 255 214 199 #FFD6C7 Black
  Grape dark 109 65 129 #6D4181 White
  Grape 174 138 201 #AE8AC9 Black
  Grape light 230 204 224 #E6CCE0 Black
  Lakes dark 29 93 101 #1D5D65 White
  Lakes 95 203 213 #5FCBD5 Black
  Lakes light 208 239 239 #D0EFEF Black
  Warning 172 0 0 #AC0000 White

Sometimes, when you edit your Drupal site, you may see a message like this one:

This is a warning from Drupal that a security update has been released and must be installed.

IT monitors all Drupal security update releases, and manages software updates centrally.  When an update is released, IT downloads and tests it, then applies it to all SSU Drupal sites, usually within 1-3 business days.  In most cases there is no noticeable downtime, and nothing department content owners and editors need to do about the update.