Web Accessibility Guidelines

In print and online, we’re accustomed to using visual cues to delineate information. For example, a list of majors and minors might put the majors in black ink and minors in red. These color cues, of course, do not translate for a screen reader. Screen readers also do not identify bold and italic fonts.

Color should always be a secondary way to convey information. For example, if you want to use color to distinguish majors from minors in a list of academic programs, mark the difference another way as well, perhaps with an asterisk or the word “minor.”

Content managers should use the pre-designated UNCW styles (that is, typefaces, point sizes and colors) available in the templates.

Headings: To comply with ADA policies and the functionality of automatic readers, content managers need to use the headings in the consecutive order in which they are listed in the styles area.

Typography: The use of the styles for typography helps ensure that UNCW’s web pages will be consistent when viewed on a computer with a web browser or with a handheld device and when printed. These specially-designed styles permit visitors to increase or decrease the display size of the text in their browsing software per their vision needs. This increases the ADA accessibility and functionality of UNCW web pages.

Page titles: Web page titles follow this convention: Page: Department: Division: UNCW. Start from a specific description of your page and progress to the more general description, e.g. Transfer Application: Admissions: UNCW

Tables and charts: Tables must be marked up correctly to be understood through other interfaces than the standard graphical browser—this is a code issue, but as the writer, you can ask the questions and can also think about whether there’s an equivalent, text-based way to present the same information, possibly on another page that’s linked from the table. Rows and columns must have appropriate headers to make the code work, so be sure you include them in a table.

We all scan web pages to see if they have what we’re looking for. People using a screen reader are no different, except they often “scan” a page by tabbing through the links. Be specific and substantive in links: “Financial Aid Process” rather than “Click here” or “More.” Don’t use the URL as the link.

The web is a visually rich medium. To convey that richness in language (thus making it accessible to those who maybe visually impaired), all images require a brief description in the “image alternative text” field including:

Navigation Elements: The alt tag should summarize the action of the button. “Apply” is enough; don’t say “Apply Button.”

Photos: The alt tag can be simple if the photo is used for context or to set a mood: “Swans on the lake.”

Image alt text is required to make web pages accessible. The alt text should clearly describe the images, photographs, drawings or artwork, in as few - and descriptive - words as possible. For example, “sycamore tree” rather than “tree”; or “A huge sycamore tree at the corner of Oleander and College in Wilmington NC”.

The alt tag is important because it:

• Tells the search engine more about your image for proper Google indexing.
• Gives a description for site visitors who use screen readers.
• Tells the visitor what’s on the page if they can’t load the image or are viewing a text-only version of the page.

Best practices include:

• Not overusing keywords (e.g., “lab technician conducting lab tests in a hospital lab”).
• Keeping it a reasonable length, preferably under 125 characters.
• Having the alt text for linked or clickable images describe the purpose or destination of the link.

If possible, content managers should include captions with their images. Unless attribution rights have been waived by the photographer or copyright holder(s), photo credit attribution should always be included. If the information is not available, the photo must be in the public domain or expressly donated for the proposed use.

As you request multimedia content, plan for fewer barriers:

• Captions for embedded video or animation timed to work with the images. Captioning should include all audio content of substance: music, environmental sounds, etc.
• Descriptions of the visual content of the video or animation, such as facial expressions or key locations, timed to flow at the same speed as the moving visuals and to not overlap any soundtrack
• Transcripts of podcasts or other audio-only content

If any of these are not available, create an additional page with equivalent content or functionality.

PDFs come with a series of problems:

Difficult mobile experience: Because about half of visitors access the web on a mobile phone, the use of PDFs significantly reduces their ability to read your content on small devices.

Reduced accessibility: PDFs often violate accessibility requirements, making the content difficult to consume for those with vision, cognitive or hearing impairment.

Specifically, they lack:

• Alt tags for images
• Reading order for screen readers
• Color contrast consistency
• Easy searchability for keywords

Ideally, all important content (that is, any content worth publishing) will be contained within the webpage. If you must upload a PDF, you must also make it accessible.

But, be forewarned that even an "accessible" PDF has limits. The order in which a screen reader renders the content is not the same order a sighted user would see. The screen reader might speak the address first and the main headline last. Putting the information into the site as live copy, through the CMS, creates a better experience for you and for your users.

Exceptions: If you feel your PDF is necessary to your business processes, please submit a ticket to assess it. You must make it accessible prior to submitting it for assessment.

ITS offers a video workshop discussing PDF accessibility and an Introduction to PDF Remediation class through the Dare to Learn Academy. Acrobat Pro has an accessibility checker to help you make PDFs accessible.

Alternatives to PDF forms: ITS offers several options for forms, including DocuSign, Microsoft Forms, and Qualtrics, depending on your needs.