Jan 28

WCAG 2.0 in a nutshell, and a problem that illustrates its use

The “Web Content Accessibility Guidelines” (WCAG) 2.0 are the accessibility standard most new websites in Ontario and many other places around the world have to meet nowadays. Here’s a front end accessibility lesson that can show us a few things about applying WCAG 2.0, at a couple different levels. I’ll demonstrate a JavaScript solution to a specific problem, I’ll sort of ‘reverse engineer’ from that problem to locate where it sits within the framework of the four principles—that content must be Perceivable, Operable, Understandable, and Robust—and I’ll show how I use the WCAG 2.0 site to understand any accessibility issue—whom it affects, how, how to fix it, and how to know that I’ve done so successfully. As a bonus, I’ll pop over to the jQuery API site and look at the selector reference. I think the WordPress “hack” I show for adding this to your blog is out of date—the “Admired” theme I’m using now has a way better built-in method—so you’ll need to adapt it. No clue at all what I’m talking about? I didn’t learn this in school either… sometimes you just have to dig in and figure it out.

Understanding WCAG 2.0

Understanding… WCAG 2.0 means understanding that the work began as a collaborative effort to define the 4 Principles of an accessible internet site, which after a decade of ongoing consultation with an ever-growing international community are now guidelines—not exactly the same as “rules”—and a list of criteria—things front-end developers must, should, and can do—to succeed at removing the barriers some groups will otherwise face when accessing and using the internet. [It…] is not prescriptive, but offers options…

Understanding how to use the huge body of work we call WCAG 2.0 means understanding that the work began as a collaborative effort to define the 4 Principles of an accessible internet site, which after a decade of ongoing consultation with an ever-growing international community are now guidelines—not exactly the same as “rules”—and a list of criteria—things front-end developers must, should, and can do—to succeed at removing the barriers some groups will otherwise face when accessing and using the internet. Because the list is not prescriptive, but offers options, it seems of the utmost importance to first know your audience, and next, to understand as the Web Consortium’s Accessibility Group sets out in WCAG 2.0, the best way your organization can guarantee your audience access to your content.

David Berman said in his workshop, and I think it makes perfect sense, that the differences between accessibility and usability are, for all intents and purposes, purely semantic. Providing access for people with varying abilities, simply makes things more usable for everyone.

The specific problems I’ll address are, ‘opening too many new windows’ and ‘changing things without telling me.’ In order to keep site visitors from leaving a site, Web developers often open links in new windows, usually by using the target attribute, and by assigning it a value of "_blank":


<a href="http://SOME_LINK" target="_blank">Linked text</a>

WCAG 2.0 in a nutshell

As I said earlier, there are 4 Principles. Websites must be 1) perceivable, 2) operable, 3) understandable, and 4) robust. If you like acronyms: POUR some accessibility sugar on me (use <abbr title="Spelled Out">SO</abbr> to create tool tips screen readers can use)! Each principal has “guidelines, “…which are further categorized into levels. Level A must be done, or some group will not be able to access the content. Level AA should be done, or some group will have difficulty accessing the content. Level AAA can be done to improve usability or enhance accessibility further. Too many windows causes problems in understanding, which is principle #3. This can be especially challenging for those with disabilities related to vision or cognition.

The Understanding WCAG 2.0 site provides information by which to understand each guideline, and provides “success criteria” so you know when you’ve achieved each level, and examples of techniques you can use to get there. “Success criteria” are written as statements that are recognizably/measurably false until one meets the guidelines. The problems that prevent the statement from being true are your challenges to overcome.

Know your organization, your audience, and your content. Use valid HTML wherever you write code. If most of your site visitors are knowledgeable about technology it may not be necessary to open new windows, as they will use their familiar browsing setup to choose when and how to open them, and if your code is valid it will work as they expect. There’s no WCAG 2.0 guideline that says not to open new windows, but we must think more carefully about how doing so may create barriers to ease of access and use.

