bbc-a11y 0.0.12 → 0.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d8df36f88dadb635f0d2de52661d26fcce169ecf
-  data.tar.gz: 9260e8f08cf9846a400900516cf63c8fe789920b
+  metadata.gz: 10a369a2db0ae8f7e5b16e92a0f57e12ac3343be
+  data.tar.gz: 1b733f1a53afad2c0d200f801ec95ff6ed2ed7c1
 SHA512:
-  metadata.gz: b580f97a7dc87d151d4693e259d62b050b4d5c087ff6d485a390daad502f04ef82aabfc648a95c2b941774c2a0dc35348ca89c0759ec578114fe64838b68c800
-  data.tar.gz: 39ee8ec689f4bae55ab38261388f2a0e672ffe1f78815eb6cddd0a4acc792240a1783db15dd93a97732105f1446cdb579c39940b93958cf67bb0b863f3505e01
+  metadata.gz: 79571febea89695f33ae26639f47567dec98e73bed577c5ade2559db0b3235db15c3ec6245c5a6878598eda8f5ef163dd67b8c0df61603fb15c3ffe6779bd8db
+  data.tar.gz: de1ff17432e5fe20a0e67572fdbb0b973ff835d86620a12b7f3e63abe28ecb557ec7e7e824c488832c5cad9f19ea45cc962d23e4f084cc5dcc55c48ddff9c1d7

data/.ruby-version

@@ -0,0 +1 @@
+2.2.3

data/README.md

