Styling Blogs for Accessibility

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;}

This entry was posted in Accessibility, Blogs. Bookmark the permalink.

Leave a Reply