Tag Archives: universal design

Best Practices in WordPress Accessibility Design

Accessibility word cloud

Web accessibility word cloud / itjil / CC BY 2.0

Why:

Designing for accessibility means that you end up with a site that is clear and helpful to everyone.

More information on Universal Design in higher education

Colors:

  • Background images or colors should be subtle.
  • Make sure that colors used are high contrast. Try to use light backgrounds with dark fonts. Don’t use red and green together.
  • Try testing your site here: http://graybit.com/main.php

Web Style Guide: Visual Design

Layout:

  • Allow ample white space
  • Use sans-serif fonts

Improving Accessibility Through Typography
Font Accessibility

Content Organization and Markup:

Images:

image alt text

Include short descriptive alt text for all images! This is the most common accessibility error. Use the description field for complex pictures or charts.

WebAIM has a guide for appropriate uses of alternative text.

 

Video:

Closed caption logoIf you are embedding or linking to video, be sure that it is captioned and it can be controlled through keyboard commands. YouTube can be controlled by keyboard commands. Median cannot yet (other than the space bar to play/pause), but captions and keyboard commands are a requested feature for future updates.

To learn more: YouTube captioning

YouTube keyboard accessibility

 

Formatting:

screenshot of formatting buttons in wordpress

  • Use the visual editor as much as possible to organize your content. The BOLD, ITALICS, LIST, UNDERLINE and BLOCKQUOTE buttons will take care of making sure that the html is accessible to screen readers.
  • Similarly, instead of messing around with font size and style to create emphasis, use the built in styles: HEADING 1, HEADING 2, HEADING 3, etc. The theme you have chosen will take care of the font choice and size, but using these buttons will make sure that your content is properly marked up for screen readers.
  • Always use heading structures to aid in navigation
  • Structure, color, font sizes should be consistent across pages

Best Practices for Accessible Content

 

Links:

  • Your link names should be as descriptive as possible in case they are read out of context. “IMDB list of documentaries released in 2010 (opens in new window)” is better than “Click Here”.
  • Note when when you’re directing to a non-html resource: “Survey results (PDF)”

Accessible Links

 

PDFs, Word documents, and PowerPoints:

  • You can upload these to WordPress, and then link to them from your blog post. When a viewer clicks on the link, they will most likely download the file (though some browsers will open PDFs within the browser window). Make sure that the documents themselves are accessible!

PDF accessibility
Microsoft Word accessibility
PowerPoint accessibility

 

References:

Best Practices in WebCT Accessibility Design

Why:

A course site that is designed to be accessible for students with disabilities is a course site that is clear and helpful for all students.

More information on Universal Design in higher education

Colors:

  • Background images or colors should be subtle. It needs to be easy to distinguish folders and links.
  • (to adjust, Build -> Course Content -> Page Options -> Customize Page Display)

  • Make sure that colors used are high contrast. Try to use light backgrounds with dark fonts. Don’t use red and green together.
  • (to adjust, Build -> Manage Course -> Colors)

To learn more: Video tutorial on course colors from California State University Chico

Naming:

  • Your link names should be as descriptive as possible in case they are read out of context. “IMDB list of documentaries released in 2010 (opens in new window)” is better than “Click Here”.

  • WebCT turns file names into links. If your links are not descriptive, go to the gray box next to them -> Customize link, and add a custom title. It is also useful to have a brief description, and a description of the file type.

To learn more: Video tutorial on content links from California State University Chico

Navigation:

  • Have an overall plan for how to organize your content. Either group it by unit (the folder “Stuttering” contains all web links, discussion board topics, assignments, etc. that pertain to that topic), or group like content together (the folder Assignments contains links to all assignments for all topics).

  • Keep navigation consistent across pages. If in the first unit you have Assignments and Readings organized into separate folders, continue that practice throughout the site.

  • Delete unused tools from Course Menu.
  • (Build -> Manage Course -> Tools -> uncheck tools you’re not using)

  • If content is accessible in other ways remove the tools from student view of the menu. If your class is organized so that there are web links or media library images within a folder or unit, then those tools don’t need to be visible in the Student View of the Course Menu.
  • (Build -> Manage Course -> Course Menu -> click hide next to each tool you want to hide.)

To learn more: Video tutorial on course navigation from California State University Chico

Images:

To learn more: Video tutorial on labeling images from California State University Chico

Tools:

  • Do not use the chat tool within WebCT, as it is inaccessible to screen reading software.

  • Assessments should include extra time for the students who have given you an accommodation letter from the Disability Services Office.

  • Multiple choice assessments that have True/False or “all of the above” answers should not have the answer order randomized. Standard practice is that “false” and “all of the above” appear as the last option.

Video

  • If you are embedding or linking to video, be sure that it is captioned and it can be controlled through keyboard commands. YouTube can be controlled by keyboard commands. Median cannot yet (other than the space bar to play/pause), but captions and keyboard commands are a requested feature for future updates.

To learn more: YouTube captioning

YouTube keyboard accessibility

References:

Add captions to your video

You can add captions to your video though YouTube and have the option of exporting the captions for use elsewhere.

Captions enhance the accessibility of videos, and allows us, as described by Google, to “make the world’s information universally accessible and useful.”

The following video demonstrates how captions and subtitles work in YouTube: