How to Keep Your Content Accessible
Any site built off of OpenPublic will meet front-end 508 and accessibility standards out-of-the-box. However, there are a few guidelines to follow when entering content onto your site:
- h1 through h6 headings help provide a hierarchy for the page. h1 is always included by default as the page title. Therefore, all headings should follow a hierarchy of importance starting with the h2 tag.
- MP3s must include text transcripts. You can either provide an HTML page containing the transcript or you can link to a separate text file.
- Videos and podcasts with videos must include closed captions that are synchronized with the video
- In order for screen readers to read an acronym or abbreviation as letters instead of as a word, you will need to use the ACRONYM and ABBR tags. You can find more information on the W3C website.
- Links should be descriptive and understood on their own. For example, avoid using “click here,” “more,” “read more.”
- If you use color in your text to convey information, please ensure that this information is also available without color as well.
- Although most web browsers inform users when a missing plug-in is necessary in order to access content, it is still best to provide a link to the required software, such as Flash, Adobe Acrobat, etc. on the page requiring the plug-in.
- Include a text equivalent, such an alt tag, for any non-text element. A non-text element includes images and image buttons. These alt tags will help those with disabilities to access essential information. Benefits of ALT text include:
- Improve SEO
- Search Engines cannot "see" images. When a description of an image is provided (theoretically using keywords), SEO is improved.
- Provide accessibility to a person who cannot see
- An image is often used to provide further meaning to the content. A user who is blind or has low vision would benefit from understanding an image.
- Describe Image for those with Slower Websites or Images Turned Off
- Decorative images that do not provide meaning to the page. (Such as a horizontal line) Instead of a full description, add: <alt="">
- "Button" images: Do not include "button" in the alt-text, i.e. "alt=Submit Button" (incorrect) -- rather, indicate the action that the button does, i.e. "alt="Submit Form" (correct)
- Logo: There is not a need to describe the company logo, nor is there a need to add "logo" into the alt-text description.
- Improve SEO