Blogs at Penn State (Movable Type)

The Blogs at Penn State system includes some accessibility features, but the following guidelines can help to further enhance accessibility.

Synopsis

  1. Blogs with just text are normally accessible. Any issues that a user encounters can be reported to blogs@psu.edu.

  2. If you upload an image into the blog, make sure you give it a descriptive Name in the image upload window. This will become the ALT tag used by screen readers, and that is displayed when an image fails to load.

  3. Other files that are uploaded to the Blogs, such as PDFs, podcasts or PowerPoint files, should be made as accessible as possible if they are used in a course.

Add Image ALT Tag

Just as with other websites, images in blogs need to include the alt tag in order so that screen readers can read the text as a replacement for the images.

During Upload

To add an ALT tag when uploading image.

  1. While creating or editing a blog entry, click the Insert Image button in the formatting toolbar.
  2. Select an image to upload.
  3. After uploading the image, enter a short description in the Name field; this will become the image's ALT tag.
  4. Configure any additional attributes of the image such as alignment and thumbnail size, then click Finish.

After the Image is Uploaded

This procedure allows you to add an ALT tag to an image after a blog entry has been posted without editing the HTML code.

  1. Log in to the blog you need edit.
  2. Select the Manage menu then Assets. A list of images and files uploaded into your blog appears.
  3. Click the image you wish to add an ALT tag to.
  4. Change the LABEL field from the file name to an appropriate ALT tag then click Save Changes.
    Note:
    This new ALT tag only applies to new blog entries. Images on older blog entries would need to have their ALT tags manually adjusted.

Adjust ALT tag in Blog Entry

  1. Select the Manage menu then Entries. A list of blog entries you have posted appears in reverse chronological order.
  2. Click the link for the entry with an image.
  3. If you have adjusted the ALT tag using the Manage Assests procedure described above, you can re-upload the image. The new ALT tag will be inserted.
  4. Save the blog entry to republish.

Adjust ALT tag in Blog Entry (HTML method)

This method requires access to the HTML code, but allows the most control.

  1. Select the Manage menu then Entries. A list of blog entries you have posted appears in reverse chronological order.
  2. Click the link for the entry with an image.
  3. Click the HTML Mode (<A>) button in the editor to view the HTML code.
  4. Search for any text beginning with "<img alt=". This IMG tag represents the beginning of the embedded image code and the content in quotes after alt= is the ALT text.
  5. Change content after alt=" from the file name to an appropriate description.
    Note: If you do not see an ALT tag, you can insert alt="" and put the ALT text between the quotes.
  6. Save your blog entry to republish.

Top of Page

Student Blogs Entries

Depending on their situation, some users may not be able to fully interact with the system to create and write blog entries.

If your course requires posting entries to a blog and a student reports a problem, consider alternates such as:

  • Asking students to post comments instead of an actual blog entry
  • Allow students to forward entries as e-mail for instructors to post
  • Allow students to write blog entries in an alternative enviroment

Top of Page

Working with HTML Source and CSS Templates

Although the output of the Blogs at Penn State is generally accessible, there are always improvements that can be made. If you are comfortable using the HTML source view and CSS, consider these options:

  1. Paragraph breaks are coded <br /> when entered in the WYSIWYG editor, but should be replaced with true P tags in the source view, so that screen reader users can jump between paragraphs.
  2. Use the H2 tag on entry titles, and the H3 tag on section headers within a long blog entry. Specifying headers allows screen reader users to jump through the sections of a page. The easiest way is to do this in the HTML source view.
  3. If needed, you can modify the default style sheet to make H3 more distinct by default. See http://blogger.psu.edu/node/368 for details.

See support documentation at the Blogs at Penn State for information on how to access style sheets or templates.

Top of Page

Accessible Blogs Quickstart Guide

Download the "Creating Accessible Blogs" Quickstart Guide (.docx).

Top of Page