NSU Web Services

Website Guidelines &Creating Accessible Website

Content

Website Guidelines & Creating Accessible Website Content

NSU Website Content Editors & Contributors

Guidelines

The NSU Content Editors and Contributors

Guidelines are principles and procedures that

need to be adopted by each content editor &

content contributor in order to keep a unified

and consistent web presence.

Content Manager & Content Editor Best

Practices

Review your website on a monthly basis

to ensure freshness and accuracy of

content.

Check the spelling and links on your

website to be sure they open correctly.

Website Guidelines & Creating Accessible Website Content

Content Manager & Content Editor Best

Practices

Do not endorse people, businesses,

products or other websites on your

website.

Only use images or photos that you or the

university owns or that you have

permission to use – and have obtained

signed release forms for.

Website Guidelines & Creating Accessible Website Content

Content Manager & Content Editor Best

Practices

Submit your changes in a timely manner

and follow the posted submission

procedures.

If you have questions, comments or

concerns contact the NSU Webmaster at

webmaster@nsu.edu

Website Guidelines & Creating Accessible Website Content

Why Guidelines & Policies are Important

Website Guidelines & Creating Accessible Website Content

How would a special reader for the blind read this sentence?

THANK YOU FOR YOUR INTEREST IN NORFOLK

STATE UNIVERSITY

Question 1

screen readers for the blind would read this one letter at a time:

T-H-A-N-K Y-O-U F-O-R Y-O-U-R I-N-T-E-R-E-S-T I-N N-O-R-F-O-L-K

S-T-A-T-E U-N-I-V-E-R-S-I-T-YBest Practice: Only use ALL CAPS for known

acronyms

Answer 1

How would a person that is color blind respond to this?

Select the Red button to continue

Question 2

A person that is colorblind might not be able to differentiate between green

and red or other colors.

Back Next

Best Practice: Never require a person to select an item of a specific color to give

instruction or direction.

Answer 2

How would a special reader for the blind read words that are scrolling or

animated?

New Student Orientation will take place on June 02, 2015 in the Douglas Wilder

Performing Arts Center from 8:00 a.m. through 4:00 p.m. with a one hour break for

lunch. Click here to register.

Question 3

screen readers cannot view text that is part of an animation.

New Student Orientation will take place on June 02, 2015 in the Douglas Wilder Performing Arts Center from 8:00 a.m. through 4:00 p.m. with a one hour break for lunch. Click

here to register.

[click here for information regarding New Student Orientation]

Best Practice: A link can be added to indicate a text equivalent, which would give users with screen readers the same information.

Answer 3

Did you know that using Heading 1 through Heading

6 on your website, in the correct consecutive order,

gives a menu to screen readers where they can

quickly scan your headings and jump to that section?

Using H1 through H6 on your web pages also lends to better

searchability.

Did You Know?

Image Description (or alt tag) names the image

names the link

Title Attribute provides additional information, to expand on the meaning of the related image

provides information regarding what happens when you click the related link.

Akin to a tool tip

For users, not search engines.

Not all screen readers render title tags

Do not use the same title attribute and image description. The screen reader will read it

twice.

Do not add link titles to links that are already descriptive.

Use for: Read More, Read Article, or when the links name might be shortened

(truncated).

Did You Know?

Did you know that when you use Read More

on your webpages that screen readers ONLY

read the words “Read More”?

Did You Know?

Readers can also display just a listing of the links on the web

page for the visually impaired. Imagine the only thing that

appears is: Read More.. Read More.. Etc..When adding links, place a description in the Title box.

Read more will be on the page, but the visual impaired using a reader, will have more information regarding the link.

Did you know that when you use images on your

webpages that screen readers only see them as bumps?

Did You Know?

Use alternate (alt) tags when using images. This text will be

read to the user by the special reader so they gain more

information about the image. Remember – text ON an image is not picked up by screen readers.

Accessibility is about equal access and it is a federal law (Section 508)

Image Description:

It is recommend 125 characters or fewer because of restrictions within the screen readers.

Many screen readers break up longer text tracts into blocks of 125 characters, which can be confusing to users.

Did You Know?

Image descriptions (Alt text or alternate text) is a required field by the

HTML standards specifications. It is displayed when a user’s browser

or email client, is unable to locate an image. Search engines like

Google use alt tag as a ranking factor in their image search results. 

Image Description Tips

A web page with buttons that do not have the image description filled out, will be read by a screen reader as: image, image, image image.

Instead of: Home, About Us, Events, Contact Us

Tips for Image Description

Do not use an image description for decorative images, so the screen

reader will not see them. Example: “Horizontal Line”

Title Attribute

Image title should provide additional information and follow the rules of the regular title

It should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“).

In Firefox and Opera it pops up when you hover over an image.

Did You Know?

Keep your title attributes meaningful and

relevant.

Title Attribute

ALL CAPS take up more space Reminder: CAPS are read off by screen readers, one

letter at a time, instead of the word being sounded out. Ensure your title attribute gives adequate description of

your link or image. Use as many keywords in your phrase as possible.

Tips for Title Attribute

Do not use an image description for decorative images, so the screen

reader will not see them. Example: “Horizontal Line”

1. Be mindful of users with cognitive issues

2. Be mindful of colorblind users

3. Be mindful of those using screen readers

4. Ensure you give equal access to your content

5. Videos should have closed caption available

6. Image description – names the image or the link

7. Title attribute – gives additional description of

image or link

Recap

Resources & more information is located on the NSU Web

Services website at http://www.nsu.edu/website

Questions?