Guideline 3.2 says: make webpages appear and operate in predictable ways. Opening pop-up windows could be problematic for screen readers. If they don’t know the window is opening they can get lost. This guideline also covers many situations, such as focus or context changes, and page reloads—anything a user can potentially do that changes the content. WCAG 2.0 by no means prohibit pop-up windows, but we must prevent them from becoming barriers or annoyances. We should minimize the number of new windows, stop using target=”_blank”, and let users request a new window or otherwise inform them it’s about to open. If we look further in the Table of Contents we find a discussion about pop-ups under 3.2.5, with suggestions…

Situation C: If the Web page uses pop-up windows:

Including pop-up windows using one of the following techniques:

H83: Using the target attribute to open a new window on user request and indicating this in link text (HTML)

SCR24: Using progressive enhancement to open new windows on user request (Scripting)

3.2.5 also has an “Advisory” about additional techniques.

Additional Techniques (Advisory) for 3.2.5

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.

Opening new windows by providing normal hyperlinks without the target attribute (future link), because many user agents allow users to open links in another window or tab.

G200: Opening new windows and tabs from a link only when necessary

Understanding the problem, we now make a plan

Objective

I don’t want folk leaving my pages abruptly or permanently, and I don’t think all my visitors know everything about their browser’s and other equipment’s context-sensitive help menus, access key options, etc., so I’ve elected to automatically open some content in new windows. I’ve decided I can sensibly limit the number of windows that open from any of my blog pages to a maximum of 2 by applying a simple self-enforced rule. I’ll still use the target attribute, but instead to create one “named window” for links to other areas of my site (rcfWin), and one “named window” for links to external sites (extWin). I’ll open all external links in their own window, which means I can easily design something that will apply retroactively to all such links. Go to the API selectors page and scroll down to Attribute Starts With Selector [name^="value"] to get the syntax. I want to select all the links (a) with an href attribute whose value begins with http:// (or https://). We can get away with [href^="http"].

I have to weigh all the advice to find the best way to handle my internal links. If you’ve linked text in the middle of one article to another article there’s a distinct chance the user will click it and start reading. If you don’t want that, the most sensible choice is usually to lose the link—link only at the end of the information and only to the next logical jump in a sequence. But if you feel you must have the option, to keep it as an available option you can create a CSS class name and tell jQuery to look for that. You’ll still have to add it manually to any links, past present or future, you want to behave that way. Or you could do it the other way around and use your class to prevent opening in another window or tab.


<a class="open-in-rcfWin" href="/MY_INTERNAL_LINK" target="rcfWin">Linked text</a>
<a href="http://SOME_EXTERNAL_LINK" target="extWin">Linked text</a>

* Aside: I’ve already manually removed the http://www.rcfouchaux.ca from internal links because of its effect on WordPress “pingback links,” which I’ve got going on here. I’ll have to explain those later, but it comes in handy that I’ve done this, as you’ll soon see.

Problem

This blog just turned 3, and I’ve got a lot of blog pages. I have to find some way to automate at least some of this. I might have used target="_blank" sometimes, and not others. I might have already used target="extWin".

jQuery to the rescue!

jQuery library—write less, do more

jQuery is a “library” of code that makes standard JavaScript easier to use by preparing commonly used patterns and tasks and giving them logical, easier-to-remember names. jQuery selectors let’s us find and select specific elements and groups of elements on a web page and then manipulate them in pretty astonishing ways. If your site is WordPress like this one you’ll have to find out if jQuery is already included in your theme, or if it can be added easily (or if you have admin access to your web root and know how you can add it to any web site). Due to historical reasons I combine methods. I let the Admired Theme supply the jQuery and I keep extras in my own file. To make it use the scripts in my file I need admin-level server access to edit my theme’s header.php, which is found in wp-content/themes/YOUR_THEME/. Find wp_head(); alone on its own line and add a line of code after it wp_enqueue_script( ALIAS, PATHTOFILENAME );. The path to the file has to be complete, should be a ‘relative’ path, and depends on your server. I always make the alias the first part of the filename.

<?php
	/* JavaScript for threaded comments.
	 ----------------------------------*/
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* wp_head() before closing </head> tag.
	---------------------------------------*/
	wp_head();
	
	/* Include own script(s) AFTER wp_head() tag.
	---------------------------------------*/
