Image Alt Text (Alternative Text)

The alt text of an image is an attribute that’s required for a website accessibility.

When adding an image to the WordPress Media Library, the Alternative Text field must be filled in, unless the image is purely decorative. For purely decorative images used for design purposes, leave this field blank.

When you use the Add Media button to insert an image on a page, the alt attibute will automatically be included. For example, in this code, <img src="/photos/campus-view.jpg" alt="CGU campus view" />, the alt attribute is alt="CGU campus view".

For the alt text, there’s no need to say that it’s an image or photo. For example, don’t use alt="Photo of CGU campus view".

For purely decorative images the alt text is just empty quotes, for example: <img src="/images/page-break.jpg" alt="" />. (Leave the Alternative Text field blank. The empty quotes will be automatically inserted.

If you insert an image on a page manually using the <img> tag, you need to also add the alt attribute manually.

 

Links and URL’s

Don’t use non-descriptive link texts such as “Click Here” as they’re not compliant with web accessibility.

Instead, rephrase the content so the link text describes the page it’s linking to. For example, this is bad:
“To register for the event, Click Here.”

This is good:
“To register for the event, please complete the Registration Form.”

Don’t use long complicated URL’s as the link text. For example, this is bad:
“Watch the video here https://www.youtube.com/watch?v=1q8NCe2SxG0

If there are multiple links on a page that go to the same URL, the link text for each of those links should also be the same.

For example, this is bad:
<a href="https://www.cgu.edu">CGU Site</a>
<a href="https://www.cgu.edu">CGU Website</a>
<a href="https://www.cgu.edu">CGU Home</a>

If your link goes to a downloadable file, such as a DOC or PDF, indicate that in brackets following the link text.

View the 2015 Clery Act Reports (PDF).


Font Size
The main content of a page should use a font-size of 12pt (16px or 1em). This is the default for the CGU-Core theme.

Foreground/Background Contrast
You can use an online Contrast Checker to make sure the content of a page can be read by as many users as possible. Even if the contrast checker says it’s OK, the contrast may still appear too low. It’s better to err on the side of more contrast.


Design

Navigation Menu
Keep the navigation menu simple. Avoid nesting menu items more than 2 levels deep.

Avoid Duplicating Content
Duplicate content makes it much harder to manage a site. Often, the duplicate content might get updated in one place, but not in another place. Duplicate content can also be confusing for users. Imagine if everyone had a twin. If there’s content like quick links in the sidebar that needs to be duplicated on each page, you can use the [content] shortcode.


Security

Links That Open In New Window
When creating a link that opens in a new window it’s necessary to include the rel=”noopener noreferrer” attribute for security. For example:
<a href="https://www.cgu.edu" target="_blank" rel="noopener noreferrer">CGU Site</a>

Publishing Emails
Avoid publishing emails on web pages if you can because emails can be scraped and spammed. An alternative is to use a contact form.

To Be Continued