Basic guidelines drawn from W3C and Section 508
References: Section 508 Checklist from WebAIM and Electronic and Information Technology (EIT) Accessibility Compliance
Accessibility Checker: use the WAVE Web Accessibility Tool to look for errors and alerts in main content area. [errors red and alerts are yellow coded]
Use ALT tag description for graphics and photographs. Images with content information require ordering words/terms in the same order that a visual person would use to interact with graphic). See Drupal instructions for uploading images.
|Hypertext Links||Example: Office of Marketing and Communications instead of “Click Here” or http://www.ysu.edu/content/office-marketing-and-communications/marketing/web-team/accessibility-requirements. An exception to a spelled out link would be a short base address that is usually recited – www.ysu.edu. See Drupal instructions for creating links. Note: avoid using click here for links. Instead use title of page as wording for link (i.e., "click here" does not provide descriptive information to a screen reader).|
|Linking to Documents (i.e., PDFs, DOCs, XLS, etc.)||Use the link icon in toolbar, select the Advanced tab, and enter Link to document type (i.e., PDF, Word, etc.) file in the Advisory Content Type box. Note: documents need to be ADA compliant in order to link to. If a document is not ADA compliant, contact the department or organization (i.e., for external documents) to request an accessible one or a link to web page equivalent, before linking to it. If creating documents to place on your site, either attend an Accessibility Overview training session or consult Desktop Tools for ADA accessibility. Alternatively: convert locally produced Word documents to a web page equivalent by using Word icon on Rich Text editor toolbar to paste in content.|
|Converting Word Documents to Web Page Equivalent||
Here are instructions for converting a Word .doc to a web page:
Note: if Word document contains image files, these will require uploading to web page. If linking to a document for printing purposes, from an accessible web page, add printable version graphic at top of web page, and link this to PDF.
|Tables||Tables with information require the following: i) caption (i.e., which means a title), ii) summary (i.e., brief description of data), and iii) table header (i.e., labels for columns) in order to be compliant. Here are instructions for creating an accessible table using Drupal. Note: use a percentage width setting for responsive design to support various device screens.|
|Page Headings||When adding headings/subheadings to a web page, implement them in sequential order (i.e., Heading 2, Heading 3, etc.) beginning with Heading 2 <h2>. Note: page title has a Heading 1 <h1> setting be default.|
|Text and Animated Images||Avoid blinking text or images. See Seizure Disorders for more information.|
|Videos||Use YouTube for uploading video and audio files that will be placed on your website. See Creating a YouTube Video. YouTube has a built in closed caption feature that allows hearing impaired individuals to read words being spoken in the video. Use YouTube for uploading video and audio files that will be placed on your website. See Creating a YouTube Video. YouTube has a built in closed caption feature that allows hearing impaired individuals to read words being spoken in the video. Instructions for embedding YouTube video into web page -
Embed YouTube code into page in Source view. In Source view add a title attribute within the <iframe> tag. Example: <iframe frameborder="0" height="315" title=”President Tressel state of the university address” src=” https://www.youtube.com/embed/J5T95g3P_GA" frameborder="0" allowfullscreen></iframe>
|Contrast||Create a definable contrast between text and background color. Use WAVE tool Contrast feature to check page.|
- When using an IFrame to read in content from another site, insert link to web page into your <iframe></iframe> tags. Also, include link above iFrame. For example: View the content of this inline frame within your browser.