IET NNCO / Pearl accessibility fixes mockup – via bookmarklet (WAI-ARIA)

nnco-pearl-accessibility-a11y-fixes.marklet.js

/*!
  IET NNCO / Pearl accessibility fixes mockup – via bookmarklet (WAI-ARIA)

  Nick Freear, 25 July 2016.

  NOTE: the site is a work-in-progress, so many of the issues identified below
	are likely to be in the developer's backlog. They are listed for completeness.


  https://gist.github.com/nfreear/7c83a81625c90a6ded7ec2c3aa1860a1
  http://w3.org/TR/wai-aria/roles


javascript:(function(){
  var d=document,j=d.createElement("script");
  j.src='//dl.dropbox.com/u/XXX/wai-aria/ou/pearl-a11y-fixes.js';
  d.getElementsByTagName('body')[0].appendChild(j);
})();


//d.getElementsByTagName('head')[0].appendChild(j);
*/


(function (W) {

	"use strict";

    var
	  // 1. Selector -> HTML attribute fixes.
	  accessibility_fixes = {
		  "#header .logo img": {
			alt: "Pearl home (Part time education for adults returning to learn)"
		},
    "#search-container input[ name = s ], button.fa-search": {
			"aria-label": "Search"
		},
		"#header button.btn-mobile": {
			"aria-label": "Expand/ collapse navigation"
		},
    "a#toTop": {
			title: "To the top"
		},

		"img[ src *= pearl-homepage-banner ]": {
			alt: "",
			role: "decoration"
		},

    // I'm assuming some of these images are being used as mockup only. To be safe though:
		"img[ src *= homepage-lowerstrip ]": {
			alt: "Our advice tool can help you decide which course to take in less than 5 minutes. " +
			  "Important steps to help plan your learning. Learn from the success of others."
		},
		"img[ src *= logo-strip ]": {
			alt: "UNISON; WEA; unionlearn; Social Partnerships Network; NCVO; learndirect; nec; " +
			  "Learning and work institute; Leonard Cheshire Disability; NNCO; Association of Colleges (AoC)"
		},

		"a[ href *= surveymonkey ]": {
			// Add HTML:  <span class="sr-only"> via Surveymonkey - opens in new window</span>
			"aria-label": "Website feedback via Surveymonkey – opens in new window",
			title: "Website feedback via Surveymonkey – opens in new window"
		},

    // Some WAI-ARIA landmark roles.
		"#header": {
			role: "banner"
		},
		"#topNav": {
			role: "navigation",
			"aria-label": "Main menu"
		},
		"#footer": {
			role: "contentinfo"
		},
		"#footer #col2": {
			role: "navigation",
			"aria-label": "Useful links and Learning overview"
		},
		"#footer #col3": {
			role: "navigation",
			"aria-label": "Advice & Support"
		},
		".cc_banner-wrapper": {
			role: "alert",
			"aria-label": "Cookie notice"
		},


		// Stylesheet fixes array.
		CSS: [
			// Try to restore CSS outlines on keyboard focus.
			"html>body a:focus, html>body input:focus, html>body .form-control:focus, html>body .btn:focus, html>body button:focus { outline: 2px solid darkorange !important; outline-offset: 4px; transition: all .5s; }",
			// Cookie notice - increase colour contrast.
			".cc_container { color: #666;  }",  //Was: #999;
			".cc_container a { color: navy; }",
			// Suggestion - increase contrast on footer links, slightly.
			"#footer li a { color: #aaa; }"  //Was: #999;
		]
	  }
	  , url_re = /http:\/\/cadmos\.open\.ac\.uk\//
  	  , $ = W.jQuery
  	  , C = W.console;


	if (! W.location.href.match(url_re)) {
		C && C.log("Non-NNCO/ Pearl URL. Exiting.");
		return;
	}


	$.each(accessibility_fixes, function (sel, fixes) {
		if ('CSS' === sel) {
			C && C.log("Skipping CSS.");
			return;
		}

		$(sel).attr(fixes);
	});


	// 3. Inject a CSS stylesheet.
	$("head").append(
			'<style id="a11y-fixes-css">' + accessibility_fixes.CSS.join("\n") + '</style>');



	$("html").addClass("a11y-fixes-js-complete");

	C && C.log("NNCO/Pearl accessibility fixes. End.");

})(window);

//End.