Jun 25

Quick fix for poor screen reader support of title attribute

As someone who remembers when ARIA was just an idea, I’ve spent a fair amount of time adding title="something descriptive" to many of the links, images, and possibly other elements on web pages I’ve authored and edited. But as developers began relying on authentic users of assistive technology to test their work, and those with differing abilities brought their knowledge and experience into the discussion and onto the Web, we learned we were wrong. Some of us knew that early on, or part of it anyway, and in the paralysis that may sometimes grip those unsure what to do, I stopped using title for anchor tags (i.e. links; <a>) altogether.

ARIA’s all grown up now

ARIA grew up and became the specification. The bulk of screen readers put their support there, and aria-label="making this meaningful" has supplanted the title attribute, freeing it to be what it is.

There’s enough explanation about this on the Internet already, so I’m going to keep this one very short. There are a lot of links in my pages that are in various states that reflected my limited understanding at the time, and maybe in yours too—live and learn! As I’m mostly working with WordPress sites these days, and WordPress has built-in jQuery, I’m sharing this snippet of code that takes text from existing “titles” and places it in an aria-label, or takes the linked text displayed to the visitor and makes it a bit more friendly and conversational than the typical screen reader default: “Link text. Link”

Most of my WordPress sites have a js folder in the theme I’ve chosen’s main folder at …wp-content/themes/theme-name/js, and in it a file called functions.js. Below is a standalone jQuery closure that should work in any site that has jQuery installed. In practice I took the indented part, between the first and last lines, and pasted it below the existing scripts in the existing closure. In Drupal you might put it in …/sites/all/themes/theme-name/js (and load it with a preprocess.inc). If you’re not using a CMS you probably need to wrap it in <script></script> tags, and make sure you place it below the prerequisite jQuery include.

For the blog you’re reading now, which didn’t already have a functions.js file in place, rather than stuff it into another I placed the following line below wp_head(); in header.php, found in the WordPress root folder.

wp_enqueue_script( 'my-custom-functions', get_template_directory_uri() .'/js/functions.js' );

This quick fix should probably be considered a temporary one, but it sure makes my pages sound better with ChromeVox, so I’ll carry on and wait for experts like Geoff Collis and others to tell me what to do next.

(function($) {
  // If there's a title attribute, make sure it's copied to aria-label (for screenreaders)
  // If there's no title, elaborate on the linked text.
      var
        links = $('a')
      ;
      links.each(function(i){
      	if (this.title){
      		$(this).attr({'aria-label':this.title});
      	} else {
      		this.title="Go to " + $(this).text() + ".";
      		$(this).attr({'aria-label':this.title});
      	}
      });


})(jQuery);


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/

Bookmarklets update

Aside

Last June I explored “bookmarklets,” which I’ve found to be an engaging way to explore JavaScript, primarily by leveraging the power of pet peeves—enticing novice learners to change something they don’t like about a web page to be more the way they’d like it to be. As an example I offered a simple script that toggles the visibility of the ads on a Facebook home page.

javascript:(function()
{
  var 
  rCol=document.getElementById('rightCol'),
  isHidden=rCol.style.visibility==='hidden'?true:false;
if(isHidden)
  {
    rCol.style.visibility='visible'
  }
else
  {
    rCol.style.visibility='hidden'
  }
})();
To actually use this as a bookmarklet, first remove all the line breaks and optimize spaces.

Such a snippet can lead to a discussion of the differences between CSS display and visibility or more advanced ideas like native functions and how and when to import external libraries. My bookmarklet soon evolved into the next snippet, which uses an updated id and display:none;

javascript:(function(){var%20adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}})();

This worked fine on the Home page, but not elsewhere. Looking into it with Firebug you quickly see the id is different—on a Messages page, for example, it’s pagelet_ego_pane. You might try simply adding a conditional, if it’s not 'pagelet_side_ads' try ‘pagelet_ego_pane’. But this will fail in JavaScript when the document.getElementById method can’t find the id it’s looking for. While there are elegant advanced ways to do this, and we don’t know how many different ids there might be, I followed the learner’s first suggestion and let it turn into an introduction of try/catch blocks and error handling. These work as follows:

try
  { /*something. If it fails...*/ }
catch(errorObjectName)
  {/*report the error and/or try something else*/}

The errorObjectName is usually error and you can retrieve error.message from it, amongst other things.

If at first you don’t succeed, try/catch again

Here’s the expanded code that tries to find an element with id="pagelet_side_ads" and if that returns and error, it catches that and “tries” again with id="pagelet_ego_pane". If that fails it attempts to log that information to the console. Notice I didn’t say “tries” as there’s no additional try/catch block and I want to avoid using the same word with two meanings. What do you think would happen if the browser has no console object containing a log() method? Below the expanded version is a single line version of the same code (except generic console.log() has been refined to console.error() see this link) to use, as expanded code doesn’t work in this context.

javascript:
(function() 
{
  try
    {
      var adsDiv=document.getElementById('pagelet_side_ads'),
          isHidden=adsDiv.style.display==='none';
      if (isHidden) 
      {
        adsDiv.style.display='inline-block';
      }
      else
      {
        adsDiv.style.display='none';
      }
     }
  catch(e) 
  {
    try 
    {
      var adsDiv=document.getElementById('pagelet_ego_pane'),
          isHidden=adsDiv.style.display==='none';
      if (isHidden) 
      {
        adsDiv.style.display='inline-block';
      }
      else 
      {
        adsDiv.style.display='none';
      }
    }
    catch(e)
    {
      console.log('Failed. Message: ',e.message)
    }
   }
})();

Single line version for general use:

javascript:(function(){try{var adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}}catch(e){ try{var adsDiv=document.getElementById('pagelet_ego_pane'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}}catch(e){console.warn('toggleFBAds failed. Message:',e.message,'. This can mean the id was not found.')}}})();

Drag it to your Bookmarks toolbar: Toggle FB ads

You wouldn’t want to nest try/catch blocks in catch statements endlessly, so you might extend this into lessons on arrays, loops, recursion… that depends on you and your learners’ situation.

§

Further reading

console on the Mozilla Developer Network

try…catch on the Mozilla Developer Network


Jun 18

Bookmarklets for fun and practice

Bookmarklets are JavaScript links that can be stored in your browser’s Bookmarks or Favorites folder, or attached to a bookmarks toolbar, and then used to do something relative to that page. I think bookmarklets have a lot of value for teaching and self-teaching JavaScript.

What can I learn playing with bookmarklets?

You need to create and use a fundamental unit of HTML: a link (also known as “anchor”; <a href="somewhere">Link</a> ). You can start with the most basic javascript:alert('Hello world');. You can learn how to use a closure javascript:(function(){ alert('Hello world'); })();. You’ll be forced from the start to pay close attention to syntax. If you haven’t yet, you’ll quickly figure out how to use Firebug (and/or any modern browser’s “F12 Developer Tools”) to inspect DOM elements to get their id and other properties. Ultimately you’re limited only by your skill, which will improve quickly, and imagination. What would you change about the blog page you’re reading now, if you could?

Where to start?

I started with a pet peeve about a page I visit regularly. My first bookmarklet ever hides the right column in Facebook, so I don’t have to see the ads. Take that, Mark! If you click the link below while on this page nothing will happen. But if you drag the link to your Bookmarks Toolbar (in Firefox, “Bookmarks Bar” in Chrome, etc…) do that while viewing your Facebook page (or any page that coincidentally has a right column div with id="pagelet_side_ads") you will toggle its visibility.

Bookmarklet1: Toggle FB ads Drag the link to your bookmarks bar to try it.

To embed a bookmarklet so it can be dragged to the toolbar you just place a link on your Web page:

<strong>Bookmarklet: <a href="javascript:(function(){var adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}})();">Toggle FB ads</a></strong> 

The imagination runs wild

Still milking my own pet peeves, I wanted to collect lyrics of several songs I needed to learn for the weekend warrior band I play in. A recurring pattern is, we find a song by an artist that is a good fit for our sound, and due to that we later add 3 or 4 more by the same artist. Besides, I just like having lyrics handy… why not just get all the lyrics for that artist at once? But that would mean a lot of clicks and copy/paste! With some intermediate JavaScript you can collect all the links and titles, visit each page in a queue, get just the lyrics you want, and display them in one place in a fraction of the time. To engage students and make meaning of any learning situation requires context and relevance. Do you know any young people who like music, and might be engaged by collecting lyrics of their favourite artists?