wp_enqueue_script( 'MY_CUSTOM_SCRIPT', '../[actual_path_to]/MY_CUSTOM_SCRIPT.js' );
 
/* etc... */

Thereafter you make changes to that file and then replace it on the server. Keep in mind that header.php will be over-written if and when you update your theme, so keep backups of any code you add.

Adding the behaviors we want to the elements we want

The jQuery magic starts when you wrap the selector in $('SELECTOR');. I’ll be creating a set of extWinLinks $('[href^="http"]'); and rcfWinLinks $('.open-in-rcfWin');

There are nearly always more than one way to solve a problem with jQuery. My general approach will be to create a function as the page loads, and call it when the page is ready. I’ll supply more details in the code comments!

To recap: we’ll take all http links and assign target=”extWin” regardless if they’ve got a target attribute set or what it might be set to. We’ll also create a class name to apply to internal links we think should open their own window, but never the same window an external link may already be open in. Bonus: We’ll add the sentence ” … Opens in a new tab or window.” to every link that does that. Because this last bit of code will be repeated in both the previous functions we’ll write it as a standalone function in its own right, and call it from the other two when needed (those jQuery.each(); loops that repeat in each function are good candidates for the same treatment, but I left it so you can better compare what’s happening in each case).


        /*
         * Window openers
         * Require jQuery
         *
         */
          
          // Declare variables in a single statement at the top of the script.
          // Select external links and store in a variable named extWinLinks
          // Select internal links and store in a variable named rcfWinLinks
          // Create two functions to set the targets on the two sets of elements. 
          var
             extWinLinks = $('a[href^="http"]').not( 'a[href~=".rcfouchaux.ca/"]' ), // use a comma if you have more
             rcfWinLinks = $('.open-in-rcfWin'),
             do_extWinLinks = function() {
                 // Set the target attribute to 'extWin'
                 extWinLinks.attr({ target:'extWin' });
                 
                 // Go through each item and get its title if it has one, or set it to an empty string.
                 extWinLinks.each( function( el,i ) {
                     var my = $(this), myTitle = my.attr('title') || '' ;
                         my.attr({ title : appendNotice( myTitle ) });
                 });
             },
             do_rcfWinLinks = function() {          
                 // Set the target attribute to 'extWin'
                 rcfWinLinks.attr({ target:'rcfWin' });
                 
                 // Go through each item and get its title if it has one, or set it to an empty string.
                 rcfWinLinks.each( function( el,i ) {
                     var my = $(this), myTitle = my.attr('title') || '' ;
                         my.attr({ title : appendNotice( myTitle ) });
                 });
             },
             appendNotice = function( title ) {
                 // Store the notice as a variable
                 var
                     notice = ' … Opens in a new tab or window.'
                 ;
                 
                 // return the appended notice (but don't add a leading space)
                 // This syntax, if what's left of ? is true returns left of :, otherwise right of :
                 return ( title.length > 0 ) ? title + ' ' + notice : notice ;
             }
          ; // I make the final semicolon obvious so I can find it later
          
          // Call the functions. 
          do_extWinLinks(); 
          do_rcfWinLinks();  
  

To summarize

Know your organization, your audience, and your content. Use valid HTML wherever you write code. If most of your site visitors are knowledgeable about technology it may not be necessary to open new windows, as they will use their familiar browsing setup to choose when and how to open them, and if your code is valid it will work as they expect. There’s no WCAG 2.0 guideline that says not to open new windows, but we must think more carefully about how doing so may create barriers to ease of access and use. We might consider limiting their number—by using a named window, not the well-known keyword _blank—and warn our users it will open in a way that screen readers will discover and convey to any users who may be using one. This discussion follows a line of thinking you can adapt to meeting other WCAG 2.0 success criteria. This JavaScript shows only one way to reduce the number of windows your site opens, and to inform users in advance in a way their technology can understand.

