Forest Blog and Accessibility

In attempting to make Forest Blog accessible and to comply with level Double-A of the W3C Web Content Accessibility Guidelines 1.0 I found that none of the links which caused a new window to open showed any warning that this would happen - a clear checkpoint 10.1 failure!

"...do not cause pop-ups or other windows to appear and do not change the current window without informing the user."

I felt the best way to achieve compliance was to add a 'new window' background image and an href title attribute containing the text "link opens in a new window" to all the links that open in a new window.

This requred ammending my earlier XHTML 1.0 Strict validation modification and adding a couple of new styles to the CSS file.

To add the text "link opens in a new window" to the title attribute of the link, I changed the code I'd ammended in the file: Includes/Tiny/themes/advanced/jscripts/link.js after line 65 from:

// added
if (target == '_blank'){
target = '';
if(style_class == ''){
style_class = 'external';
}
else {
style_class = 'external ' + style_class;
}
}
// end added

To:

// added
if (target == '_blank'){
target = '';
if(style_class == ''){
style_class = 'external';
}
else {
style_class = 'external ' + style_class;
}
if(title == ''){
title = "link opens in a new window";
}
else {
title = title + " (link opens in a new window)";
}
}
// end added

This appends the title attribute with the text " (link opens in a new window)" if a title attribute has been specified or, it it hasn't, it uses simply "link opens in a new window"

Next, I created a couple of 'new window' images to indicate visually that the link was about to open a new window - one for the normal a:link state new window link indicator image and another for the a:hover, a:focus and a:active states: new window link on hover indicator image

To display these images on the page, I added additional styles to my CSS file:

/* content internal link styling */
#content a{
color:#728C40;
text-decoration:underline;
}
#content a:hover, #content a:focus, #content a:active{
color:#4F5F34;
text-decoration:none;
}
/* content external link styling */
#content a.external{
padding-right:18px;
background: url(Icons/content-new-window.gif) 100% 60% no-repeat;
}
#content a.external:hover, #content a.external:focus, #content a.external:active{
background: url(Icons/content-new-window-hover.gif) 100% 60% no-repeat;
}

I then created additional image pairs for the sidebar, the footer and the sidebar content areas and added the relevant styles to my CSS file.

/* subcontent menus internal link styling */
#subcontent ul li a{
width:150px;
padding:5px 0px 0px 5px;
display:block;
background-image:url(Icons/Icon-Submenu.gif);
background-position:145px;
background-repeat:no-repeat;
color:#776655;
text-decoration:underline;
}
#subcontent ul li a:hover, #subcontent ul li a:focus, #subcontent ul li a:active{
background-image:url(Icons/Icon-Submenu-Hover.gif);
text-decoration:none;
}
/* subcontent menus external link styling */
#subcontent ul li a.external{
width:150px;
padding:5px 0px 0px 5px;
display:block;
background: url(Icons/subcontent-new-window.gif) 100% 60% no-repeat;
color:#776655;
text-decoration:underline;
}
#subcontent ul li a.external:hover, #subcontent ul li a.external:focus, #subcontent ul li a.external:active{
background-image:url(Icons/subcontent-new-window-hover.gif);
text-decoration:none;
}

/* footer internal link styling */
#footer a{
/* style footer links */
color:#4F5F34;
text-decoration:underline;
}
#footer a:hover, #footer a:focus, #footer a:active{
color:#4F5F34;
text-decoration:none;
}
/* footer internal link styling */
#footer a{
color:#4F5F34;
text-decoration:underline;
}
#footer a:hover, #footer a:focus, #footer a:active{
color:#4F5F34;
text-decoration:none;
}
/* footer external link styling */
#footer a.external{
color:#4F5F34;
text-decoration:underline;
padding-right:18px;
background: url(Icons/footer-new-window.gif) 100% 60% no-repeat;
}
#footer a.external:hover, #footer a.external:focus, #footer a.external:active{
color:#4F5F34;
text-decoration:none;
background: url(Icons/footer-new-window-hover.gif) 100% 60% no-repeat;
}

/* sidebar content (paragraphs only!) internal link styling */
#subcontent p a{
color:#776655;
text-decoration:underline;
}
#subcontent p a:hover, #subcontent p a:focus, #subcontent p a:active{
text-decoration:none;
}
/* sidebar content (paragraphs only!) external link styling */
#subcontent p a.external{
padding-right:18px;
background: url(Icons/sidebar-new-window.gif) 100% 60% no-repeat;
color:#776655;
text-decoration:underline;
}
#subcontent p a.external:hover, #subcontent p a.external:focus, #subcontent p a.external:active{
text-decoration:none;
}

The final stage was to do a sitewide find-and-replace, replacing rel='external' with class='external' and rel="external" with class="external" so that the links pick up their new styles and to add an href title attribute containing the text "link opens in a new window" to all these links!

After making these modifications, the blog is now more accessible and it does now comply with level Double-A of the W3C Web Content Accessibility Guidelines 1.0.

I used this site as my core website to support my application for membership of The Guild of Accessible Web Designers (GAWDS) and was accepted ;-)


Update 1

After enabling comments on the site, I found that the blog didn't comply with WCAG Checkpoint 13.1, Rule 13.1.2

Clearly identify the target of each link.
Rule: 13.1.2 - All Anchor elements are required not to use the same link text to refer to different resources.

It was the (Comments) links at the end of each set of article details that were causing this as all the links had the same link text but were pointing to different targets.

Looking up the HTML Techniques for Link text, it says "If two or more links refer to different targets but share the same link text, distinguish the links by specifying a different value for the "title" attribute of each A element." so the solution was to add the article title to the title attribute of the link.

To do this I replaced line 506 in the default.asp file (in the root of the blog)

response.write("<li>(<a href='"& strBlogLocation &"/default.asp?Display="& arrArticlesData(0, intArticlesLoop) &"#Comments' title='Comments'>Comments</a>)</li>")

with:

response.write("<li>(<a href='"& strBlogLocation &"/default.asp?Display="& arrArticlesData(0, intArticlesLoop) &"#Comments' title='Comments on article: "& SQL_decode(arrArticlesData(1, intArticlesLoop)) &"'>Comments</a>)</li>")

Update 2

To fix a background image positioning bug on multi-line inline links in IE6, I had to add the following CSS style (as an IE conditional comment) to every page. I did this by adding the code to the bottom of the Includes/inc-metadata.asp file.

<!--[if IE]>
<style type="text/css">
#content a{display:inline-block;}
</style>
<![endif]-->