(Adding "ClipIt" fixes and enhancements.) |
(Adding categories) |
||
Line 248: | Line 248: | ||
[[Category:Wordpress]] |
[[Category:Wordpress]] |
||
[[Category:Elgg]] |
[[Category:Elgg]] |
||
+ | [[Category:IET-OU]] |
Latest revision as of 15:02, 19 September 2014
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
...