I’ve coded all the external links in this post differently, but they should all open in the same tab or window. Hover your mouse over any links on this page to see if the ” … Opens in a new tab or window” notice worked. Here’s a class="open-in-rcfWin" internal link and here’s another one. The next one has no class set, so it will replace the content of this page with the home page: ciao for now!

§

Understanding WCAG 2.0 Latest version: www.w3.org/TR/UNDERSTANDING-WCAG20/

How to Meet WCAG 2.0 – Quick Reference: www.w3.org/WAI/WCAG20/quickref/

May 20

Visual Understanding Environment (VUE) as a presentation tool

VUE, and its design-centric extension, designVUE, are concept-mapping tools with rather extraordinary superpowers. In fact if you think they look like simple tools for making mind-maps I’m here to nudge you to take a closer look. Mind map being created in VUE.

Metadata

Does quickly and invisibly making your content “more accessible, interoperable and valuable” sound good? Have you heard of “…Web 3.0, the Semantic Web or the Giant Global Graph…?” These two well-connected apps support OpenCalais and other meta-data helpers.

While the VUE site is essential for resources and documentation, I recommend installing and using designVUE. Even if you don’t use IBIS argumentation, what they refer to as “bi-directional hyperlinking between files,” known elsewhere in designVUE as “wormholes” (and in Compendium as “transclusion,”) or the ability to place one map within another, is a powerful ability that separates tools like VUE and Compendium from the plethora of mind mapping tools available.

Presentation tool

That’s what I’m learning first—the built-in presentation tool. There’s not much more I can add about it at this point than what’s in this rather comprehensive overview/tutorial (more overview than tutorial, maybe?), so with no further ado…

Next

I seem to be able to screen record these presentations with another open source program, so if that pans out I’ll share it then. I think it’ll definitely take some practice thinking about presenting in a different way, but there’s a great deal of evidence that idea maps, visually connecting the dots, and the activities such as argument mapping that are associated with them a) may have a natural fit with social networks and social learning, and b) organize data in ways consistent with the human brain (see for example Conole & Fill, 2005 and its extensive reference list).

§

More

The Visual Understanding Environment (VUE) is an Open Source project based at Tufts University

designVUE is a branch of VUE. It is an open source project based in the Design Engineering Group of the Mechanical Engineering Department at Imperial College London.

Conole, G. and Fill, K. (2005). A learning design toolkit to create pedagogically effective learning activities Journal of Interactive Media in Education 2005(08). [PDF: jime.open.ac.uk/2005/08]. Gráinne Conole and Karen Fill, University of Southampton. Page 1 Published 26 September 2005 ISSN: 1365-893X

Calais Marmoset is a simple yet powerful tool that makes it easy for you to generate and embed metadata in your content in preparation for Yahoo! Search’s new open developer platform, SearchMonkey, as well as other metacrawlers and semantic applications.

Nov 01

21st Century Cognitive Apprenticeship: 4 Ways We Make Thinking Visible

Back in 2005 Dorian Peters posted a summary of Mayer’s Principles for the design of Multimedia Learning I’ve visited frequently. I read it again today through the lens of cognitive apprenticeship and made some connections. Two essential components of apprenticeship models and multimedia design are narration and its timing, which is probably why software applications like Adobe Captivate, PowerPoint, or PowToons contain various ways to synchronize the appearance of objects with audio, visuals and text. The framework and principles can help form a checklist to improve the Who, What, When, Where, and How of choosing what to include in learning environments, all of which illuminate two distinct aspects of the Why — a given that someone wants to learn the stuff, and our ability to assess that including something in specific ways — or not — helps achieve that goal.

