Accessible Blogs

Melissa McAvoy
January 16, 2007 

Calendars are a useful and attractive way to visually organize events on a webpage or blog. However, calendars are often inaccessible due to their reliance on visual rather than verbal cues. An accessible calendar is created using several techniques. Here we will discuss the most important technique of using table headers. We have also included some valuable
code for quickly adding an accessible calendar to your site.

Table headers refer to any information in a table cell that is used to organize and identify the data. Table headers are indicated by the <th> tag and must be identified using the “id” attribute. For example:

<th id=”month”>January</th>

Data cells are indicated by the <td> tag and must be matched with their headers using either the “scope” or the “headers” attribute. An example of a table header that uses the “scope” attribute is below. In this example, the “scope” attribute tells the user-agent that “Sunday” refers to all of the data in the column below the word “Sunday”. You can also use “scope” with headers that span multiple rows such as “January” in our example.

<th id=”sunday” scope=”col”>Sunday</th>

Note: The headers attribute is used when a header cell is not in alignment with its corresponding row or column. For how to use the “headers” attribute, please refer to W3C Recommendation - 11 Tables

If table headers are long, the information in them can be abbreviated. Say you wanted to display the days of the week by using only the first three letters. You can specify this abbreviation by using the “abbr” attribute. Typically, the information in the “abbr” attribute should be a shortened but meaningful representation of the full text. For our example, we reverse this effect. Now, the visual browsers will display the abbreviation and the auditory user-agents have the option of reading the full text. For example:

<th id=”sun” abbr=”Sunday”>Sun</th>

Note:Using a screen reader such as JAWS 7.0, a user may opt to read a table in standard mode. This means that the header might be read only as its abbreviation which is why the abbreviation should be a meaningful one. Using only the first letter would be meaningless because Saturday and Sunday both begin with “S”.

The <tr> tag means “table row”. A standard calendar would look something like this.

In order to keep these posts as accessible and usable to every user, we have removed any long batches of code.  Download the code to the Accessible Calendar using the links below.

Accessible Calendar - HTML only version

We will post the PHP/HTML/CSS version of the code here shortly.

By Melissa McAvoy, CATEA
January 11, 2007

Almost overnight, blogging has evolved into a world-wide phenomenon. According to CNN.com, the total number of blogs on the internet will rise to around 100 million by this year. The appeal of blogging lies in the ability of authors to easily share thoughts and information with a wide audience. But, how easily can users with disabilities access blogs and how can authors make it even easier?

CNN.com The Briefing Room - The year in numbers: 2007

What is a Blog?

A blog, or “web log”, is a web site that contains online personal or professional journal-style entries posted by one or more authors. Posts are generally arranged in reverse-chronological order with the most recent post at the top. Users of blogs are almost never required to have knowledge of a programming language which makes blogging extremely simple. Some blogging sites, however, give the user the ability to modify the code in their posts and even create custom design templates.

Are there Accessible Blogs?

There are many blogs out there that claim to be fairly accessible. The American Federation for the Blind (AFB) conducted a recent accessibility study on two popular blogging services, Blogger and Bloglines, and several popular blogs including Hacking Netflix, Fastlane General Motors Blog, Micropersuasion, and Blogspotting - Business Week Online. At the conclusion of the study, AFB found that all of the sites and services contained atleast some accessibility issues. The results of their study can be found at AFB - Is Blogging Accessible to People with Vision Loss?.

Fortunately, developers who want to host their own blogs are in luck. The following is a list of open-source blog software (Content Management Software or CMS) that will allow you to create your own accessible blog:

Note: CATEA is not responsible for the content or security of these websites. The accessibility of these sites should be examined by the developer before implementation.

Open-Source Blogging Software

Apache Roller

Language: JAVA

bBlog

Language: PHP/MySQL

DasBlog

Language: ASP.NET

Dotclear

Language: PHP/MySQL
French Site

Drupal

Language: PHP/MySQL
Comes with Accessible Themes
Drupal’s Accessibility Statement

Geeklog

Language: PHP/MySQL

Greymatter

Language: Perl 5, Claims no language experience required

Plone

Language: Python
Danish Company (English Site)
Accessibility award for Danish Plone site

WordPress

Language: PHP/MySQL

Accessible WordPress Themes
The following themes for WordPress claim to be accessible.

WordPress.org - Themes

SeaBeast by Mike Cherim

Beat Blog by Mike Cherim

Corporate and Professional WordPress Blogging Templates by etonDigital

By Melissa McAvoy, CATEA
January 12, 2007
Last Update: February 6, 2008

The following is a quick list to make sure that your blog posts and comments measure up when it comes to accessibility.

1. Use an accessible blogging service that will allow you to directly edit your posts and comments in HTML/XHTML.

Note: Using a Strict XHTML Doctype is recommended to achieve maximum browser compatibility. In addition, transitional doctypes allow for coding mistakes that can make a site difficult for screen readers to use. For more information on screen readers, please visit the Assistive Technology Wiki (ATWiki) - Screen Reading page.

2. Always include meaningful alternative text for images and any other non-text content.

