Accessify Wiki

Accessibility and usability enhancements for the OER Evidence Hub and LACE learning analytics research sites, including the SVG map bits, Sankey diagrams, 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.

JuxtaLearn fixes moved to: Fix:JuxtaLearn.


%YAML 1.2
---
_CONFIG_:
    includes:
        - http://oermap.org/*
        - http://evidence.laceproject.eu/*
    test_urls:
        - http://oermap.org/
        - http://evidence.laceproject.eu/
        - http://chaos.open.ac.uk
        - http://sites.hawksey.info/oerhub/
    about_urls:
        - "mashe.hawksey.info:2013/10/building-an-evidence-hub-plugin-for-wordpress"
        - "github.com:mhawksey/wp-evidence-hub"
        - "github.com:bdougherty/BigScreen"
        - "wikipedia:Sankey_diagram"
        - "mashe.hawksey.info:2013/03/sankey-your-google-spreadsheet-data-d3js"

    name: {{PAGENAME}}
    description: ""
    default_locale: en-GB
    authors:
        - Nick @nfreear
    created: 2013-10-30


# FIXES.

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

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

...