Mayer (2001, 2003, 2005) presented research-based principles for the design of multimedia messages. His fundamental principle is the multimedia principle itself: people learn better from words and pictures than from words alone. Peters has organized the principles into sets:

  • Principles for managing essential processing  more»
    • Segmenting principle: People learn better when a multimedia lesson is presented in learner-paced segments rather than as a continuous unit.
    • Pre-training principle: People learn better from a multimedia lesson when they know the names and characteristics of the main concepts.
    • Modality principle: People learn better from animation and narration than from animation and on-screen text.
  • Principles for reducing extraneous processing  more»
    • Coherence principle: People learn better when extraneous words, pictures, and sounds are excluded rather than included.
    • Redundancy principle: People learn better from animation and narration than from animation, narration, and on on-screen text.
    • Signaling principle: People learn better when the words include cues about the organization of the presentation.
    • Spatial contiguity principle: People learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.
    • Temporal contiguity principle: People learn better when corresponding words and pictures are presented simultaneously rather than successively.
  • Principles based on social cues  more»
    • Personalization principle: People learn better when the words are in conversational style rather than formal style.
    • Voice principle: People learn better when words are spoken in a standard-accented human voice than in a machine voice or foreign-accented human voice.
    • Image principle: People do not necessarily learn better from a multimedia lesson when the speaker’s image is added to the screen.
  • One last principle,” the Individual differences principle.  more»
    Design effects are stronger for low-knowledge learners than for high-knowledge learners. Design effects are stronger for high-spatial learners than for low-spatial learners.

More about these in a moment. These principles illustrate a point of mine: that what Collins, Brown, Duguid, Newman, Holum et al. (see my posts here and here) bring with their theory of cognitive apprenticeship is a practical framework by which to apply such good principles. Conversely, the principles can guide the how, when, who, where, and why of specific situations. Consider the statement that teachers (who may often be more generally deemed “designers” of learning experiences) should show the processes of the task and make them visible to students (Collins et al.., 1991:). The common root of processes and processing reveals the relationship. The set of essential processing principles informs the design and planning stages, with a strong nod to individualization. Extraneous processing are filters and fine-tuning strategies. Both sets speak to content, method and sequence in Collins’s language. The fourth member of that set in cognitive apprenticeship lingo is sociology, and Mayer offers guidance here as well.

I’m going to apply Mayer’s fundamental principle now and try to enhance this communication with narration and pictures. Maybe you’ve never thought of footnotes as technology before, but they are a highly developed device1, designed to make an author’s thinking visible.

I use this icon to exclaim or assert something. I assert that this is one way to make thinking visible. For a web site, it’s easy to use CSS to make a set of icons. available, as I’ve done for this one. Of course the meanings of the icons must be communicated throughout the community and a common understanding shared by those who use them. Press the letter N to open this “Note” showing my growing list. The letter U opens my Audio narration in which I discuss 4 simple things we’ve done within documents to make thinking visible, and how each can be enhanced with the 3 main Web technologies, HTML, CSS, and JavaScript.

Icons Used Here

  • Assertion 
  • Argument 
  • Audio 
  • Decision 
  • Web page 
  • Idea 
  • Issue 
  • List 
  • Idea Map 
  • Con 
  • Note 
  • + Pro 
  • Position 
  • Rubric 
  • Video 

This icon is not in the original Compendium set. I added it because I thought it filled a need.

Using icons is another thing on my list. It’s not a new idea, but applying it specifically when managing essential processing, thinking about segmenting and pre-training (prerequisite knowledge?) while imagining and planning authentic environments, or striving to reduce extraneous processing throughout demonstration and coaching phases. A consistent icon set provides coherence by signaling and providing cues about the content. For more ways, roll your mouse over the list icon, or press the L key to open my List. Press N to open a Note displaying the list. Press U to open my Audio narration for this content.

  • Icon sets
  • “More »” links  more»
    More links reduce extraneous information and communicate which points you think are important.
  • Footnotes2
  • Narration & animation

§


    Footnotes:
  1. Anthony Grafton, in The Footnote: A Curious History (1999) points to men like Pierre Bayle, who “…made the footnote a powerful tool in philosophical and historical polemics; and Edward Gibbon, who transformed it into a high form of literary artistry. Proceeding with the spirit of an intellectual mystery and peppered with intriguing and revealing remarks by those who “made” this history, The Footnote brings what is so often relegated to afterthought and marginalia to its rightful place in the center of the literary life of the mind…” (cover notes).
  2. With JavaScript the eye never has to leave the main text. It can count them for you, too!

References

