Clark’s website is for everyone. The institution embraces equity, diversity, and inclusion, and its website must communicate the same.
Images and color
- Alternative text for images – always include appropriate “alt” text for uploaded images. Alt text helps visitors using assistive technology understand your web content.
- Ensure videos have captions – all videos must be closed captioned, those that aren’t must provide a transcript.
- Be mindful of text contrast – text must have sufficient contrast against backgrounds, and should generally not be layered over images. In order to be WCAG 2.0 level AA compliant, small text must have a contrast ratio of at least 4.5:1 and large text must have a ratio of 3:1. Level AAA compliance requires a contrast ratio of 7:1 for small text and 4.5:1 for large text. Large text is defined as 14pt and bold or larger, or 18pt and larger. https://webaim.org/resources/contrastchecker/
- Be mindful of color – people perceive certain elements differently than intended. Avoid using color to impart meaning or emphasis.
Usability
- Do not provide instructions on how to use a page – if your page requires instructions, redesign it. In addition, your visitors already know how forms work, there’s no need to use language like, “fill in the form below.”
- Do not open links in new windows – research indicates that new windows make it harder for your visitor to browse your site.
- Use plain language – simple and positive language makes it easier for the public to read and understand our website. Consider visitors who aren’t fluent in English or otherwise struggle with reading.
- Never describe where elements appear – on your big monitor, something might be on the right, but on a smaller screen, it may appear below. Either link directly to the resource or reference it without describing its location.
- Test your pages on a small screen – many web pages are primarily viewed on a phone. Your page must work well on small screens. Tip: design first for a phone, second for a larger display.
- Use engaging link text – a good link informs the visitor what it is without reading the content around it. It can be a few words. Try to include a verb in your link text. Do not use “click,” “tap,” or any other hardware reference.
Follow correct syntax
The way we format text affects more than the appearance and layout of the page. For example, it’s easy to make a header bold and it can have the desired look and feel, but formatting the same text as a header signals gives meaning in relationship to any text that follows. Consistent syntax helps signal what type of content users are reading. This is particularly helpful for viewers who use assistive technology to access your content, and is also helpful for search engine optimization.
- Use proper headings – assistive technology relies on heading elements to navigate a page’s content hierarchy, use them properly. Be sure that your heading blocks follow a nested pattern.
HTML syntax is organized like an outline:
<h1>Title</h1>
<h2>Topic 1</h2>
<h3>Subtopic A</h3>
<h3>Subtopic B</h3>
<h2>Topic 2</h2>
<h2>Topic 3</h2>