Website Accessibility Guide
|Website Manual Testing||Have people who use screen readers, or screen magnification tools, test the website.||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|Website Keyboard Accessible||Many individuals with motor impairments prefer to use a traditional or modified keyboard for access, and most blind users also rely on keyboards for navigation.||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|Meaningful Phrases for Link Text||All links should be self-explanatory. Example: “Enroll in a Parent Tele-Support Group”. Never use “Click here” or “Learn More” as the text link.||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|#ScreenReaderFriendly Hashtags||Capitalize the first letter of each word in hashtags so that screen reader software can figure out how to pronounce each word separately. For example: #EyeOnHealth.||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|Alternative Text / Image Tags for Graphics||Where graphics includes text, provide alternative text (ie: “alt tag”) to supply all of the words. Example: <img src=”graphic.gif” alt=“Lighthouse Guild logo: Preventing Vision Loss” width=”50″ height=”20″>||AFB: https://www.afb.org/about-afb/what-we-do/afb-consulting/afb-accessibility-resources/tips-and-tricks|
|Provide Viewing Alternatives for All Multimedia||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|– Videos should be captioned.||Open captioning where the captions are visible by default. Open captioning is valuable to people who are viewing video content in situations where video is muted by default, in addition to helping people who are deaf or hard-of-hearing.|
|– Videos should also be described||Where short verbal descriptions of key visual aspects such as the setting, the participants, their actions and facial expressions, are provided to add context. The descriptions are inserted into pauses within a video’s dialogue.|
|– Provide transcripts for your audio and video content||Transcripts are an excellent access method for people who are deafblind or hard of hearing, and will also improve your multimedia content’s search engine discoverability.|
|Label Forms Properly||Enclose the label associated with an input field in a <label for=””> tag, or wrap it in a fieldset.||AFB: https://www.afb.org/about-afb/what-we-do/afb-consulting/afb-accessibility-resources/tips-and-tricks|
|Contrast & Color||Contrast and color use are vital to accessibility for people with low vision. Users, including users with visual disabilities, must be able to perceive content on the page. Test with the TPG Colour Contrast Analyser to confirm website contrast passes.||AFB: https://www.afb.org/blog/entry/your-campaign-accessible|
|Relative Font Sizes||Use relative font sizes in percentages or ems, instead of absolute font sizes in points or pixels.This allows users to make the text larger or smaller as needed.||AFB: https://www.afb.org/about-afb/what-we-do/afb-consulting/afb-accessibility-resources/tips-and-tricks|
|Provide Skip Links||Skip links allow the speech software or braille user to bypass information that is repeated on every page, such as navigation bars, to get to the main content on the page.
To implement skip links, place a link before the repeated information as follows: <a href=”#content”><img src=”empty.gif” height=”15″ border=”0″ alt=”Skip Main Navigation” width=“5″></a> And place an anchor at the beginning of unique copy:
The image can be transparent, so that the visual display is not affected, but speech and braille users can hear the alt tag reading “skip main navigation”.
It is also possible to use a text link that says <a href=”#content”>Skip main navigation</a>. It is not recommended to use an “invisible” text link, like a single space or underscore. That technique relies on the link’s title to provide accessibility, and not all screen readers provide the link title to the user.
|Explicitly State Information||Do not use indentation, color or font style alone to convey meaning.|