Websites are valuable tools for sharing information about Carolina and engaging with the University community.
We designed the guidelines below to assist staff and faculty who create and manage official University websites, such as for a professional school, department, office, center or institute.
Essential Foundations for an Effective Website
An effective and engaging website should be accessible to all users. UNC-Chapel Hill is committed to creating an accessible web presence. In 2019, the University adopted a new policy for digital accessibility. We adhere to Web Content Accessibility Guidelines (WCAG) 2.0 Level A and AA. All web owners must develop and edit their sites with accessibility in place.
An accessible website includes, but isn’t limited to:
- Alternative text on all images
- Headings and semantic elements
- Descriptive and clearly marked links
- Content in easy to understand language
- Text and background colors with clear contrast
- Interactive elements that are keyboard accessible
- No time-based elements such as image carousels
- Captions on all videos
The Digital Accessibility Office provides guidance for ensuring that your website is accessible.
Content strategy focuses on the planning, creation, delivery and governance of content. Who are the target audiences? Why do they come to this website? What should they know or do once they’re on the site? How often will you update the site? Who ensures that the content is up to date? Consider these questions at the beginning of any website project to ensure that content is accurate and useful.
The website should work as well on mobile devices as it does on bigger screens. It will frustrate visitors if the site provides a disappointing mobile experience. A responsive website presents the same content no matter what device you view it on. Though the content may display in a different order on smaller screen sizes. Contact UNC Creative for more information on designing a responsive website.
The utility bar provides quick links to important campus websites. It also makes it clear that a website is part of the University of North Carolina at Chapel Hill digital ecosystem. All websites should include the utility bar for consistency and branding. You can see the utility bar in gray at the top of this website.
A link to the Digital Accessibility Office report form is mandatory on all websites for University schools, departments and services. By using the utility bar, that link displays by default.
The University will provide UNC subdomains (name.unc.edu) for schools, departments and services. To ensure consistency, ITS oversees all domains within the unc.edu namespace. Visit Custom Domain Names for more information.
Alternative text is the text equivalent of an image in context. If the image is unavailable, web browsers display the text for users or screen readers read it. Most web editors like WordPress and Drupal provide an easy way to add alternative text.
Use headings instead of large or bold text to break content into skimmable sections. They also give your page structure making it easier to read. This is especially important for screen reader users who may navigate by headings.
Most web editors have built-in heading options. Each web page should have one heading 1, usually appearing as the page title. Following headings go in order from heading 2 to heading 6 as needed for the page’s content.
Like headings, distinguishing links from other text on a page makes content easier to skim. Link text needs to be descriptive and make sense on its own, out of context. For example, it’s easier to read link purpose guidelines than https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=121#link-purpose-in-context.
Always consider your audience when writing content. Content written for a broad audience needs to be clear, concise, and understandable. Writing in a conversational tone and using active voice regardless of your audience will make your content easy to read online. Plainlanguage.gov lists best practices and examples.
We recommend the following color palette when using Carolina Blue in a digital format:
Web Carolina Blue
RGB 75, 156, 211
NOTE: Use with font sizes larger than 24 px (or 19 px and bold).
RGB 0, 127, 174
NOTE: Use on a white background only.
When using Web Carolina Blue, text must be 24 px (or 19 px and bold) to meet WCAG color contrast requirements. For smaller text, use Hyperlink Blue or a darker color on a light background. Use the WebAIM Color Contrast Checker to test the color contrast of other color combinations.
Use Hyperlink Blue on a white background for links on your website. If using a different background color, check the contrast and adjust your hyperlink color. Links need additional contrast considerations because they must stand out from both the background and the surrounding text. Links default to this color on sites using the Heelium theme. See WebAIM’s Link Contrast Checker for more guidance.
For more information on the usage of University colors, please see the guidelines and resources on the Color Palette page.
All interactive elements, like links, buttons, or form fields, need to be accessible by the keyboard. If an interactive element isn’t accessible or if you can’t tell where you are on the page, there are accessibility issues on your website.
To test for this, open your website and use the tab key to navigate on a page. You should be able to tell where you are using the focus indicator. You should also be able to access all interactive elements in a logical order.
Time Based Elements
Removing time-based elements on your website improves accessibility for all users. Image and news carousels create accessibility barriers for users with mobility issues. They can also be distracting to users if they play or update automatically. Time limits on forms or other elements can also create barriers when users have to make choices or fill out a form.
Captions and Transcripts
Like alternative text on images, captions provide a text alternative for video content. Transcripts provide the same for audio-only content like a podcast. Automatic captions, like the ones on YouTube videos, are never accurate. If you work with video or audio content, consider attending the Digital Accessibility Office’s Captioning training to learn more.
Tools and Tutorials
- WebAIM Introduction to Web Accessibility: This article provides an overview of web accessibility requirements and best practices.
- WebAIM Color Contrast Checker: This web-based tools checks color contrast using hex codes. It includes helpful features like incremental lightening and darkening options.
- Siteimprove: This tool helps you improve and track accessibility and content issues. It includes robust reporting and dashboard features.
- WebAIM Keyboard Accessibility: This article covers the importance of testing your website without a mouse. An important aspect of web accessibility since many users navigate by keyboard only.
To download web resources, including button styles, Heelium hero image photos, and favicons, visit the Resources page on this website.
For information on websites and online experiences at Carolina, contact Kim Vassiliadis, manager of digital services and user experience at ITS Digital Services, at 919-537-3533 or firstname.lastname@example.org.