DIGITAL STANDARDS
The University of Wisconsin-Whitewater's website is the primary marketing and communications tool to engage and inform prospective students and their families, current students, alumni, faculty, staff, and the greater community. Every page should be accessible, correctly optimized, and contain a call to action and/or contact information for people to find out more information.
These digital standards provide a framework for content creators to ensure each webpage is built correctly, using best practices and in accordance with accessibility needs to support the university's mission and the website operating agreement.
UW-Whitewater adheres to the WCAG 2.1 AA standard for digital accessibility. It is vital that every webpage reflects this level of accessibility, in both content and design, to ensure our website is a resource for all users. This includes:
Use headings correctly
Content should be organized using the proper heading structure. <h>
Include alt text on all photos
All images need alt text that describes what is seen in the photo.
Links need to have descriptive text
A link needs to provide direction. If linking to a page, the name of the page must be linked. "Click here" or "read more" are not examples of links with descriptive text. It needs to explain what people will be reading when they visit the link.
Correct way to show a link: Visit our homepage
Incorrect way to show a link: Visit our homepage at www.uww.edu/.
Avoid linking to PDFs
Image-based PDFs are completely inaccessible. If you must link to a PDF, these steps must be followed.
Text formatting
Avoid using unnecessary color in body copy. Text cannot be bold if it's not a link and in the same sentence as a link. Links on our site must be distinguishable and cannot be confused by text formatting for non-linked texts.
Avoid using tables
Tables used for images or design purposes are not accessible. If a table must be used, it can only contain data and these steps must be followed.
Color contrast
Accessible color contrast is necessary to ensure all users can view all content. To check the color contrast on your page, view our FAQ.
Avoid columns and sidebars
Columns and sidebars should be avoided as they can be difficult for some users to comprehend.
For additional knowledge regarding website accessibility, visit Getting Started with Website Accessibility.
Clearly categorize content based on its purpose and do not duplicate content from another area of the site. When mentioning topics covered in other areas of the website, use hyperlinks to direct users to the appropriate pages.
Branding must be maintained within the rules of UW-Whitewater’s Brand and Identity Standards.
Search engine optimization
Every page should be search engine optimized (SEO). This best practice allows search engines to better understand the content on our pages and allows the user to find our website (and individual pages) faster and more efficiently. Search engines rely on text and HTML elements to provide the necessary information needed in order to rank well in a web search. Our website is currently setup with ready-to-use components to help with this. At the bottom of every page is a Search Engine Optimization drop down. This contains a spot to include a browser title, description and keywords. In addition, our website needs to contain keyword-rich information on fewer pages. For more help with search engine optimization and keywords, visit Search Engine Optimization in Ingeniux.
Linking between pages
A link should open in a new page only if it leaves our UWW website.
Linking to a PDF
When linking to a PDF, include the text "[PDF]" in the link, so the user knows what to expect.
Design elements
There are several components already created that are ready to use and compatible with our website:
- Do not add custom code.
- Arrange the components in Ingeniux in the order that they appear on the webpage.
- Do not rely on copy written into your slider or main header image — that information cannot be read by a search engine or screen reader.
- Use dark text on a light background. Light text on a dark background should be minimal and only used for a call-out.
Image, icons, sizes and usage
Images from PhotoShelter are encouraged and an icon library is available for use in Ingeniux under assets/images/icons. All images need to be correctly optimized for web.
Recommendations:
- File formats should be JPG, PNG, GIF, SVG, or PDF
- Images are correctly sized with a resolution lower than 172
- Standard images to fit Ingeniux components:
- Sliders: 2260x900
- Standard images: 900x600
- Add alt text for all images
- Short description of what's happening in the graphic or photo, maximum of 125 characters
Naming Conventions
A best practice for online naming conventions (files, documents and pages) is to omit spaces or use hyphens in lue of spaces. Some browsers have difficulty reading spaces and will replace it with characters such as %. Instead of uploading a file called this is a file.jgp, use thisisafile.jpg or this-is-a-file.jpg.
Remove outdated content
By removing outdated content from our website, we can improve our search rankings, improve user experience, and reduce clutter. Assets and pages that are no longer used should be unpublished and pages should be redirected. Learn how to remove or archive items in Ingeniux »
Frequently Asked Questions
Adobe Acrobat Pro offers tools for creating accessible PDF documents. This article will give an outline on how to use the accessibility checker tool, as well as some tips about making your document more accessible.
To improve accessibility, it is best to ensure text color contrasts appropriately with the background of the website or document to ensure it is readable to those with visual impairments.
There are several helpful offered by ITS, including: