Skip to main content

All digital content created for UNC business must be accessible to all users. These tips are meant to be a starting point for ensuring accessibility in all digital content.

Headings​

Use headings instead of large or bold text to break content into skimmable sections. They also give your content 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.

Consistent layout​

A consistent layout helps to keep viewers oriented from page to page and sets their expectation of interactive elements such as navigation.

Keep it text​

Try to avoid images of text and instead use actual text whenever possible. Images of text can become pixelized/blurry when zoomed in on, and require all the text to be replicated in the alt text for the image.

Text Sizing and Spacing​

Keeping your text size and spacing at the default for whichever platform you are using will ensure the best accessibility. When you make text too small, or squish the lines together with poor spacing it can cause it to be hard to read.

Plain language

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.

Descriptive links​

Like headings, distinguishing links from other text on a page makes content easier to skim. Screen readers and other assistive technologies allow users to browse a website by links only. 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.

Other popular examples are “Click Here” and “Read More” links. Click here for what? Read more about what? Adding more descriptive links such as “Subscribe to our Newsletter” instead of “Click Here” can help users find the information they want quicker and easier.

Color contrast​

Ensuring that your text and background colors have a high enough contrast will help improve readability of your content for all users. Use the WebAIM Color Contrast Checker to test the color contrast of your text/background color combinations.

We recommend the following color palette when using Carolina Blue in a digital format:

Web Carolina Blue
Web Carolina Blue:
Hex #4B9CD3
RGB 75, 156, 211
Web Link Blue
Link Blue:
Hex #007FAE
RGB 0, 127, 174

NOTE: When using Web Carolina Blue, text must be 24 px (or 19 px bold) to meet WCAG color contrast requirements. For smaller text, use Link Blue or a darker color on a light background.

Alternative text​

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.

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.

Ask the DAO

The above tips are just a starting point. The Digital Accessibility Office is here to help you make all your digital content accessible. Schedule a consultation with us via the Online Help Desk and we will be happy to discuss your projects.