Accessibility and usability enhancements for the JuxtaLearn Tricky Topic tool, Diagnostic Quiz and ClipIt. This includes SVG map bits, Sankey diagram, and so on.
Note, the SVG here is a lot more amenable to fixes than the HTML5 canvas + SVG on PhET simulations.
Developer: Martin Hawksey linkedin.com:in/mhawksey, twitter.com:mhawksey and Nick Freear.
These fixes were "forked" from: Fix:OER Evidence Hub.
%YAML 1.2
---
_CONFIG_:
includes:
- http://*juxtalearn.net/*
test_urls:
- http://trickytopic.juxtalearn.net/maps-summary-by-country/#
- http://trickytopic.juxtalearn.net/juxtalearn-quiz/4/?embed=1
- http://juxtalearn.net/wp-admin/
- http://clipit.juxtalearn.net
- http://www.juxtalearn.net
- http://test.juxtalearn.net
- http://dev.juxtalearn.net
- http://jxl1.escet.urjc.es/clipit_dev/activity
- http://juxtalearn.org/sandbox/clipit_befe
- http://sites.hawksey.info/juxtalearn/
about_urls:
- "github.com:IET-OU/oer-evidence-hub-org#juxtalearn"
- "github.com:jewlofthelotus/SlickQuiz-WordPress"
- "github.com:juxtalearn/clipit"
name: {{PAGENAME}}
description: ""
default_locale: en-GB
authors:
- Nick @nfreear
created: 2014-05-18
## Please apply fixes in iframes!
iframe: yes
#
# FIXES - generic.
#
a[href = '#'], a[data-toggle=modal], a[href = 'javascript:;'], a[href = 'javascript:void(0)']:
_note: "Stackoverflow:questions/134845/href-attribute-for-javascript-links-or-ja.."
role: button
a[target = _blank]:
role: Opens in new window
#
# Fixes - ClipIt (Elgg)
# (Note - includes placeholders for Spanish translations..)
#
.sticky-wrapper .navbar-right:
role: navigation
aria-label: Main site menu
aria-label.es: Menú del sitio principal
.navbar-nav a[href *= 'action/logout']:
title: Log out
title.es: Salir
.navbar-nav li.separator:
_note: "'Hiding' a visual separator (' | ')"
aria-hidden: true
header .search-form:
role: search
aria-label: ClipIt search
header .search-form input[name = q]:
aria-label: Search term
#placeholder: Search
header .search-form button:
title: Search
# ClipIt registration form.
.elgg-form-register input[name = name]:
id: name
.elgg-form-register [name = email]:
id: email
type: email
#...
# ClipIt login form.
"#modal-login button.close":
title: Close login form
aria-hidden: false
.elgg-form-login-modal:
role: form
aria-labelledby: "#modal-login .modal-title"
".elgg-form-login-modal #inputUsername":
aria-labelledby: .elgg-form-login-modal label[for = exampleInputEmail1]
".elgg-form-login-modal #inputPassword":
aria-labelledby: .elgg-form-login-modal label[for = exampleInputPassword1]
#
# Fixes - Tricky Topic tool (WordPress)
#
header:
role: banner
"#site-navigation":
role: navigation
footer:
role: contentinfo
"#content":
role: main
html:
lang: en-GB
# SVG map etc.
"#fullscreen-button a":
role: button
title: Enter full screen mode (map)
svg g#map:
title: World map
svg g#map path.country[d ^= 'M687.02']:
title: United Kingdom
aria-label: United Kingdom
_note: Will these country-labels actually improve accessibility? Needs testing!
svg g#map path.country[d ^= 'M373.119']:
title: United States, including Alaska and Hawaii.
aria-label: United States
svg g#map path.country[d ^= 'M579.312']:
title: Brazil
svg g#barchart:
title: Bar chart of...?
svg g#sandisplay:
title: Sankey diagram of...?
aria-labelledby: "#juxtalearn-map svg g#sandisplay text.santitle"
"#juxtalearn-map #impressum":
title: Impressum
"#juxtalearn-map #ui":
title: Customize map
".page #wpadminbar":
role: navigation
aria-label: Admin menu (in-page)
#
# Wordpress admin
#
".wp-admin #adminmenu":
role: navigation
aria-label: Admin menu
.wp-admin .postbox .handlediv:
role: button
tabindex: 0
title: Click to toggle
".wp-admin #collapse-menu":
role: button
tabindex: 0
title: Collapse/ expand menu
#
# SlickQuiz-WordPress
# github.com:jewlofthelotus/SlickQuiz-WordPress/blob/master/js/admin.js
#
.slickQuiz .QuizTitle label:
for: input#QuizTitle
.slickQuiz .JL-Quiz-Tricky-Topic label:
for: select#jlq-trickytopic
.slickQuiz .MainCopy label:
for: textarea#MainCopy
# WAS: for: input#MainCopy
.slickQuiz .ResultCopy label:
for: textarea#ResultCopy
.slickQuiz .Level1small81100Bestsmall:
for: input#Level1small81100Bestsmall
.questionSet .question.actual label:
for: .questionSet .actual textarea
.questionSet .question.correct label:
for: .questionSet .correct textarea
.questionSet .question.incorrect label:
for: .questionSet .incorrect textarea
.questionSet .question.answer label:
for: .questionSet .answer input
# WAS: for: .. textarea
.slickQuiz .questionSetOptions a, .toggleSets a, .addAnswer a, .addQuestion a, a#removeAnswer:
##a#toggleQuestion, a#moveQuestion, a#removeQuestion:
role: button
# SlickQuiz-WordPress student UI.
# github.com:jewlofthelotus/SlickQuiz-WordPress/blob/master/php/slickquiz-front.php
.slickQuizWrapper .nameLabel label:
for: .slickQuizWrapper .nameLabel input
.slickQuizWrapper .emailLabel label:
for: .slickQuizWrapper .emailLabel input
...