From 97d124e7d9b087c426c4e07c79cd3e626e01bb3c Mon Sep 17 00:00:00 2001 From: andrewmbacon Date: Tue, 24 Jun 2014 08:33:01 -0400 Subject: [PATCH] Accessibility Features added skip links, a simple alt tag scanner, also wrote anti-layout table styles. --- header.php | 8 +++++- js/cs.js | 48 ++++++++++++++++++++++++++++++++ js/min/cs.min.js | 2 +- style.css | 67 +++++++++++++++++++++++++++++++++++++++++++++ style.scss | 71 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 194 insertions(+), 2 deletions(-) diff --git a/header.php b/header.php index f549164..33c5e80 100755 --- a/header.php +++ b/header.php @@ -24,7 +24,13 @@ -> + > +
') + block.addClass('alert alert-danger accessibility-fail-msg') + //console.log(e.width()) + block.width(e.width+'px') + + var icon = $('') + icon.addClass('glyphicon glyphicon-ban-circle') + + var msg = $('') + msg.append(' This image needs a valid Alt tag. ') + + + block.append(icon).append(msg) + $(e).after(block) + } + $('#page img').each(function(){ + alt = $(this).attr('alt') + if (alt){ + alt = alt.toLowerCase() + //console.log('alt='+alt) + if (alt.indexOf('.jpg') >= 0 || alt.indexOf('.png') >= 0 || alt.indexOf('.gif') >= 0 ){ + $(this).addClass('accessibility-fail') + imageWarning(this) + } + } else { + $(this).addClass('accessibility-fail') + imageWarning(this) + } + }) + // adds default bootstrap styles to all tables. + $('#page table').each(function(){ + $(this).addClass('table') + }) + + /**/ + + + }) \ No newline at end of file diff --git a/js/min/cs.min.js b/js/min/cs.min.js index cb965c3..6fa862f 100644 --- a/js/min/cs.min.js +++ b/js/min/cs.min.js @@ -1 +1 @@ -jQuery(document).ready(function(n){var p=location.href,a=p.split("/"),l=a[2],i=["3g2","3gp","avi","doc","docx","dotx","gif","jpg","jpeg","m4a","mid","midi","mov","mp3","mp4","mpg","odt","ogg","ogv","pdf","png","ppt","pptx","xls","xlsx","wav","wmv","zip","vsd"];n("#page a").each(function(){var p=n(this).attr("href"),a=n(this).children("img").length,t=null,e=null,s=null,d=null;if("#"!=p.charAt(0)&&0==a){var g=p.split("/");if(t=g[2],t!=l){var o='';n(this).addClass("external").prepend(o)}e=g[g.length-1]||"";var c=e.split(".");c[1]&&n.each(i,function(p,a){a==c[1]&&(d=n(''),s=c[1],d.append("."+s))}),null!=d&&n(this).append(d)}})}); \ No newline at end of file +jQuery(document).ready(function(a){function i(i){var t=a("
");t.addClass("alert alert-danger accessibility-fail-msg"),t.width(i.width+"px");var l=a("");l.addClass("glyphicon glyphicon-ban-circle");var n=a("");n.append(' This image needs a valid Alt tag. '),t.append(l).append(n),a(i).after(t)}var t=location.href,l=t.split("/"),n=l[2],s=["3g2","3gp","avi","doc","docx","dotx","gif","jpg","jpeg","m4a","mid","midi","mov","mp3","mp4","mpg","odt","ogg","ogv","pdf","png","ppt","pptx","xls","xlsx","wav","wmv","zip","vsd"];a("#page a").each(function(){var i=a(this).attr("href"),t=a(this).children("img").length,l=null,e=null,p=null,d=null;if("#"!=i.charAt(0)&&0==t){var c=i.split("/");if(l=c[2],l!=n){var g='';a(this).addClass("external").prepend(g)}e=c[c.length-1]||"";var h=e.split(".");h[1]&&a.each(s,function(i,t){t==h[1]&&(d=a(''),p=h[1],d.append("."+p))}),null!=d&&a(this).append(d)}}),a("#page img").each(function(){alt=a(this).attr("alt"),alt?(alt=alt.toLowerCase(),(alt.indexOf(".jpg")>=0||alt.indexOf(".png")>=0||alt.indexOf(".gif")>=0)&&(a(this).addClass("accessibility-fail"),i(this))):(a(this).addClass("accessibility-fail"),i(this))}),a("#page table").each(function(){a(this).addClass("table")})}); \ No newline at end of file diff --git a/style.css b/style.css index ccf21cf..6deb988 100755 --- a/style.css +++ b/style.css @@ -318,3 +318,70 @@ object { .gallery-columns-9 .gallery-item { max-width: 11.11%; } + +/* Accessibility Tests */ +.accessibility-fail { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + filter: grayscale(100%); + opacity: .3; +} + +.accessibility-fail-msg { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.accessibility-fail-msg .glyphicon { + color: red; + margin-right: 1em; +} + +.accessibility-fail-msg a { + text-decoration: underline; +} + +/* Table stripper - removes all styles from elements within tables. */ +html, table body, table div, table span, table applet, table object, table iframe, table +h1, table h2, table h3, table h4, table h5, table h6, table p, table blockquote, table pre, table +a, table abbr, table acronym, table address, table big, table cite, table code, table +del, table dfn, table em, table img, table ins, table kbd, table q, table s, table samp, table +small, table strike, table strong, table sub, table sup, table tt, table var, table +b, table u, table i, table center, table +dl, table dt, table dd, table ol, table ul, table li, table +fieldset, table form, table label, table legend, table +article, table aside, table canvas, table details, table embed, table +figure, table figcaption, table footer, table header, table hgroup, table +menu, table nav, table output, table ruby, table section, table summary, table +time, table mark, table audio, table video { + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + font-size: 100% !important; + font: inherit !important; + vertical-align: baseline !important; +} + +/* HTML5 display-role reset for older browsers */ +table article, table aside, table details, table figcaption, table figure, table +footer, table header, table hgroup, table menu, table nav, table section { + display: block !important; +} + +table body { + line-height: 1 !important; +} + +table ol, table ul { + list-style: none !important; +} + +table blockquote, table q { + quotes: none !important; +} + +table blockquote:before, table blockquote:after, table +q:before, table q:after { + content: "" !important; + content: none !important; +} diff --git a/style.scss b/style.scss index 62a4e48..3a35f2a 100644 --- a/style.scss +++ b/style.scss @@ -346,3 +346,74 @@ object { } .gallery-caption {} + +/* Accessibility Tests */ +@mixin grayscale_element($value) { + -webkit-filter: grayscale($value); + -moz-filter: grayscale($value); + filter: grayscale($value); +} + + + + +.accessibility-fail { + @include grayscale_element(100%); + opacity: .3; +} + +.accessibility-fail-msg { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + .accessibility-fail-msg .glyphicon { + color:red; + margin-right: 1em; + } + .accessibility-fail-msg a { + text-decoration: underline; + } + + + +/* Table stripper - removes all styles from elements within tables. */ + +html, table body, table div, table span, table applet, table object, table iframe, table +h1, table h2, table h3, table h4, table h5, table h6, table p, table blockquote, table pre, table +a, table abbr, table acronym, table address, table big, table cite, table code, table +del, table dfn, table em, table img, table ins, table kbd, table q, table s, table samp, table +small, table strike, table strong, table sub, table sup, table tt, table var, table +b, table u, table i, table center, table +dl, table dt, table dd, table ol, table ul, table li, table +fieldset, table form, table label, table legend, table +article, table aside, table canvas, table details, table embed, table +figure, table figcaption, table footer, table header, table hgroup, table +menu, table nav, table output, table ruby, table section, table summary, table +time, table mark, table audio, table video { + margin: 0!important; + padding: 0!important; + border: 0!important; + font-size: 100%!important; + font: inherit!important; + vertical-align: baseline!important; +} +/* HTML5 display-role reset for older browsers */ +table article, table aside, table details, table figcaption, table figure, table +footer, table header, table hgroup, table menu, table nav, table section { + display: block!important; +} +table body { + line-height: 1!important; +} +table ol, table ul { + list-style: none!important; +} +table blockquote, table q { + quotes: none!important; +} +table blockquote:before, table blockquote:after, table +q:before, table q:after { + content: ''!important; + content: none!important; +} +