General Web Accessibility and Tools

General Web Accessibility Resources

Overall Evaluation and Education

  • WebAIM (Web Accessibility in Mind): The most comprehensive resource on the web for both learning about accessibility and evaluating your website or product.
  • Web Content Accessibility Guidelines 2.0 (WCAG 2.0):The technical standards for web accessibility. UC uses these standards to determine compliance with the official UC Information Technology Accessibility Policy. WebAIM provides a helpful checklist for implementing these standards.
  • Section 508 of the United States Rehabilitation Act: Section 508 is an amendment to the the Rehabilitation Act, implemented in 1998. Section 508 outlines the requirements for ensuring that all federal agencies make their electronic and information technology accessible to people with disabilities. Once again, WebAIM has a helpful checklist for understanding Section 508.

Tools for Running Scans and Tests

  • Juicy Studio toolbar: A Firefox toolbar from Juicy Studio that goes beyond common accessibility issues. This toolbar helps identify Accessible Rich Internet Applications (ARIA) roles (important for dynamic content and advanced user controls), examines data tables, and evaluates color contrast (for low-vision users).
  • Paciello Group toolbar for Internet Explorer: A toolbar specifically built to test for web accessibility in IE.
  • HTML CodeSniffer: Client-side script that checks HTML source code and detects violations of a defined coding standard.
  • Chrome Accessibility Developer Tools: This extension will add an Accessibility audit, and an Accessibility sidebar pane in the Elements tab, to the native Chrome Developer Tools.
  • AInspector: Web accessibility evaluation tool for Firefox based on WCAG 2.0 and ARIA.
  • aXe: Deque System's aXe (The Accessibility Engine) open source library is a lightweight JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice.
  • Tenon.io: Automated accessibility testing coverage for a wide array of accessibility best practices.
  • Image Alt Tag Checker: Analyze all img alt attributes from your page to spot missing tags and to find out where to optimize alt tags for SEO.

Color Contrast Tools

  • Juicy Studio Color Contrast Analyser: To use this tool, add your website's background color and foreground color to the boxes provided. The analyser will calculate your site's overall contrast ratio, which will allow you to determine if your site passes the WCAG 2.0 requirements for visual presentation of text.
  • Paciello Group Contrast Analyser: This tool is a native app for Windows and Mac that will evaluate the color contrast of your website, and will also tell you if your site meets the WCAG 2.0 standards for color contrast.
  • ColorZilla: The ColorZilla browser extension is available for Firefox and Chrome, and includes an eyedropper, color picker, and color analyzer. This tool also includes a gradient generator.
  • Colorfilter: This tool is still in development. If you only use one filter, use the grayscale filter which will not only point out potential problem areas, but will also let you see more clearly which areas the filter is unable to process.  
  • Webaim Contrast Checker: Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.

How To's for Making Your Website Accessible

Making Your Documents Accessible: PDFs, Word, Excel, PowerPoint

Color Contrast

  1. The contrast ratio is calculated so that people who have color blindness or moderately low vision can adequately distinguish between text and the background.
  2. Make sure that all users can read text that is presented over a background color.
    1. If the background is a solid color (or all black or all white) then the relative color of the text can be maintained by making sure that each of the text letters have 4.5:1 contrast ratio with the background. This means if you have white text letters the background should be a dark solid color.
    2. Large text and images of large-scale text should have a contrast ratio of at least 3:1.
  3. Make sure that colors are not your only method of conveying important information.
Example: Color Contrast Example - button

Correct use of heading tags: (h1, h2, h3, h4, h5, h6, p)

  1. Good heading structure helps people with no or low eyesight to understand how the document is organized. It is also a way the screen reader users can move more quickly to find the content of interest.
  2. When creating headings within the content area of your document, use the dropdown Paragraph tab to select the desired header.
OU heading tab
  1. Headings should be sequential. This means that a heading 1 should be followed by a heading 2, and a heading 2 should be followed by heading 3 and so forth.
  2. DO NOT skipping a heading level.
  3. If there are h3’s on your page, there should be h2’s and a h1 as well. Skipping causes confusion for screen readers.
  4. Use actual heading tags (h1 - h6) for all content headings. b, strong, em and i look exactly the same in screen readers.
  5. Headings must be used to title sections of information. Do not use blank headings to create spacing or padding between text and paragraphs.
  6. Correct example of the use of header tags:

    Properly nested headings.

    Incorrect use of the header tags:

    Incorrect use of headings

  •  <p>&nbsp;</p>
  • <br/> <br/>

