(Initial version of OER evidence hub.) |
(Fixes - removed excess markup <span>, plus fixed indentation - "?" to spaces!!) |
||
Line 1: | Line 1: | ||
+ | Accessibility and usability enhancements for the OER Evidence Hub research site, including the SVG map bits, [[wikipedia:Sankey diagram]], and so on. |
||
+ | Note, the SVG here is a lot more amenable to fixes that the HTML5 canvas + SVG on [[PhET simulations]]. |
||
+ | |||
+ | Developer: Martin Hawksey [[linkedin.com:in/..]]. |
||
<source lang="yaml"> |
<source lang="yaml"> |
||
+ | %YAML 1.2 |
||
− | <span style="font-size:1.3em;line-height:1.7em;">%YAML 1.2</span> |
||
− | |||
--- |
--- |
||
− | |||
_CONFIG_: |
_CONFIG_: |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
+ | 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}} |
|
⚫ | |||
⚫ | |||
+ | 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 |
||
+ | a#evidence-map-fullscreen: |
||
⚫ | |||
+ | title: Toggle map full screen |
||
+ | svg g#map: |
||
⚫ | |||
+ | title: The map |
||
+ | svg g#map path.country[d ^= 'M687.02']: |
||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> about_urls:</span></p> |
||
+ | 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']: |
||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - "mashe.hawksey.info:2013/10/building-an-evidence-hub-plugin-for-wordpress"</span></p> |
||
+ | title: United States, including Alaska and Hawaii. |
||
+ | aria-label: United States |
||
+ | svg g#map path.country[d ^= 'M579.312']: |
||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - "github.com:mhawksey/wp-evidence-hub"</span></p> |
||
+ | title: Brazil |
||
+ | svg g#barchart: |
||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - "github.com:bdougherty/BigScreen"</span></p> |
||
+ | title: Bar chart of...? |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - "wikipedia:Sankey_diagram"</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> - "mashe.hawksey.info:2013/03/sankey-your-google-spreadsheet-data-d3js"</span></p> |
||
− | |||
⚫ | |||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"># FIXES.</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">a[href = '#'], a[data-toggle=modal], a[href = 'javascript:;'], a[href = 'javascript:void(0)']:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> _note: "Stackoverflow:questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0"</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> role: button</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">a[target = _blank]:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> role: Opens in new window</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">a#evidence-map-fullscreen:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: Toggle map full screen</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#map:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: The map</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#map path.country[d ^= 'M687.02']:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: United Kingdom</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> aria-label: United Kingdom</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> _note: Will these country-labels actually improve accessibility? Needs testing!</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#map path.country[d ^= 'M373.119']:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: United States, including Alaska and Hawaii.</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> aria-label: United States</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#map path.country[d ^= 'M579.312']:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: Brazil</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#barchart:</span></p> |
||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;"> title: Bar chart of…?</span></p> |
||
− | |||
− | |||
− | |||
− | <p dir="ltr" style="line-height:1.15;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:15px;font-family:Arial;color:#000000;font-weight:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">svg g#sandisplay:</span></p> |
||
− | |||
− | <span style="font-size:15px;font-family:Arial;color:rgb(0,0,0);white-space:pre-wrap;"> title: Sankey diagram of…?</span> |
||
+ | svg g#sandisplay: |
||
+ | title: Sankey diagram of...? |
||
... |
... |
||
− | |||
</source> |
</source> |
||
+ | __NOWYSIWYG__ |
||
− | |||
− | <span style="font-size:1.3em;line-height:1.7em;">__NOWYSIWYG__</span> |
||
[[Category:Fix]] |
[[Category:Fix]] |
||
[[Category:SVG]] |
[[Category:SVG]] |
Revision as of 10:26, 5 November 2013
Accessibility and usability enhancements for the OER Evidence Hub research site, including the SVG map bits, wikipedia:Sankey diagram, and so on.
Note, the SVG here is a lot more amenable to fixes that the HTML5 canvas + SVG on PhET simulations.
Developer: Martin Hawksey [[linkedin.com:in/..]].
%YAML 1.2
---
_CONFIG_:
includes:
- http://sites.hawksey.info/oerhub/*
test_urls:
- http://sites.hawksey.info/oerhub/
- http://chaos.open.ac.uk/
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
a#evidence-map-fullscreen:
title: Toggle map full screen
svg g#map:
title: The 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...?
...