I may explain this code in another post, but for now it’s about bookmarklets and an example of what one might do with one. If you don’t understand this paragraph you’ll need to do some vocabulary homework. This script only works at www.lyrics.com. That page has a version of jQuery installed so I used it. To write the script I used Firebug to identify IDs and classes of elements on the page that I use as “selectors” to have access. I fiddled in the console until I had a working script. Meticulous syntax is important… your script goes on one line, so semi-colons are in, comments are out.

Bookmarklet: Get Lyrics This works on Artist pages at www.lyrics.com

This script is quite a bit more involved than the first. I did succeed in making it work in the link code like the first one, but there’s an easier way. In order to make more complicated scripts work you should use the bookmarklet to load your script from a file on your server. I created rcf-get_lyrics.js and placed it on this server. You can copy/paste the script below and just change the path to point to your own file.

javascript:(function(){var url="http://www.rcfouchaux.ca/rcf-get_lyrics.js",n=document.createElement("script");n.setAttribute("language","JavaScript");n.setAttribute("src",url+"?rand="+new Date().getTime());document.body.appendChild(n)})();

I’ll discuss the code in more detail in a future post, but quickly, you create a script element and set the source to the file, then append this new element. There’s a unique identifier, which I’m not using for anything right now, created from the time and appended to the url.

Few limits

The most impressive bookmarklet I’ve ever seen, one that immediately became essential to all my JavaScript learning and development, is Alan Jardine’s Visual Event. Visual Event is an open source JavaScript bookmarklet which provides debugging information about events that have been attached to the DOM (Document Object Model; it means the entire web application represented by the “web page” loaded in the browser’s window).

Alan’s script demonstrates how to load a complex script off a server using only a small manageable amount of code in the bookmarklet itself. As you see, I borrowed it but removed his protocol check for simplicity. I think the aforementioned date/time “query string” he adds prevents the browser from caching the script indefinitely, but I didn’t research that—it’s a guess.

Another impressive project that’s available as a bookmarklet is pjscrape. If I wanted to turn my lyrics scraper into a real utility I’d probably start with pjscrape.

Update 2: I’ve placed both the bookmarklets on their own page. I expect I’ll add to the list.

Update 3: I’ve added a variation on the Facebook ad hider, using display:none and targeting only the ads—compare the two and try to figure out what’s different. I’ll add all future updates on the bookmarklets page.

§

  1. This was updated since original publication and now uses id="pagelet_side_ads" and display:none;
May 28

Make Captivate HTML5 Work in Firefox

screen shot of error dialogWith the slow but steady demise of Flash, SWF-based elearning software makers, like Adobe, have been “cramming” (a word from disruptive innovation) HTML5 into their products, like Captivate (I’m using v6.1), to keep up. Because the HTML5 spec itself is still growing in inconsistent and at times uncertain directions there are bound to be holes and gaps in the implementations. For Captivate 6.1 the first one I encountered was the “This browser does not support some of the content…” error I got when I attempted to view my HTML5 output in my browser of choice—Firefox. It was version 20, and I know Firefox has supported HTML5 audio and video tags since version 3.5 so it had to be something silly. In the proprietary software world that may mean license issues, and so it does with Firefox (Free, Open, Libre software) and the MP3 (not so much). Captivate exports only MP3s, Firefox (and Opera) play only OGGs. So until Adobe offers a checkbox on the Publishing page you can do the following, or hope your visitors use only IE, Safari or Chrome—as the majority probably do… but we’re big on inclusion around here so let’s not leave anyone out!

I quickly ascertained it’s the MP3-only audio export preventing Firefox from doing Captivate sound. As you probably know, some browsers do MP3, others do OGG. You may even remember why. Fortunately that’s the only reason Firefox won’t play Captivate HTML5. All you have to do are

  1. create OGG versions of each MP3 and
  2. edit two JavaScript files to
    1. detect Firefox
    2. provide the appropriate file extension and
    3. suppress the error message.