Images

Writing Alt Text:

  1. The alt text on an image is a required bit of text, stating the purpose of the tag.
  2. Length of the alt text can be a short phase or sentence. As long as the description states the purpose of the image.
  3. Writing a good alt text for an image starts with the following question; "How would you describe the image to someone over the phone?"
  4. The alt text description should help you to decide what information or function the image has.
  5. Prioritize information in the text alternative. The most important information at the beginning.
  6. Adding punctuation within the alt text makes the information easier to understand.
  7. When you write an alt text description. Avoid using the words" image", "icon" or "picture". Also avoid using general or vague terms, be specific.
  8. Difference between a title and alt text.
    • Alt text is used to inform the user or function the image might have.
    • Title is used for link to describe the purpose of the link.

Different types of images:

  1. Informative images convey a simple concept or information that can be expressed in a short phase or sentence.
  2. Decorative images are images don't add information to the content of a page.
  3. Functional images are used to initiate actions rather than to covey information.
    • For example: image of a printer, or magnifying lens.
  4. Images of Text is intended to be read and the alt text must contain the same text as presented in the image
  5. Complex Images are images that contain substantial information, like charts and graphs. With this type of images you would use a two part text alt tag.
    • Part one: short description to identify the image.
    • Part two: is a long description of the essential information conveyed by the image.
  6. Groups of Images are use together to represent one piece of information, only one of the images needs an alt text.

IFrames

  1. When a screen reader user hears the word iframes, it is helpful to know the purpose of the iframe. The best titles for frames are brief and descriptive.
  2. Iframes containing videos, needs to provide a title and caption.
  3. Because many users enlarge the fonts and other page elements to increase visibility and accessibility, you should not disable scrolling for iframes by using scrolling=”no”.
	 
		Example:  <iframe src="ad.html" title="Advertisement" scrolling="auto"> </iframe>
		

Media Captioning, Including Podcasts

  1. Transcripts for recordings of teleconferences and audio podcasts are needed for hearing-impaired audiences.
  2. Audio description of visual content is needed if it conveys important information in video and podcasts.
  3. Captions are transcripts synchronized with the video or audio, including podcasts. Make sure the captions are appropriately synchronized.
  4. Using Kaltura for videos. http://www.uvu.edu/web/maintain/tutorials/kaltura.html
    1. The gadget can be found on the Dashboard by clicking the link in the blue bar on the top of the screen.
    2. Alternatively, on any screen within OU Campus, you can find the gadget in the sidebar with other gadgets by clicking on the plugin icon in the top right corner of the screen, then clicking on “Kaltura Videos” to open the gadget.
    3. Uploading a video:
      • Click on the Dashboard tab at the top of the page in the blue bar. The Kaltura Videos gadget will be displayed.
      • Select the category or web division from the drop down menu.
      • Click on “Upload”. Use the file chooser to browse to the video file on your computer. Once the file is selected, it will begin uploading and display a progress bar. When the upload is complete, the progress bar will turn green.
      • Fill in the title of the video and select the area on campus responsible for the video.
      • Click Submit. After the request is submitted, you will get a message saying that the video will be available for embedding as soon as it is done processing. This is a relatively quick process; longer videos may take more time to finish processing.
    4. Inserting a video on a page:
      • Navigate in OU Campus to the page you want to add the video to.
      • When editing the page, add a video by clicking on the “Insert/edit video” button. A dialog box will appear.
      • Open the Kaltura gadget by clicking the plugin icon in the upper right corner of the screen, then clicking on “Kaltura Videos.”
      • In the Browse tab, use the dropdown box to select the area the video was categorized under. Note that when selecting one of the VP categories, it will display all the videos in that category as well as all the videos in all the areas under that VP.
      • review a video by clicking on that video’s thumbnail. It will be replaced by a small embedded preview.
      • To add the video to the page, select the embed code provided underneath each video, then copy it. In the “Insert/edit” video dialog, click on the Embed Code tab, then paste the code into the text field. Click OK, then Save & Publish the page.
    5. Never allow auto-play on videos.

