Accessibility

Sherman

sherman

Sherman became the new default theme for all Aurora sites upon its release in August 2014. It features a number of enhancements over Hale, the previous default theme, including:

  • Page Builder for the homepage
  • Improved Typography and Design with more white space.
  • Improved features for accessibility. Specifically, removes styles from elements within tables, and scans pages for missing alt tags on images.

Sherman is a child theme of Cornerstone, and utilizes SASS to be as lightweight as possible. Its design is bold, yet clearly a product of the university. It is named after Roger Sherman, Connecticut’s representative to the Continental Congress, and one of the Founding Fathers.

Features

Link Flags

All links to external sites are marked with an icon.
All links to downloadable files like PDFs or DOCs are marked with an icon.

Accessibility Enhancements

Scans images for missing Alt tags, and adds an error message if one it missing.
Strips styles out of tables to discourage the use of tables for presentation layouts.

Accessibility

With Sherman, we’ve tried to improve our web accessibility with these features:

Skip Links

Visible only to screen readers, these links allow users to skip to the navigation or content.

Table Formatting

To discourage the practice of using html tables to layout pages, new styles have been put in place to remove all styles from any element in a table cell. Headings, paragraphs, bullet lists, and more all become plain black text.

Alt Tag Checker

Each image on a page is scanned, and if it’s missing an Alt tag, you’ll see the image grayed out, set to 50% opacity, and an error message will appear asking you to please add an Alt tag.

Resources

Examples

Find examples of sites using the Sherman theme at the top of the Live Sites with Default Template page.

Going Live

Before Going Live

Check Admin Email

Be sure to check the admin email for the account, which is listed under Settings > General > E-mail Address. This email is used for a number of purposes and is essential for any sites using the Gravity Forms plugin. The admin email receives all form results and notifications pertaining to Gravity Forms.

email address

Check for Broken Links

Go to your dashboard and check to see if there are any broken links. If there are, be sure to repair them before you go live.
Broken Links Page Screenshot

Accessibility Check

Every site should have contact information in an obvious place (footer, main navigation, homepage). Read through the Accessibility Guidelines and perform spot checks on any pages you think might be problematic.

Search Engine Visibility

From the dashboard, go to Settings > Reading. Make sure the Search Engine Visibility option is unchecked. If left checked, this will block Google and other search engines from listing your content in their search results.

Request Live Site Address

Submit the Go Live Request form. Once the change is made, you will be notified. Some will see the changes immediately, although it may take a few hours for everyone to see the new version of the site. You can reboot your computer to see the change immediately, or if you’re comfortable in the command line you can clear your DNS cache.

After Going Live

You will receive an email notifying you that the site is live.  Now you should complete the following items:

Check for Broken Links Again

Run Broken Link Checker

Depending on how you made your site, it’s possible that there could be broken links in the Navigation or Homepage after the site address changes. Run one more check to be sure everything is ok.

  1. Tools > Broken Links
  2. Click the Search button on the top right
  3. Leave all the fields blank, and click Search

Manually Check Any Widgets

The Broken Link checker doesn’t scan the contents of widgets like the visual editor and others. On your homepage and any other page that uses sidebars, check the links by clicking on them to make sure they work correctly.

Google Setup

Optional, but recommended.

Analytics

Aurora uses Google Analytics to track site-specific traffic information. If you are interested in site traffic statistics, please follow the instructions to set up Google Analytics for your website.

Crawling

Google will eventually find your site and index it. With Google Webmaster Tools, you can speed up the process. This requires Analytics to have already been setup on your site, so if you haven’t done that yet, do that now. While verifying your ownership, use alternative methods: Google Analytics. You may have to clear the site cache under Settings > WP Cache in order to properly verify.

Requesting a Google Crawl of your site

Remove Old Site

It’s always a good idea to deactivate the old site to prevent your visitors from accessing the old/incorrect information. Old sites can show up in Google search results even after you’ve moved your address to the new site.

To remove old sites from the UITS web2 or web9 servers, contact webdev@uconn.edu.
To remove old sites from other servers (Business, NEAG, Libraries, Law, Health, etc) please contact the administrator of that server.

Color Picker

The color picker on paletton.com allows you to pick colors that will compliment each other.

There are also a number of color picker browser extensions that can make it easy to grab HEX color codes from webpages. A popular one is ColorZilla which is available on Chrome and Firefox. In addition to grabbing individual colors, ColorZilla can display a palette of all the colors present on a page and generate CSS gradients.

Accessibility

Accessibility compliance is broken into three tiers, 'A', 'AA', and 'AAA'. Our central themes are all built to adhere to the required level 'A' compliance. Contrast rules are necessary for the higher 'AA' level of compliance.

That said, if you'd like to increase the contrast of the link color, you can open the Appearance > Custom CSS tool, and add in the following code:

.content a { color: blue;}

Use a contrast checker to check accessibility.

Accessibility

All University websites are required to be compliant with the Americans with Disabilities Act, Section 508 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications).

While Aurora’s central themes are tested and kept accessible by UITS web developers, individual webmasters are responsible for keeping the content of their pages and sites accessible as well.

Quick Tips to Keep Your Pages Accessible

Use Good Alt Tags

Alt tags for images help make a site more accessible. WordPress will use the file name of an image as the Alt tag, but this is likely not going to be good enough to pass an accessibility review. A good alt tag briefly describes the content of an image.

No Table Layouts

Layouts of rows and columns should be done with Bootstrap code, not HTML Tables. Besides being inaccessible, HTML tables will also break your pages in mobile views! Tables should only be used when the content in a cell is defined by what row and column it belongs to.

Avoid ‘Click Here’ Links

Avoid ‘Click Here’ and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it will help with your Google search rankings. For example, “For more information about our admissions process click here” could be better as “More information about our admissions process“.

Use Headings

Use headings to organize your page content. For example, this page uses Heading 2 (h2) and Heading 3 (h3) tags. “Quick Tips to Keep Your Pages Accessible” is a Heading 2, and “Use Headings” is a Heading 3. Besides bringing in a larger font and adding white space, these headings are great for accessibility. They allow impaired users to skip through the heading tags the same way you would visually scan a page for headlines. Heading 3 would be a subsection within an Heading 2 section. You can add headings to a by going to Format > Formats > Headings or by using the keyboard shortcut (Control + 2, Control + 3, etc. on Windows, Command + 2, Command + 3, etc. on Mac). Headings help your site to look great, be more accessible, and they will really help your search engine rankings.

Watch Color Contrast

Be careful with color contrast. You will be able to change the color of your page text or upload images with text. Remember that users may have forms of color blindness or weaker eyesight. In the Resources section below, there are ways to measure the contrast levels with some websites or apps. In general, don’t put red text on a green background, or yellow text on a white background. Make sure your text is clearly legible.

Contact Information

Be sure to have contact information clearly visible on the website (homepage, main navigation, or footer), providing the ability to request alternate versions of inaccessible material to viewers with disabilities.

Resources

Please note that while these tools will help issues, many aspects of web accessibility require a degree of judgement. For example, a tool can detect if you're missing an Alt tag for an image, but it won't be able to figure out if an Alt tag accurately describes the image.

Tool Description Instructions
WAVE A website that scans a single page of your site. After scanning, click the Flag icon, then change the filter to Section 508.
Web Accessibility Toolbar A browser extension for Internet Explorer that allows you to quickly run scans on any webpage.  
Accessibility Evaluation Toolbar A browser extension for Firefox that allows you to quickly run scans on any webpage.