Accessibility Requirements

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]

Resources

Please note: all documents posted to a YSU affiliated public website (i.e., .pdf, .docx, ,xslx, .pptx) need to be ADA compliant.  If you are unsure if they are ADA compliant or not, here are some options:

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). 
Hypertext Links Use descriptive text for hypertext links. Example: link words Office of Marketing and Communications instead of “Click Here” or spelling out URL /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 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
  1. Highlight all the content you would like to see in your webpage
  2. Click "edit" on an existing page, or "create generic page" from the content menu
  3. Click within the "body" field of ckeditor, there is a clipboard icon with a "W"
  4. Clicking this icon will paste your document content while keeping formatting consistent
Tables Tables with information require the following: i) caption (i.e., which means a title) and ii) table header (i.e., labels for columns) in order to be compliant. A summary (i.e., brief description of data) is only required for complex tables (i.e., a table with both column and row headers where an explanation is helpful).  See Example 2: Approach 4 from the W3C. Also, providing a summary for tables with many column or row headers is helpful as well. 
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. No page should have more than on <h1> tag.  See examples
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">