|
JQuery multiple show and hide div’s based on click event |
||||||||
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
|
How to stop FCK Editor wrapping your content with 'P' tags |
||||||||
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.
|
NoScript alternatives for Javascript content using CSS visibilty |
||||||||
2.interactiveMap {visibility: hidden;}
2 // show the map
3 document.getElementById('interactiveMap').style.visibility = "visible";
4</s/cript>
2<p></p>
3
4<!--- get the regions list --->
5<cfset variables.regions = getRegions()>
6
7<ul>
8<cfloop query="variables.regions">
9<li><a href="region.cfm?region=#variables.regions. regionid#">#variables.regionName#</a></li>
10</cfloop>
11
12</ul>
13</noscript>
|
Strict or Transitional DTD type validation, worth hacking just to pass? |
||||||||
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.
2
3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4
5<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd">
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.
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.