Simple enough you say, but I figured I may as well google it and see what others have done. I did, and found all the hints I needed in hermit9911’s answer to this post (scroll down a few). hermit just needs OGG. I want both to work depending on browser, so I had to improvise on hermit9911’s theme. Here are the steps I ended up following.

1. Create OGG versions of each MP3

There are many programs that convert audio formats. I used Audacity’s “Chains” feature (macros). Since I’ve met many more people who know of Audacity than know of its Chains feature, I’ve done a separate screencast of that process:

Made using Camstudio (screen video), iPhone (narration),
Audacity (mix/process audio) & Sony Vegas (mix/render video)
Can you suggest a good open source video editor? Please use the comments with my thanks!

2. Edit two JavaScript files

detect Firefox

Project.js is found in the root export folder. It’s “minified,” which means line breaks and extra spaces are removed and it’s pretty hard to read, but we can add our tiny bit of code right at the beginning. I don’t see any need for feature detection in this case, so I settled for user agent:

var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; 
// converts the string to lowercase then creates Boolean, 
// true if it finds 'firefox' anywhere in the name. Otherwise : false 

provide the appropriate file extension

Once you have a question that can be answered yes or no the best syntax is usually as follows:

myExtension = is_firefox ? '.ogg' : 'mp3'; <br>// Yes? Send '.ogg' No : send '.mp3

Then just search & replace existing .mp3' with '+myExtension Everything between ”s is literal, myExtension is variable depending on the answer to is_firefox?yes:no;

UPDATED: If you have Administrator rights and access to the Adobe Captivate install folder you can add these changes to the template Captivate creates the file from. Otherwise both files are overwritten every time you publish, and you have to repeat all these steps. If you can access and edit
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js
use that file instead (path to install folder will differ depending on operating system and installation) otherwise follow the instructions as written:
Next, open [PublishFolder]/assets/CPHTML5Warnings.js and make the two additions suggested by hermit9911. (I looked up the earliest version of Firefox that supported the audio tag and replaced hermit9911’s xx with 3.5).

this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5; // sets minimum version, used in code below

suppress the error message

Finally at the very bottom of the file you will find a series of IF and IF ELSE statements… add the following after the closing semicolon of the last one:

else if((this.browser == this.BrowserEnum.FIREFOX) <br>  &amp;&amp;<br> (this.browserVersion &gt;= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION )) <br> lSupported = true;

Browse to index.html in Firefox, press Play and watch your movie. With a bit of practice this will add all of about 5-10 minutes to your publishing routine. Alas, you’ll have to redo Project.js—and convert all your audio files— every time you publish.

As an extension activity, make this work for Opera (yes, you can use find/replace but watch case-sensitivity. Do each separately… firefox/opera and FIREFOX/OPERA). Use flow control instead? (Hint: yes) Look back at the code above and explain why you need to do that. Would you change the variable name? To what?

My entire solution instructions and code snippets
(including my answers to the extension questions)

