Merge pull request #75 from ginetta/v2/accessibility

Adds accessibility audit task.

gulp/config.js

@@ -50,14 +50,14 @@ module.exports = function () {
   };
 
   var appFiles = {
-    scripts:  paths.scripts.src + '**/*.js',
-    styles:   paths.styles.src + '**/*.scss',
-    content:  paths.content.src + '**/*.yml',
-    pages:    paths.pages.src + '**/*.jade',
-    images:   paths.images.src + '**/*',
-    logos:    paths.logos.src + '**/*',
-    favicons: paths.favicons.src + '**/*',
-    fonts:    paths.fonts.src + '**/*'
+    scripts:   paths.scripts.src + '**/*.js',
+    styles:    paths.styles.src + '**/*.scss',
+    content:   paths.content.src + '**/*.yml',
+    pages:     paths.pages.src + '**/*.jade',
+    images:    paths.images.src + '**/*',
+    logos:     paths.logos.src + '**/*',
+    favicons:  paths.favicons.src + '**/*',
+    fonts:     paths.fonts.src + '**/*'
   };
 
   var components = [

gulp/tasks/accessibility.js

@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = function (gulp, $, config) {
+
+  var srcFiles = config.paths.pages.dest + '**/*.html';
+
+  return function () {
+    return gulp.src(srcFiles)
+      .pipe($.a11y())
+      .pipe($.a11y.reporter())
+      .pipe($.accessibility({
+        reportLevels: {
+          notice: false
+        }
+      }));
+  };
+};

gulp/tasks/pages.js

@@ -6,6 +6,7 @@ var path          = require('path');
 var pageshelpers  = require('../utils/pagesHelpers');
 var handleError   = require('../utils/handleError');
 
+
 module.exports = function (gulp, $, config) {
   var srcFiles           = config.appFiles.pages;
   var destFiles          = config.paths.pages.dest;
@@ -57,7 +58,8 @@ module.exports = function (gulp, $, config) {
                 return {
                   data:         loadContent(language),
                   relativePath: getRelativePath(file, language),
-                  helpers:      moduleHelpers
+                  helpers:      moduleHelpers,
+                  language:     language
                 };
               }))
               .pipe($.jade({

gulpfile.js

@@ -31,6 +31,11 @@ gulp.task('deploy',
           t.getTask('deploy'));
 
 
+gulp.task('test',
+          'Tests the built project in terms of accessibility.',
+          ['test:accessibility']);
+
+
 ///////////////
 // Secondary //
 ///////////////
@@ -61,6 +66,13 @@ gulp.task('build:assets',
           false,
           t.getTask('assets'));
 
+
+// Moves all the assets to the build
+gulp.task('test:accessibility',
+          false,
+          ['build'],
+          t.getTask('accessibility'));
+
 // Cleans the build folder
 gulp.task('clean',
           false,

package.json

@@ -13,6 +13,8 @@
     "browser-sync": "^2.6.5",
     "del": "^1.1.1",
     "gulp": "^3.8.11",
+    "gulp-a11y": "^0.1.1",
+    "gulp-accessibility": "^1.2.1",
     "gulp-autoprefixer": "^2.2.0",
     "gulp-changed": "^1.2.1",
     "gulp-concat": "^2.5.2",

src/layouts/default.jade

@@ -1,6 +1,6 @@
 doctype html
 
-html
+html(lang=language)
   head
     meta(charset='utf-8')
     meta(http-equiv='X-UA-Compatible', content='IE=edge')

src/pages/index.jade

@@ -4,9 +4,10 @@ include ../elements/**/*.jade
 extends ../layouts/default
 
 block meta
+  title project-name
   //- TODO: add you page meta tags
 
 block body
   .about.l-absolute-centered
     +header(data.index.header)
-      p!= helpers.markdown(data.index.content)
+      != helpers.markdown(data.index.content)

src/styles/_3.base.scss

@@ -27,8 +27,7 @@ body, html {
 }
 
 a {
-  color: $c-graphite;
-  text-decoration: none;
+  color: $c-silver;
 }
 
 .about {