October 2011 Archives

Styling Blogs for Accessibility

| | Comments (0)

The content generated by the Blogs at Penn State is generally accessible, but you can adjust the CSS of your blog to enhance accessibility.

Where to adjust CSS

The CSS of any blog can be adjusted in the Templates.

  1. Log in your blog at http://blogs.psu.edu.
  2. Under the Design menus, select Templates.
  3. Click the link for Stylesheet - Main corresponding to "styles.css".
  4. The page will typically include "@import" statements. You can add additional specifications beneath these statements.
  5. Click Save & Publish when you have added additional statements.

CSS for Header Tags

If you develop portfolio pages or long blog entries, you may want to include subheaders. Although the HTML Editor does allow you to increase sizes, it is not really "standards compliant."

If you are interested in generating properly nested headers, you should know that the blog title is an H1 and the title of each entry or blog page is an H2. So I've been using H3 and H4 for sub-headers within an entry. Unfortunately the CSS files for most themes do not display distinct H3/H4 at all.

/* Additional Classes Outside Theme */
.asset-body h3
{font-weight: bold;
font-size: 1.3 em}

.asset-body h4
{font-weight: bold;}

Condensing Accessibility Information for Faculty

| | Comments (1)

An issue I and others have been working on is figuring out how to explain accessibility. What is it? What do instructors have to do? Can it be under 15 min? No problem...

The Obvious Challenges

Obviously this is a challenge for several reasons. One is that most existing material is targeted for Webmasters. This is somewhat helpful for the instructors who have brushed up on their HTML, but not so great for those who primarily work with Word, PowerPoint (or maybe GoogleDocs and Blogs).

The other vexing problem is that accessibility implementation looks different on every tool. We can say "Use semantic headings", but in HTML that means use H1, H2, H3, while in Word and ANGEL, it means use Heading 1, Heading 2 Styles.

Same Questions, Different Paths

What I finally did realize was that though the tools were different, the issues are the same. So, the trick to figuring accessibility for any new tool is to answer a core set of questions, such as the one below.

Accessibility Questions to Answer

Accessibility implementation techniques vary from tool to tool, but they all revolve around these basic questions.

  1. Is the software usable to someone on a screen reader by default?
  2. If I include an image or animation, can I add an “ALT tag” or otherwise describe the image?
  3. Are key landmarks (section headers, table rows, form fields) labeled for screenreaders?
  4. If I include a video, is it captioned? Can it be captioned in this platform?
  5. If I include an audio file, is there a text transcription?
  6. Is the default text legible in terms of color/brightness contrast, font and size?
  7. If I can change the fonts/colors, is the result legible?
  8. If I include a link, does the link tell you exactly where it's going?
    Hint: Here “is not a clear destination.
  9. Is the product interface simple enough to be understood by all users?
  10. Do I have a Plan B in place for a student who may need accommodation on a complex technology?

This is accessibility boiled down to a few simple questions (which is the underlying principle of WCAG 2.0). What instructors and webmasters have to follow up with are the implementation techniques for each tool, and that is where the research complexity comes in.

For instructors though, these questions and links to some key tools may provide a route to quick answers.