Clark, R. C., & Mayer, R. E. (2003). E-learning and the Science of Instruction. San Francisco: Jossey-Bass. Mayer, R. E. (2001). Multimedia Learning New York: Cambridge University Press. Mayer, R. E. (Ed.). (2005). The Cambridge Hanbook of Multimedia Learning. New York: Cambridge University Press.

Grafton, Anthony (1999). The Footnote: A Curious History, Boston: Harvard University Press, 241 pages.

IDEO (2011). The Design Thinking Toolkit for Educators, http://www.designthinkingforeducators.com/, 94 pages.

Peters, Dorian (2005). Mayer’s Principles for the design of Multimedia Learning, blog http://designerelearning.blogspot.ca/2005/09/mayers-principles-for-design-of.html retrieved 2012-10-10.

Apr 16

What would a good PBL planner look like …on the Internet?

That’s the question that started to form in my head as I watched one 21st-Century teacher’s project take shape and grow over the past few weeks. She used at least 3 or 4 “Web 2.0” applications, gathered relevant resources from diverse sources, and tied it together with a Google doc. She used social media to engage parents and experts. It’s an impressive and organically evolving body of work, and I can’t help but think a mashup? of easily obtainable freely available open source tools could make it even easier for more educators to design and execute such rich and engaging learning experiences.

So what have I got?

Continue reading

Mar 20

Just an idea I’ve been getting

UPDATED 2012-03-27: What’s with all the icons and rollover pop-ups? They’re based on Compendium, which I’ve written about before. While they may not be appropriate for every everyday blog post, I’m asking you to have a look and leave a comment. Do you see a role for them within other web-based contexts you may be familiar with? If so, which? Leave a comment!

I’m trying to get experience design into my thinking about online learning, using the simple technologies I know and love: computers and various digital mobile devices, web browsers, HTML, CSS, JavaScript. For some time I’ve been headed towards the position  that documents are becoming obsolete. While I was thinking about that a teacher who is part of my Twitter PLN was putting together a wonderful Project-Based Learning experience with her grade 6 class, their parents and many others from the PLN. This led me to have an idea .

Continue reading

Mar 04

Wicked Problems

Horst Willhelm Jakob Rittel taught design and architecture for over 30 years but never designed a building. Horst Rittel matters because he saw a connection between science and design and was able to articulate it to designers. He recognized that the definition of a problem is subjective and comes with a point of view. When you think this through it reminds us all “stake-holders” hold a stake in any problem’s outcome. The more diverse the stakes, the more fluid definitions become, and ultimately the harder it becomes to define the problem. It’s a problem of moving goal posts and answers that lead to further questions. Rittel named such problems wicked problems, problems that are not so much “solved” as they are “tamed” (Rith & Dubberly, 2006). Continue reading

Feb 11

Rethinking PowerPoint: the Assertion/Evidence model

I’m very interested in taking elearning to new places. Elearning is not a noun, it is “to learn” using tools and environments enhanced by electronic technologies. The mere use of technology, electronic or otherwise, does not assure learning takes place — far from it. Too much of what we call elearning can be all too thoroughly described as automated PowerPoint. Now, I have ideas and long range goals for elearning design that may preclude PowerPoint entirely, but if the previous sentence is true, or even if you use PowerPoint only occasionally, or in some small phase of storyboard development, then anything you do to improve what you do with PowerPoint should improve your final product, right? Understanding when to employ an assertion-evidence model in any lesson or presentation is a step towards creating better learning experiences.

Continue reading

Jan 08

Learn to play more, play to learn more (and may your learning be serendipitous)

On my other secret blog I barely mentioned attending a talk back in November on Planned Serendipity, but in terms of impact the session has turned out to be a bit of a “creeper.” At the time it reminded me how big a role serendipity, albeit usually of the unplanned variety, has played in my own life. Now, the more I notice it, well.., the more I notice it happening all the time. This past week—still reeling perhaps from the realization I’m descended from webmasters and plugin monkeys, even as I plan how to design a “Web 2.0” project involving things computer scientists inevitably do much better—three different sources contributed three new resources to the rebuilding of my self esteem by reinforcing my complete belief in the importance of play to learning*. Continue reading