/* ADD TO TOP OF Project.js */
var wantsOggsOverEasy = ((navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (navigator.userAgent.toLowerCase().indexOf('opera') > -1)), myEXT=wantsOggsOverEasy?'.ogg':'.mp3'; 
/* nb comma/semi-colon usage - I declared 2 local vars in 1 dec */

/* This is the text to search for
   .mp3' and change it to '+myEXT
  EXAMPLE
  FROM: src:'ar/Mouse.mp3',du:182
       TO: src:'ar/Mouse'+myEXT,du:182

IF you have Admin privileges find the Captivate install folder and edit the warnings file found in
[InstallFolder]\HTML\assets\js\CPHTML5Warnings.js. Otherwise you can save these changes in a safe place and you'll need to replace [PublishFolder]/ar/CPHTML5Warnings.js in the published location every time you publish. (Project.js is generated programmatically by the publishing engine, so to the best of my knowledge it must be fixed after each publish, also protect your OGG files.)  */

/* In CPHTML5Warnings.js 
(somewhere between lines 19 and 20) non-destructively ADD:  */

        this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION = 3.5;
        this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION = 10;

(approximately line 112) AFTER final 
          lSupported = true; AND BEFORE

          return lSupported; non-destructively ADD 

		else if((this.browser == this.BrowserEnum.FIREFOX) && (this.browserVersion >= this.BrowserEnum.FIREFOX_MIN_SUPPORTED_VERSION))

            lSupported = true;	
		else if((this.browser == this.BrowserEnum.OPERA) && (this.browserVersion >= this.BrowserEnum.OPERA_MIN_SUPPORTED_VERSION))
            lSupported = true;

§

N.B. Post was edited for clarity since first publishing.

Mar 13

On Webmasters and PluginMonkeys (reprise)

I’m very fond of saying I first learned web design—HTML, JavaScript and CSS—the same way I learned guitar: by “stealing” other people’s best licks. When I took music in Pennsylvania public schools in the 60s we had an itinerant music teacher once or twice each week, and classroom teacher-led music once or twice more. We learned every good boy deserves fudge and we sang songs “by note,” and songs “by rote.” We were taught musicianship. But there was never any suggestion the goal was for any of us to become professional musicians. I’ve been thinking about that ever since I learned “entrepreneurship” is receiving top billing local curriculum as a universal 21st Century competency (e.g., C21, P21). Not that there’s anything wrong with that!

Informal learning is valid and important

Graphic, reads I learned html same way as guitar, by stealing other people's licks

Part 1 of this series was written over a year ago when I first heard the man I considered my Jimmy Page of the JavaScript world, Douglas Crocker, refer to my kind dismissively as “Webmasters…Generally they weren’t very smart.” Dion Almaer suggested the term “jQuery Plugin Monkeys,” to much laughter. To summarize, I’ve embraced the term in much the way U.S. Democrats embraced “Obamacare.” To continue, then as now I’ve always approached the WWW as an educator asking, “How can this help me share what I know?” I learned, informally, what I needed to know, when I needed to know it. Dedicated CompSci folks always did much more, and way cooler stuff in much less time (and their stuff scales!). Yet I think knowing their language gives my ideas a better chance of being realized. Continue reading

Nov 04

Cognitive Apprenticeship and the 21st Century Web Application

In my previous post I (literally) talked about a long historical need to provide more information than a written document can physically hold. I pointed out how footnotes have accomplished this, how these and such familiar devices as front-page headlines and teasers have evolved, and continue to evolve in the modern web-browser. I’m doing this to demonstrate how Web browsers and the three main (and open) technologies—HTML, CSS and JavaScript—can support Cognitive Apprenticeship’s goal of “making thinking visible.” Ultimately I hope to encourage classroom teachers to leverage this generation’s immersion in technology in new ways that lead not only to their own empowerment but that of all who become involved in 21st century learning environments that can stretch past boundaries of space and time.

I began to show some actual code1 [to see my “footnotes,” press the number; to close them, click or press Esc] which creates a style that can be applied at the paragraph or section level to assign an icon signalling its content or relevance to the document. I used narration, in the form of recorded audio, with pictures timed to coincide with words—a concept that is the basis of almost all elearning software, TV advertising, documentary film, even political propaganda—to explain and demonstrate what I was thinking about the topic and the technology. If you’ve followed this Cognitive Apprenticeship from the beginning I hope you can start to see now how I’ve intentionally set out to contrast a traditional academic style with an increasingly Web-enhanced one.

In so doing I used technology to solve some problems—and predictably introduced several more, demonstrating another potential technology holds, one I suspect we all have experienced. Software often contains bugs; preparing a lesson plan using pen and paper, or presenting using a comfortable and familiar paradigm such as a slide show with handouts one often feels more in control. It’s often too easy for the technology to become the focus, and not in a good way. But while many classroom teachers tell me anecdotes that conclude with a student fixing something, far fewer tell me they’ve learned to embrace that as a strategy, and are willing to jump in the deep end head first, with ample faith that together they’ll tackle whatever obstacles arise. It’s my personal goal to foster that confidence and empower educators to create such environments. Indeed, I feel there’s a certain urgency, not just for individual teachers or the profession, but for the future of public education itself.

Ursula Franklin, in her famous 1989 Massey Series lecture, noted the changing role of technology and important ways it was changing the role of technologists, distribution of labour, and the balance of power, while in her view shrinking the public sphere.

The situation in the classroom at the interface between the biosphere and the bitsphere is but one facet of the situation in the workplace within the same realm. In fact, often even the designation of workplace is no longer appropriate. Not only do new technologies, new ways of doing things, eliminate specific tasks and workplaces… but the remaining work is frequently done asynchronously in terms of both time and space.
— Ursula Franklin (1992:172)

Her distinction between what she identified as prescriptive approaches2 versus holistic3 ones led to a concern that not working together in the same space causes “opportunities for social interactions, for social learning and community building [to] disappear.” (Franklin, 1992:172). A neoliberal market model of education is paired with a neoconservative social model that work together to “change people’s understanding of themselves as members of collective groups” (Apple, 2009), a course at odds with public education’s heritage of citizenship-, character-, and democracy-building. An aggressive and well-funded movement is under way that “supports marketisation through its clear preference for incentive systems in which people are motivated by personal, not collective, gain rather than by the encouragement of social altruism. Yet, the tradition of social altruism and collective sensibilities has roots just as deep in our nations, and its expression needs to be expanded, not contracted.” (Apple, 2004; Apple, 2009).

Neither of the above authors in the works cited alludes to what I believe can only be described as a new literacy for the 21st century: fluency in coding and code. At Occupy Wall St. the techies “[built] websites, put out messages, manage[d] the ebb and flow of information about the occupation on the Internet.” (Judd, 2011) A year later “TechOps,” as the New York contingent of web-developing occupiers call themselves, built and maintained the website for the Sept. 17 anniversary events. They put together a whole host of other underlying technical infrastructure… TechOps-built database software sits behind a system to match people who needed a place to stay during the demonstrations with people who had space to offer […and built…] what has become a broad suite of web tools built specifically for Occupy activists. Using their own flavor of WordPress’ multi-site functionality, TechOps can facilitate sites like S17NYC.org and allow individual movement groups to maintain their own web presences themselves.” Those who code may have a special understanding of the saying “free as in beer, but not free as in speech” (Judd, 2012).

Franklin, in 1989, was perhaps just a bit too early to fully anticipate the complex socio-politico-economic forces that would result in Twitter, a commercial start-up, empowering the Arab Spring. But Apple’s 2009 essay describes in full the motives and methods we see manifesting in high-stakes testing and redistribution of public resources to private concerns that are part of many ed “reform” efforts. I believe there’s a need for further research into the roles of social networking within emerging communities of practice, but also its influence on communities of practices’ emerging. In the meantime, code literacy is something that’s fun and beneficial to pursue, which you can leverage within many learning environments to help create the kinds of authentic, situated opportunities for discovery and knowledge construction project- and inquiry-based learning models are touted for. And while you probably don’t have the next Dimitri Gaskin in your class, you almost certainly have more expertise available than you’ve imagine or tapped.

All of the jQuery JavaScript scripts I’ve used so far are my own—and all of them contain flaws that were part of my learning process. Currently my Footnotes script works with this WordPress theme (or any theme that uses <article> elements for posts), I simply hit the HTML tab on my WordPress editor and create a <sup> element of class=”footnote” and down below a numbered (“organized”) list of class <ol class=”footnotes”></ol> and it automatically creates a rollover/keypress on the number. In this version I have to hard code the numbers in the <sup> tags… so if I move a list item or add one in between I have to manually renumber. One of the first tasks for a group could be to improve on that. If a classroom or school has a blog or web page, and they use it for student writing, and they encourage using such common conventions as footnotes, then it might be an intrinsically motivating project to design and implement something that facilitates and modernizes the process in a way students can own.

My footnotes script is part-way to becoming a jQuery plugin. You may or may not know what that is, but I’ll wager you know someone who does. It’s only part-way done because I’m  trying to think more like a programmer so I’m learning about design patterns and building in stages. The Smashing Magazine article in that link contains links to all the information one needs to finish it. In my next and hopefully final instalment I’ll talk about a project I have in mind that I think holds benefits for classroom teachers who are still tentative about technology and/or looking for creative ways to include it, one that demystifies programming and the coding culture, and hopefully creates space in the classroom for activities and knowledge that may already be taking place informally outside, extending access and creating new opportunities.

§


    Notes:

  1. For example, if you provide the path to a 36×36 pixel image representing a rubric or video:
    .bg-rubric {
    background: transparent url(“..path_to/rubric.png”) no-repeat 3px 3px; padding:3px 9px 3px 36px;
    }
    .bg-video {
    background: transparent url(“..path_to/video.png”) no-repeat 3px 3px; padding:3px 9px 3px 36px; }
  2. See for example, Harvard Business School’s aggressively disruptive, top down, market-model for education reform in Christensen et al., 2009
  3. See for example, Harvard Graduate School of Education’s “Beyond the Bake Sale: A Community- Based Relational Approach to Parent Engagement in Schools,” (Warren et al., 2009), PDF available from The Logan Square Neighborhood Association http://bit.ly/nYwbjK accessed 2012-11-03

References

Apple, Michael W. (2004). Ideology and curriculum (3rd ed.). New York: Routledge.

Apple, Michael W. (2006), Understanding and Interrupting Neoliberalism and Neoconservatism in Education, Pedagogies: An International
Journal
, 1:1, 21-26

Christensen, Clayton; Johnson, Curtis W.; Horn, Michael B. (2008), Disrupting Class: How disruptive innovation will change the way the world learns. New York: McGraw Hill, 288 pages.

Judd, Nick (2011). #OWS: Tech-Savvy Occupiers Hope to Open-Source a Movement, http://techpresident.com/blog-entry/ows-tech-savvy-occupiers-hope-open-source-movement, accessed 2012-11-03

Judd, Nick (2012). How Free Software Activists are Hacking Occupy’s Source Code, accessed at http://techpresident.com/news/22867/how-free-software-activists-are-hacking-occupys-source-code 2012-10-23

Osmani, Addy (2011). Essential jQuery Plugin Patterns, http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/, accessed 2012-11-03

Franklin, Ursula. (1992, rev ed. 1999) The Real World of Technology. (CBC Massey lectures series.) Concord, ON: House of Anansi Press Limited, 206 pages.

Kreiss, Daniel and Tufekci, Zeynep (2012). Occupying the Political: Occupy Wall Street, Collective Action, and the Rediscovery of Pragmatic Politics (September 17, 2012). Cultural Studies – Critical Methodologies, 13:3 (Forthcoming). Available at SSRN: http://ssrn.com/abstract=2147711

Warren, Mark R.; Hong, Soo; Rubin Leung, Carolyn; Uy, Phitsamay Sychitkokhong (2009). Beyond the Bake Sale: A Community- Based Relational Approach to Parent Engagement in Schools, Teachers College Record Volume 111, Number 9, September 2009, pp. 2209–2254

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.

Aug 15

The current “state” of WAI-ARIA adoption and its “role” in accessibility

March 2014 UPDATE 2014: WAI-ARIA 1.0 is a completed W3C Recommendation as of March, 2014. Check current status

The WAI-ARIA project began in the fall of 2006. ARIA stands for “Accessible Rich Internet Applications,” by which it means web-based applications using CSS and JavaScript to change page elements without reloading the page. ARIA provides a means for the changes to communicate with assistive technologies.

“…I worked with a web project manager who was unfamiliar with ARIA, …and ended up interviewing half a dozen upcoming young developers, none of whom had heard of it either! Had the Web Accessibility Initiative’s initiative failed, …was ARIA D.O.A.?”

It came to my attention at that time due to my involvement with a group of teacher educators at the Faculty of Education at York U, Toronto. I admit I wasn’t able to make a great deal of sense of it until they published a Primer and a guide on Authoring Practice in 2010, and even so it remains daunting. Yet I believe in ARIA and what it’s trying to do, and I know of no other meaningful solution in the works. So I was disappointed and somewhat baffled when at my job in 2011 I worked with a web project manager who was unfamiliar with ARIA, and then, in the course of the project, ended up interviewing half a dozen upcoming young developers, none of whom had heard of it either! Had the Web Accessibility Initiative’s initiative failed, …was ARIA DOA?

Jutta Treviranus is Director and Professor at the Inclusive Design Institute at OCAD University. She’s explained at length the many challenges faced by people with differing abilities even if they’re using assistive technology, which involve availability, cost and compatibility issues far more convoluted than many of us may imagine. I recently had the chance to ask her some questions about ARIA adoption, and she’s graciously allowed me  to share her answers (and they let my colleagues off the hook!). Continue reading