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 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-Y Best 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 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 Questions?