i.e. “graphical representations of text (including symbols), animations (e.g., animated GIFs), ascii art, scripts, images used as list bullets, spacers, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video”

EX #1

alt=“yellow smiley face”

EX #2

alt=“ASCII art tank”

reference: http://www.ascii-art.de/ascii/t/tank.txt

NOTE

If you would like to include ASCII art, it is better to create an image of the ASCII art and provide alternative text. Otherwise, provide a link to jump over it. Users of screen readers often have to listen to every character in ASCII art which can be time consuming, confusing, and annoying.

EX #3

Providing a transcript for a video or audio clip

3. Don’t rely on color alone to indicate things such as emphasis or links.

Users who are colorblind or low vision may not be able to tell the difference between colors. Therefore, always include another indicator such as an underline for links, bolding or italics for emphasis.

EX #1

reference: http://gracefulflavor.net/

4. Ensure good contrast between the foreground and the background.

Users may not be able to read your blog if you choose poorly contrasting text or images.

EX #1

An example of a post that may be difficult to see.

Wow guys, look at this

EX#2

Improved post without changing the character much.

Wow guys, look at this

EX #3

The best forms of contrast are black-on-white or black-on-light-yellow. White-on-black text tends to recede into the background making the font look dimmer and smaller than it actually is. If you use a white-on-black color scheme, increase the size of your font.

Wow guys, look at this

Wow guys, look at this

5. Avoid graphics or video which may cause the screen to flicker.

Flickering screens can cause seizures. If you are concerned that a video or graphic is flickering, include a link to it instead of embedding it directly on the page and provide a warning that the content may flicker or cause seizures.

EX #1

The link below does not actual go to a video.
Video of last Friday’s concert (caution: video contains flickering)

6. Use clear and simple language

The web has quickly spread its own sort of language, including a large set of acronyms, that many users may not understand. Avoid using uncommon terms or acronyms. Difficult language should also be avoided unless the blog topic requires it. Technical blogs may require a greater vocabulary than other blogs.

7. Find a blog service that allows the use of cascading style sheets (CSS) to control layout

Some users may need to use their own style sheets or may remove style sheets altogether. Many blogs add style to text through the use of deprecated tags such as <font> which cannot be removed by the user’s browser. It is possible to by-pass this by directly editing the code.

EX #1

Poorly executed code.

<font color=“green”><b>Wow, did you see that!!</b></font>

EX #2

Better.

<span style= “color: green; font-weight: bold;”>Wow, did you see that!!</span>

8. Use short and descriptive link text.

Link text lets users know where they are going and what they are going to find. Users of screen readers such as JAWS may be able to see links in a list rather than in context on the page, therefore, it is important to use descriptive link text that lets the user know:

a. Is the link internal or external
b. What information can be found by following the link
c. Does the link open in a new window

If a link doesn’t say or imply that they are leaving the current site, chances are that they will assume that the link is internal.

EX #1

The link below does not actually go to a video.
Check out this video of the concert on MySpace.com (new window)

Blogs, Wikis and Accessibility: a 4-part fee based series
All at 1 PM Eastern-US (January 9, 16, 23, 30)

Presenters: Dick Banks (EASI), Norm Coombs (EASI) and Special Guest Robert Todd (CATEA)

Part 1 Jan. 9 at 1 PM: What Are Blogs Anyhow?

Blogs have been popular with Geeks and with political advocates for some time. Now they have been finding their way into education and business. This presentation will explain Blogs and describe how to find them; how to join them and discuss their value in education.

Part 2 Jan. 16 at 1 PM: How Can I make Blogs and Make Them Accessible?

This will look at how to make your own Blog. You can do it on your own server with special blogging software or you can be hosted on a Blogging site. This latter feature means you do not even have to have your own server. Some Blogging software and some public sites are more accessible than others. We will make a point of covering accessibility issues.

Part 3 Jan. 23 at 1 PM What is a Wiki and What Is It Used For?

Wikis have been popular with Geeks and with people wanting to do colaborative work on the Web. Wikopedia, the collaborative online encyclopedia is well known. This presentation will explain wikis and describe how to find them; how to join them and discuss their value in education.

Part 4 Jan. 30 at 1 PM: How Can I make a Wiki and Make It Accessible?

This will look at how to make your own Wiki. You can do it on your own server with special Wiki software or you can be hosted on a WIKI site. This latter feature means you do not even have to have your own server. Some Wiki software and some public sites are more accessible than others. We will make a point of covering accessibility issues.

Register for the fee-based Blog/Wiki Series ($150) 

Thank you to everyone who participated in Part 1 of our Accessible Blogs Seminar.  Please take a look at this sample blog and leave some comments below on what you think about blogging and the accessibility of this blog.  For example, note any potential problems that you have or might encounter with blog sites such as this one.  If you have a few extra minutes, please set up a FREE blog through the WordPress.com service and let us know about your experience with that as well.

 WordPress.com - Sign Up

This blog is a collaboration between Georgia Tech’s Center for Assistive Technology and Environmental Access (CATEA) and Equal Access to Software and Information (EASI). For more information on these two organizations, please visit:

CATEA - http://catea.gatech.edu

EASI - http://www.rit.edu/easi