Using Ordered and Unordered Lists Correctly

  1. Use an unordered list when there is no order of sequence or importance to a list.
  2. Use an order lists when there is a progression or sequence to a list.
  3. Lists should always contain list items.
  4. Lists should never be used for merely indenting or other layout purposes.

Example: Correct use of unordered list:

  • Televisions
  • Desktops
  • Mobile devices
  • Tablet devices

Example: Correct use of ordered list:

  1. Bacon
  2. Eggs
  3. Hash Browns
  4. Orange Juice

Example: Incorrect use of lists:

  1. Bacon
  2. Eggs
    • Boiled
    • Scrambled
    •  
  3. Hash Browns
  4. Orange Juice

Non-distinguishable Links or Links identified only by color.

  1. A non-distinguishable link is generic text that is not identified as a link.
  2. Identify the link in such a way to inform the user and screen reader user that there is a link. Use the title attribute to provide information to describe the purpose of the link.
  3. Don’t underline the text if it is not a link.
  4. More, Click Here and Learn More need a title within the link tag to identify the purpose of the link.
Examples:
  • Department navigation: Explanation of the link: <a title=”Contact Us Web Development Services” href=”/wds/contactus/index.html”>Contact Us</a>
  • Within the content: Explanation of the link: <a href="https://pob.uvu.edu/WSSP/Login.aspx" title=”A form to submit a support ticket on web issues.”>Submit a support ticket</a>

Links

Forms

    Labels
  1. Input fields without accompanying labels can lead to accessibility issues for those who rely on screen readers. If a screen reader comes across an input field without a label it will try to find some accompanying text to use as the label. For text fields and dropdowns the screen reader will use any preceding text and for radio buttons and checkboxes the screen reader will look for any following text.

  2. When using the <label> it must be explicitly connected to a input field, or a text field, or a combo box, or a radio button or a check box through an id.

  3. Example:
    <label for="email">Email address</label>
    <input id="email" name="email" type="text" />
  4. Label on submit button:
    • For form buttons (submit and reset input elements and button elements), no additional accessibility information is required. The value attribute for input <buttons> and the nested text for button elements will be read by screen readers when the button is accessed. These must never be left empty.
      <input type="submit" name="submit" value="Submit Search">
      <input type="reset" name="reset" value="Reset">
  5. Use the title attribute for a hidden input field.
  6. Using placeholder
    • The placeholder text is not accessible. The prompt is lost when the input field is click on. Screen readers users won't know what input is expected.
  7. Using Legend
    • Legend provides a description for a grouping or acts like a heading to identify the group of form fields. (See simple form below)
  8. Using Fieldset
    • Fieldset, groups a set of form fields that are related to each other together. (See simple from below)
    • Single checkboxes or basic radio buttons (such as male/female for gender) make sense from their labels alone do not require fieldset or legend.
  9. Example of a simple form:
    <fieldset>
        <legend>Shipping Address:</legend>
        <div>
        <label for="shipping_name">
          <span class="visuallyhidden">Shipping </span>Name:
        </label>
        <br />
        <input type="text" name="shipping_name" id="shipping_name" />
        </div>
      <div>
        <label for="shipping_street">Street:</label><br />
        <input type="text" name="shipping_street" id="shipping_street" />
      </div>
    </fieldset>
          
    <fieldset>
        <legend>Billing Address:</legend>
        <div>
            <label for="billing_name">
          <span class="visuallyhidden">Billing </span>Name:
        </label><br />
            <input type="text" name="billing_name" id="billing_name" />
        </div>
      <div>
        <label for="billing_street">Street:</label><br />
        <input type="text" name="billing_street" id="billing_street" />
      </div>
    </fieldset>
  10. Using the <fieldset> and <legend> elements work together to tell screen reader users that a group of form fields related to each other.

Evaluating Your Site

  1. http://www.uvu.edu/web/accessibility/evaluating.html
  2. Website in General
    • No flashing content.
    • No light content text on light background.
    • All content must be readable.
    • All videos must be caption.
    • All images must have an alt tag.
    • All links must have a title tag.
    • All headings should be in sequence.
    • All links should be distinguishable.
    • On all assets, the description field must have a description of the image.
    • Use <strong> or <em> tag instead of <b> tag or the <i> tag to emphasis text.
    • When using id's on the page, make sure all id are unique.