Accessibility Requirements

Basic guidelines drawn from W3C and Section 508

ReferencesSection 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]

ADA Compliance Checkpoints
CHECKPOINT SOLUTION
Images

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 Use descriptive text for hypertext links. Example: link words Office of Marketing and Communications instead of “Click Here” or spelling out URL 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 linksNote: 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 Title box. See Drupal instructions for creating links. 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.  Additional Note: after linking to documents, place a single asterisk* right after.  A link to required document plugins is referenced in the footer.
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.

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.  See example.
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 Create videos & manage your channel. YouTube has a built in closed caption feature that allows hearing impaired individuals to read words being spoken in the video.

  1. Login to your YouTube account
  2. Select Video Manager
  3. Click the arrow next to Edit menu
  4. Select Subtitles/CC
  5. Select English from menu (pop-up window for Set video language)
  6. Also, check box next to Default for new uploads
  7. Click Set language (button)

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.
iFrames When using an IFrame to read in content from another site, insert link to web page into your <iframe></iframe> tags plus include title attribute of page or document being linked to. Also, set scrolling to "auto" and use realtive sizes for height and width. Example: <iframe frameborder="0" height="100% width="100%" title="Revised Development Plan" src="http://www.newwebpage.org/documentb" scrolling="auto">