Accessify Wiki
Register
Advertisement

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

...
Advertisement