nsu web services website guidelines & creating accessible website content
TRANSCRIPT
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
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