@@ -1,3 +1,5 @@
+[![Circle CI](https://circleci.com/gh/cucumber-ltd/bbc-a11y.svg?style=svg&circle-token=00d656fd091643ad692c78ca60e30ad95df9563a)](https://circleci.com/gh/cucumber-ltd/bbc-a11y)
+
 # WARNING - PROTOTYPE SOFTWARE
 
 This project is still at an experimental / proof-of-concept stage. Please set your expectations appropriately, but *do* [give us as much feedback](https://github.com/cucumber-ltd/bbc-a11y/issues) as you can.
@@ -32,24 +34,20 @@ Now install the gem:
 You'll need to configure a11y with a set of URLs to run the checks against. Create a file `a11y.rb` in the root of your project that looks something like this:
 
 ```
-BBC::A11y.configure do
-  page "http://bbc.co.uk"
-  page "http://bbc.co.uk/news"
-end
+page "http://bbc.co.uk"
+page "http://bbc.co.uk/news"
 ```
 
 ### Skipping scenarios
 
-Nobody's perfect. Use `skip_scenario` in the configuration to opt-out of certain checks.
+Nobody's perfect. Use `skip_standard` in the configuration to opt-out of certain checks.
 
 ```
-BBC::A11y.configure do
-  page "http://bbc.co.uk" do
-    skip_scenario /W3C/
-  end
-
-  page "http://bbc.co.uk/news"
+page "http://bbc.co.uk" do
+  skip_standard /W3C/
 end
+
+page "http://bbc.co.uk/news"
 ```
 
 A11y will skip any scenarios from the specifications whose name contains that string.

data/Rakefile

@@ -4,9 +4,9 @@ Bundler::GemHelper.install_tasks
 task default: [:unit, :acceptance]
 
 task :unit do
-  sh "rspec"
+  sh "bundle exec rspec"
 end
 
 task :acceptance do
-  sh "cucumber"
+  sh "bundle exec cucumber"
 end

data/a11y.rb

@@ -0,0 +1,5 @@
+page "https://bbc.co.uk/news" do
+  skip_standard /W3C/
+  skip_standard /JavaScript/
+  skip_standard /title/
+end

data/bbc-a11y.gemspec

@@ -13,16 +13,14 @@ Gem::Specification.new do |s|
   s.license     = "MIT"
   s.required_ruby_version = ">= 1.9.3"
 
-  s.add_dependency 'cucumber', '~> 2.0.0.rc'
-  s.add_dependency 'rspec',  '~> 3.0'
   s.add_dependency 'capybara'
-  s.add_dependency 'poltergeist'
-  s.add_dependency 'w3c_validators'
-  s.add_dependency 'cld'
   s.add_dependency 'colorize'
+
+  s.add_development_dependency 'rspec',  '~> 3.0'
   s.add_development_dependency 'aruba'
   s.add_development_dependency 'pry'
   s.add_development_dependency 'rake'
+  s.add_development_dependency 'cucumber'
 
   s.rubygems_version = ">= 1.6.1"
   s.files            = `git ls-files`.split("\n").reject {|path| path =~ /\.gitignore$/ }

data/bin/a11y

@@ -2,5 +2,5 @@
 $:.unshift(File.dirname(__FILE__) + '/../lib') unless $:.include?(File.dirname(__FILE__) + '/../lib')
 
 require 'bbc/a11y/cli'
-require 'bbc/a11y/cucumber_runner'
-BBC::A11y::CLI.new($stdin, $stdout, $stderr, ARGV.dup).call(BBC::A11y::CucumberRunner)
+
+BBC::A11y::CLI.new($stdin, $stdout, $stderr, ARGV.dup).call

data/examples/bbc-pages/a11y.rb

@@ -1,6 +1,2 @@
-BBC::A11y.configure do
-
-  page "http://bbc.co.uk/news"
-  page "http://bbc.co.uk/mundo"
-
-end
+page "http://bbc.co.uk/news"
+page "http://bbc.co.uk/mundo"

data/examples/local-web-app/Gemfile

@@ -1,4 +1,4 @@
 source 'https://rubygems.org'
 
 gem 'rack'
-gem 'bbc-a11y', path: '..'
+gem 'bbc-a11y', path: '../..'

data/examples/local-web-app/a11y.rb

@@ -36,29 +36,17 @@ class Server
 end
 
 server = Server.new
+server.start
 
-BBC::A11y.configure do
-
-  before_all do
-    server.start
-  end
-
-  after_all do
-    server.stop
-  end
-
-  page "http://localhost:#{server.port}/perfect.html" do
-    skip_scenario "W3C"
-  end
+at_exit do
+  server.stop
+end
 
-  page "http://localhost:#{server.port}/missing_header.html" do
-    skip_scenario "W3C"
-    skip_scenario "Check headings"
+page "http://localhost:#{server.port}/perfect.html" do
+  skip_standard "W3C"
+end
 
-    customize_world do
-      def Xassert_title_describes_primary_content_of_document(title, doc)
-        puts "TODO"
-      end
-    end
-  end
+page "http://localhost:#{server.port}/missing_header.html" do
+  skip_standard "W3C"
+  skip_standard "Check headings"
 end

data/features/check_standards/focusable_controls.feature

@@ -0,0 +1,62 @@
+Feature: Focusable Controls
+
+  Controls for JavaScript enhanced interactions **must** be `<a>`, `<button>`,
+  or `<input>` elements if that is the only mechanism for controlling them.
+
+  `<a>` elements used for controls **must** have an `href` attribute.
+
+  Controls that have no purpose without JavaScript **must not** be added to the
+  page before the associated code is available capable of running.
+
+  Rationale
+  =========
+
+  When creating controls for user interaction with JavaScript enhanced features,
+  for example a carousel with previous and next controls, the controls must be
+  implemented with elements that provide natively focusable elements with click,
+  keydown, and focus events so they are accessible to keyboard as well as
+  pointing device users. If there is an alternative method of controlling the
+  feature, for example a carousel that automatically displays new content when
+  it receives content then controls that are only available to pointing device
+  users can be used.
+
+  In general, use `<a>` elements when there is a URL associated with the
+  interaction when JavaScript is not enabled, and `<button>` elements for
+  interactions that don't have an associated URL.
+
+  `<a>` elements without a `href` attribute are not keyboard accessible, and
+  therefore must not be used for controls.
+
+  When there is no core (non-JavaScript) interaction then the control must not
+  be added to the document before the associated JavaScript is capable of
+  running as this would lead to controls that apparently do nothing, potentially
+  causing confusion to users.
+
+  Scenario: All anchor tags have href attributes
+    Given a page with the HTML:
+      """
+      <button type="button">Open panel</button>
+      <ul>
+          <li><a href="/news">News</a></li>
+          <li><a href="#sporttab">Sport</a></li>
+          <li><a href="#entertainmenttab">Entertainment</a></li>
+      </ul>
+      """
+    When I validate the anchor hrefs standards
+    Then it passes
+
+  Scenario: Some anchor tags do not have href attributes
+    Given a page with the HTML:
+      """
+      <ul>
+          <li><a>News</a></li>
+          <li><a href="#sport">Sport</a></li>
+          <li><a>Entertainment</a></li>
+      </ul>
+      """
+    When I validate the anchor hrefs standards
+    Then it fails with the message:
+      """
+      Anchor has no href attribute: /html/body/ul/li[1]/a
+      Anchor has no href attribute: /html/body/ul/li[3]/a
+      """

data/features/check_standards/form_interactions.feature

@@ -0,0 +1,45 @@
+Feature: Form Interactions
+
+  Forms must have a submit button and forms must not update the location of the
+  page on change, focus, or blur events.
+
+  All `<form>` elements that take user input (i.e. do not consist only of
+  `input[type=hidden]` elements to store state) **must** have a submit button in
+  the form of a `<input>[type=submit,image]` or `<button>[type=submit]` element.
+
+  Changes to the page **must** location must only take place on explicit user
+  action i.e. when a submit button is activated. They must not take place when
+  change (particularly for `select` elements), focus, or blur events are fired.
+
+  Rationale
+  =========
+
+  All forms should have a submit button to provide a clear call to action. This
+  is particularly important to users with cognitive disabilities, but is also
+  beneficial to low vision users as an indication of the end of the form.
+
+  Scenario: Form with a submit button
+    Given a page with the HTML:
+      """
+      <form action="/search">
+        <label for="q">Search term:</label>
+        <input type="text" name="q" id="q">
+        <input type="submit" value="Search">
+      </form>
+      """
+    When I validate the form submit buttons standards
+    Then it passes
+
+  Scenario: Form with no submit button
+    Given a page with the HTML:
+      """
+      <form action="/search">
+        <label for="q">Search term:</label>
+        <input type="text" name="q" id="q">
+      </form>
+      """
+    When I validate the form submit buttons standards
+    Then it fails with the message:
+      """
+      Form has no submit button: /html/body/form
+      """

data/features/check_standards/form_labels.feature

@@ -0,0 +1,55 @@
+Feature: Correctly use form labels
+
+  Form fields that allow input (`select`, and `textarea` elements, and all
+  `input` element types other than image, submit, reset, button, or hidden)
+  **must** have an associated label, either in the form of a `<label>` element
+  or, for simple forms when no visible label is required, a `title` attribute.
+
+  Rationale
+  ---------
+
+  Form labels are important for all users in order to understand what the form
+  field is however they are essential for speech output users who cannot easily
+  infer what the form element is by looking at the surrounding content.
+
+  While there are WAI-ARIA attributes that allow for labelling of forms it is
+  not supported in all versions of assistive technologies that BBC users could
+  reasonably expect to be able to use.
+
+  Scenario: All fields have labels or title attributes
+    Given a page with the HTML:
+      """
+      <label for="search">Search the BBC</label>
+      <input type="text" id="search" name="q" />
+
+      <label for="search2">
+        Search the BBC
+        <input id="search2" type="text" name="q" />
+      </label>
+
+      <input type="text" name="q" title="Search the BBC" />
+      """
+    When I validate the form labels standards
+    Then it passes
+
+  Scenario: Some fields without labels or title attributes
+    Given a page with the HTML:
+      """
+      <input type="text" name="name" title="Name" />
+      <input type="email" name="email" title="Email" />
+
+      <textarea name="notes"></textarea>
+      <select name="preference"></select>
+      <input type="text" name="q" value="Search the BBC" />
+      <input type="text" name="q" aria-label="Search the BBC" />
+      <input type="text" name="q" placeholder="Search the BBC" />
+      """
+    When I validate the form labels standards
+    Then it fails with the message:
+      """
+      Field has no label or title attribute: /html/body/textarea
+      Field has no label or title attribute: /html/body/select
+      Field has no label or title attribute: /html/body/input[3]
+      Field has no label or title attribute: /html/body/input[4]
+      Field has no label or title attribute: /html/body/input[5]
+      """

data/features/check_standards/headings.feature

@@ -0,0 +1,154 @@
+Feature: Headings
+
+  A document **must** have exactly one `<h1>` element.
+
+  Heading levels after the document `<h1>` element **must** be sequential and **must not** skip heading levels.
+
+  Heading elements **must** be followed by content.
+
+  Rationale
+  =========
+
+  A logical heading structure is invaluable for users of screen readers and similar assistive technologies to help navigate content.
+
+  Users should be able to use the document's `<h1>` identify its main content. Documents should have one main subject.
+
+  Heading levels should not be skipped as a predictable document outline is an important factor for understandability.
+
+  Headings should not be used for non-heading purposes, i.e. to identify blocks of content. A heading should always
+  be followed either by non-heading content or by a heading of one level deeper.
+
+  Scenario: No main heading
+    Given a page with the HTML:
+      """
+      <h2>Heading 2</h2>
+      """
+    When I validate the heading standards
+    Then it fails with the message:
+      """
+      A document must have exactly one heading. Found 0 h1 elements.
+      """
+
+  Scenario: More than one main heading
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h1>Heading 1</h1>
+      """
+    When I validate the heading standards
+    Then it fails with the message:
+      """
+      A document must have exactly one heading. Found 2 h1 elements:
+        /html/body/h1[1]
+        /html/body/h1[2]
+      """
+
+  Scenario: Headings in ascending order
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+      """
+    When I validate the heading standards
+    Then it passes
+
+  Scenario: Headings in invalid order
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <h3>Heading 3</h3>
+      <h2>Heading 2</h2>
+      """
+    When I validate the heading standards
+    Then it fails with the message:
+      """
+      Headings are not in order: h1 is followed by h3
+      """
+
+  Scenario: Headings jump back up more than one level
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h2>Heading 2b</h2>
+      <h3>Heading 3b</h3>
+      """
+    When I validate the heading standards
+    Then it passes
+
+  Scenario: Heading is hidden
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <h3 style="display:none">Heading 3</h3>
+      <h2>Heading 2</h2>
+      """
+    When I validate the heading standards
+    Then it fails with the message:
+      """
+      Headings are not in order: h1 is followed by h3
+      """
+
+  Scenario: Heading in a script tag
+    Given a page with the HTML:
+      """
+      <h1>Heading 1</h1>
+      <script>
+        var stuff = "<h3>Heading 3</h3>";
+      </script>
+      <h2>Heading 2</h2>
+      """
+    When I validate the heading standards
+    Then it passes
+
+  Scenario: Subheading before the first main heading
+    Given a page with the HTML:
+      """
+      <h3>Ignore me</h3>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      """
+    When I validate the heading standards
+    Then it passes
+
+    Scenario: Content between headings
+      Given a page with the HTML:
+        """
+        <div role="main">
+          <h1>Main heading</h1>
+          <p>non-heading content</p>
+          <h2>Another heading</h2>
+          <p>non-heading content</p>
+          <h3>Main content</h3>
+          <h2>Secondary content</h2>
+          <p>non-heading content</p>
+          <h2>Tertiary content</h2>
+          <p>Lorem ipsum…</p>
+        </div>
+        """
+      When I validate the heading standards
+      Then it passes
+
+  Scenario: No content between headings
+    Given a page with the HTML:
+      """
+      <div role="main">
+        <h1>Main heading</h1>
+        <p>non-heading content</p>
+        <h2>Secondary content</h2>
+        <h2>Tertiary content</h2>
+        <p>non-heading content</p>
+      </div>
+      """
+    When I validate the heading standards
+    Then it fails with the message:
+      """
+      Heading elements must be followed by content. No content follows a h2.
+      """