Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - Accessibility

Web Accessibility 101 - Validation and Testing

Tue, 15 Feb 2011 15:55:00 -0000

This article will discuss different ways to Validate and Test your projects for Accessible criteria, including using standard web browsers and screen readers. I'll also list some of the more popular testing tools I've come across. This is the third in a series of planned articles dealing with Web Accessibility. In this series I will cover what is Accessibility, how to build Accessibility into web projects, how to test and validate for Accessible users and some other factors to keep in mind when dealing with Accessibly minded projects. [More]

Web Accessibility 101 - Compliance and Standards

Sun, 13 Feb 2011 21:33:00 -0000

This article will discuss UK based Accessibility Compliance and the development standards around ensuring that your project will pass Accessibility testing and validation. This is the second in a series of planned articles dealing with Web Accessibility. In this series I will cover what is Accessibility, how to build Accessibility into web projects, how to test and validate for Accessible users and a few other factors to keep in mind when dealing with Accessibly minded projects. [More]

Web Accessibility 101 - What is it, and why do it?

Wed, 09 Feb 2011 17:38:00 -0000

In my developer life I've encountered many different clients who have a multitude of requirements for their web projects. One that is occuring more frequently is 'Accessibility'. Over the past year or so I've had to really delve into what this means for a website, and how it affects IT projects.

This is the first of a series of articles relating to Web Accessibility, breaking down how I understand each aspect of it, including things like best practice coding, testing, what your mark-up really tells impaired users and the general theory behind creating Accessible content. I'll also try and point out any tips I've uncovered to try and smooth out the, sometimes rock, path to validating a site as Accessibly compliant.

[More]

Fck editor inserting xhtml and browser specific code

Thu, 03 Jun 2010 10:47:00 -0000

I've been using the fck editor to handle my rich text areas in a content management application. I have to say I like the way it works, and it integrates easily with a Coldfusion platform. It does however have a few issues. This article deals with fck editor using xhtml code, and the editor using a few browser specific html rewrites. Note: I can't have xhtml code in my site, as the definition type is not xhtml, and it fails an accessibility check if any is present. [More]

JQuery multiple show and hide div’s based on click event

Tue, 04 May 2010 15:59:00 -0000

This article shows how to use JQuery to show and hide many div's at the same time, revealing the content that the user requests. It also degrades gracefully if you turn off Javascript. Have you ever tried to display a Questions and Answers type page, where the Question is a clickable link that shows the corresponding Answer (FAQ's)? It is quite tricky to make this interesting, and Accessible to impaired users. A full demo of multiple show and hide divs is here: link [More]

How to stop FCK Editor wrapping your content with 'P' tags

Tue, 04 May 2010 13:19:00 -0000

Whilst testing a website for WCAG 2 Accessibility compliance I noticed that all my dynamic content from a database was wrapped in the HTML 'P' element. The functionality that put the content into the database was a rich text area using the inbuilt FCK Editor. This article deals with how to stop FCK editor wrapping your content in undesirable tags. [More]

NoScript alternatives for Javascript content using CSS visibilty

Thu, 04 Feb 2010 17:25:00 -0000

I recently stumbled upon an interesting dilemma whilst using an image map that was dynamically generated from a Coldfusion Query. If you turn JavaScript off, then the image maps primary graphic still stays visible (and occupies the same space on a page), but none of the map links function anymore. The problem was to replace the map content with a list of hyperlinks that provide the same functionality. Initially I set the maps div CSS to be hidden. In this way the map is not shown by default.


// css
.interactiveMap {visibility: hidden;}

Next we can use a JavaScript call to change the CSS visibility to 'visible'. In this way if JavaScript is disabled the graphic remains hidden, if JavaScript is enabled it turns in on.



	// show the map
	document.getElementById('interactiveMap').style.visibility = "visible";

Lastly we can create the content that we want to see instead of the map. Don't forget to wrap it all in the no script html tag.

By altering the css properties like this we can have the map and the no script content occupy the same real estate on the screen. If you simply populate the no script with the alternative, then the space the map occupies stays occupied, just by a hidden map, giving you a large blank space.

Strict or Transitional DTD type validation, worth hacking just to pass?

Fri, 22 Jan 2010 12:34:00 -0000

An area of web development that I previously had little exposure to was WCAG validation. This is the industry standard for Accessibility coding for web platforms. For version two (V2) of the WCAG there are three standards, A, AA and triple A (AAA). Each represents different levels of Accessible compatibility. What this also does is validate against the W3C doctype standards. This is where my problems arose. The main aim of the doctype standard is to clearly define a separation layer between content and behaviour. In practical terms this equates to best practices such as having an external .CSS files rather than inline styling, and declaring the language types for scripting, such as JavaScript etc. Using a free online tool, http://www.totalvalidator.com/ you can check if your site is W3C and WCAG complaint. It will base the validation on the doctype declared in your html. There are three types of DTD declaration for html 4.01.

You can read more about Doctypes here: http://www.w3schools.com/tags/tag_DOCTYPE.asp The main difference between these is that the frameset DTD will accept frameset as valid html, whereas the others will not. Also the Strict DTD imposes a very tight restriction of what is accepted as valid in comparison to the Transitional DTD. One is a Strict adherance to the standard, whereas the other shows that you are Transitioning from old code into the new. The site http://24ways.org/2005/transitional-vs-strict-markup goes into more detail about what the exact differences are, what I am going to discuss is the option of creating functional hacks, merely to pass validation. One of the deprecated attributes in Strict validation is the target attribute.


Follow this link to go to my website

We are all familiar with this attribute, but when you examine it you find that it is actually a declaration of behaviour. We are forcing the user into a specific action. IE open a new window. As a best practice guideline whenever we have a link on a site that exits that site, we open a new window. The only work around for this is creating a specific JavaScript function to open a new window, as this will not be marked as invalid. This seems overkill, just to pass validation. So I am left with the dilemma that if I want my sites to pass Strict DTD validation I must create a JavaScript hack, or compromise the functionality. I'd like to pass the validation, but I view the functionality as key to a site, so it's an easy decision for me.

Creating a CSS only cross browser drop down menu

Fri, 08 Jan 2010 16:47:00 -0000

I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent. The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible? Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.


	
		
		Top menu option
		
		
	
		
			Link 1
			Link 2
			Link 3
			Link 4
			Link 5
			Link 6

Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions. Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it. The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.





.menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}

/* hack to correct IE5.5 faulty box model */
* html .menu {width:149px; w\idth:149px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}

/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}

There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible. There is a demo of this here: CSS menu demo