bbc-a11y 0.1.2 → 0.2.0

data/standards/17_control-styles.md

@@ -1,78 +0,0 @@
-# Links must be self-evident
-
-Links that are part of general editorial content **must** be identifiable by there visual style and be distinguishable from the surrounding content.
-
-Text links **must** have a mouse-over state change.
-
-## Rationale
-
-To aid discoverability all links must be made self-evident with their visual style.
-
-Appropriate styles are:
-
-- underlined
-- a different colour, meeting contrast standards, to the surrounding text
-
-When hovered over links should have a change in style as confirmation that they are links.
-
-Appropriate styles are:
-
-- adding an underline to previously not underlined content
-- a change in colour, with a sufficiently different contrast to meet the contrast standard compared with the default state colour
-
-## Techniques
-
-Pass:
-
-	<style>
-		body {
-			background: #fff;
-			color: #000;
-		}
-
-		a {
-			color: #005580;
-			text-decoration: none;
-		}
-
-		a:focus,
-		a:hover {
-			background: 
-			text-decoration: underline;
-		}
-	</style>
-	
-	<a href="http://www.bbc.co.uk/">BBC</a>
-
-Fail:
-
-	<style>
-		body {
-			background: #fff;
-			color: #000;
-		}
-
-		a {
-			color: #000;
-			text-decoration: none;
-		}
-	</style>
-	
-	<a href="http://www.bbc.co.uk/">BBC</a>
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| For every `<a>` element check the visual style | All `<a>` elements must be visually distinguishable from the surrounding content | Manual |
-| For every `<a>` element check the visual style of the `:hover` state | All `<a>` elements must have a visually distinguishable style between `:link` and `:hover` states | Manual |
-
---
-
-## Notes
-
-Might be difficult to automate the first test. It might be possible (but expensive) to check every link on a page against the style of its parent element, comparing colour, underlines, weight, and other styles but at best I feel this could only be an error if there are no style changes.
-
-The second test is testing two states of the same element so might not be quite as difficult (providing you have access to the :hover styles) but it's still hard to have a high degree of confidence in the outcome.
-
-Perhaps we need to have a warning rather than an error for these tests.

data/standards/18_focus-styles.md

@@ -1,36 +0,0 @@
-# Focusable elements must have a clear visual indication when they receive focus
-
-All focusable elements **must** have a clearly identifiable visual style when they have focus
-
-## Rationale
-
-Sighted keyboard users do not have the explicit association between pointer and content that pointing device users have, so it is important that they are aware at all times what element currently has focus and which element keyboard interactions will operate on.
-
-The currently focussed element should therefore have a visual style that makes it clearly distinguishable from the surrounding content.
-
-## Techniques
-
-Pass:
-
-	<style>
-	    a {
-        	text-decoration: none;
-        }
-        a:focus {
-        	text-decoration: underline;
-        }
-	</style>
-
-Fail:
-
-	<style>
-	    a {
-        	outline: none;
-        }
-	</style>
-
-## Test
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| For every `<a>`, `<button>`, or other focusable element check the visual style of the `:focus` state | All `<a>`, `<button>`, and other focusable elements must have a visually distinguishable style between their regular and `:focus` states | Manual |

data/standards/19_form-interactions.md

@@ -1,33 +0,0 @@
-# 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.
-
-## Techniques
-
-Pass:
-
-    <form action="/search">
-        <label for="q">Search term:</label>
-        <input type="text" name="q" id="q">
-        <input type="submit" value="Search">
-    </form>
-
-Fail:
-
-    <form action="/search">
-        <label for="q">Search term:</label>
-        <input type="text" name="q" id="q">
-    </form>
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Identify every `<form>` or collection of form elements | Each `<form>` or collection of form elements must have a submit button | Manual |
-| Test each `<form>` or collection of form elements | Page location must not change on change, focus, or blur events | Manual |

data/standards/20_image-alt.md

@@ -1,34 +0,0 @@
-# Image alternative content
-
-All images **must** have an alt attribute.
-
-All editorial significant images **must** have a non-null alt attribute value, or a text alternative in the preceding or following content.
-
-## Rationale
-
-Assistive technologies such as screen readers will provide a text alternative for images that do not have alt attributes based on the image file name. For images that do not have editorial significance or are described in the surrounding text content it is appropriate to use a null (alt="") value for the image alt attribute to avoid this.
-
-All editorially significantly images must have a text alternative either as the value of the alt attribute or in the immediately surrounding text content.
-
-## Techniques
-
-Pass:
-
-    <img src="bbc-logo.png" alt="BBC">
-
-    <h1>Story headline</h1>
-    <img src="story-image.png" alt="">
-
-Fail:
-
-    <img src="bbc-logo.png">
-
-    <h1>Story headline</h1>
-    <img src="story-image.png" alt="Story headline">
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Identify each image on the page | Every image must have an alt attribute | Manual |
-| Identify each editorially significant image on the page | Every editorially significant image must have a text alternative either as the value of the alt attribute or in the immediately surrounding text content. | Manual |

data/standards/21_min-font-sizes.md

@@ -1,64 +0,0 @@
-# Minimum text size
-
-At default browser level all text **must** have a minimum calculated size of 11px and all core content **must** have a minimum calculated size of 13px.
-
-## Rationale
-
-Having a minimum text size will reduce the number of users who need to make use of browser based text resize or page zoom. This is a particular issue with an ageing audience, many of whom will not consider themselves as having low vision and there will not have access to assistive technology or be familiar with browser tools to resize content.
-
-## Definitions
-
-### Core content
-
-The content that is required to fulfil the core purpose of the document or feature.
-
-## Techniques
-
-Pass:
-
-	<style>
-		body {
-			font-size: 62.5%; /* Set default size of 1em to 10px */
-		}
-
-		.news-article p {
-			font-size: 1.3em; /* Primary content size set to 13px */
-		}
-
-		.news-supplimentary-links {
-			font-size: 1.2em; /* Secondary content size set to 12px */
-		}
-	</style>
-
-Fail:
-
-	<style>
-		body {
-			font-size: 62.5%; /* Set default size of 1em to 10px */
-		}
-
-		.news-article p {
-			font-size: 1.2em; /* Primary content size set to 12px */
-		}
-
-		.news-supplimentary-links {
-			font-size: 1em; /* Secondary content size set to 10px */
-		}
-	</style>
-
-## Test
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| For every piece of text of different sizes check the computed text size | All content must have a minimum size of 11px | Manual, automatable |
-| For every piece of core content text of different sizes check the computed text size | All core content must have a minimum size of 13px | Manual |
-
---
-
-## Notes
-
-The core content problem again so we can only realistically automate testing against the 11px minimum.
-
-It could be an expensive operation to get the computed style for every text node in a document, and it is tests like this that made me think about having grades of tests based on how quickly they are likely to run. You don't need to run this test every time a CSS change is made, but it is worth running before committing.
-
-It is likely that entire parts of the page will be considered 'core', for example everything in the page `<main>` element, so would it be possible to write this in such a way as to make it easy for individualy products to add their custom rules to test for the 13px minimum within certain elements?

data/standards/22_resize-zoom.md

@@ -1,80 +0,0 @@
-# Content must be resizable to 200
-
-Text **must** be styled with units that are resizable in all browsers.
-
-Content **must** be visible and usable with text resized to 200% of normal.
-
-Content **must** be visible and usable with page zoomed to 200% of normal.
-
-Where available on a platform zoom **must** be suported.
-
-## Rationale
-
-Standard browser features for resizing text or page zoom can make content accessible to many low vision users without the need for additional assistive technologies such as screen magnifiers or screen readers.
-
-Text resizing and page zoom cater to different needs, and therefore both should be supported.
-
-Internet Explorer does not resize text that have been styled in `px` units, therefore `em`, `%` or similar units should be used.
-
-Browsers on iOS, Android, and other mobile platforms also support zoom with pinch-in and pinch-out gestures. In most cases it is just a matter of not disabling this, but there are some cases when it is appropriate to implement content specific interactions, such as with zoomable maps, which should mimic the same pinch-in and pinch-out gestures.
-
-## Definitions
-
-### Visible
-
-Content is not clipped and does not overlap other content, and has sufficient spacing to make it readable.
-
-### Usable
-
-Links, forms, and other controls are not overlapped with other elements making them un-clickable.
-
-## Techniques
-
-Pass:
-
-	<style>
-	body {
-		font-size: 1.3em;
-	}
-	</style>
-
-	<meta name="viewport" content="user-scalable=YES">
-	
-	<meta name="viewport" content="width=device-width;
-		initial-scale=1.0; maximum-scale=2.0;
-		user-scalable=1;">
-
-Fail:
-	
-	<style>
-	body {
-		font-size: 13px;
-	}
-	</style>
-
-	<style>
-	body {
-		overflow: hidden;
-	}
-	</style>
-
-	<meta name="viewport" content="user-scalable=no" />
-	
-	<meta name="viewport" content="width=device-width;
-		initial-scale=1.0; maximum-scale=1.0;
-		user-scalable=1;">
-
-## Test
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| In a browser that supports page zoom, increase the zoom level to 200% | All content must be visible and usable | Manual |
-| In a browser that supports text resize, increase text resize to 200% | All content must be visible and usable | Manual |
-| In Internet Explorer, increase text resize | All text content should increase in size | Manual |
-| On platforms that support it, use pinch-in and pinch-out to zoom content | All content should increase and descrease in size | Manual |
-
---
-	
-## Notes
-
-The first two tests will have to be manual I think, but is it possible to make automate the 'px' test?

data/standards/step_definitions/core_content_steps.rb

@@ -1,3 +0,0 @@
-Then(/^all core content is available and functional$/) do
-  skip_this_scenario
-end

data/standards/step_definitions/form_steps.rb

@@ -1,6 +0,0 @@
-Then(/^the following form elements must have a title attribute or associated label tag:$/) do |table|
-  selectors = table.raw.flatten
-  page.all_elements_matching(*selectors).each do |element|
-    expect(element).to have_title_attribute_or_associated_label_tag
-  end
-end

data/standards/step_definitions/language_steps.rb

@@ -1,21 +0,0 @@
-Then(/^the <html> element must have a `lang` attribute$/) do
-  page.must_have_lang_attribute
-end
-
-Then(/^the main natural language of the page must match that attribute$/) do
-  expected_language = language.detect(page)
-  puts "Detected page language: #{expected_language}"
-  page.must_have_lang_attribute_of(expected_language)
-end
-
-Then(/^any other tags with a lang attribute must contain text of that language$/) do
-  pending # express the regexp above with the code you wish you had
-end
-Then(/^all elements with `lang` attribute must have content in that natural language$/) do
-  pending # express the regexp above with the code you wish you had
-end
-
-Then(/^any parts expressed in a natural language different to the main language of the page must have a matching `lang` attribute$/) do
-  pending # express the regexp above with the code you wish you had
-end
-

data/standards/step_definitions/page_steps.rb

@@ -1,50 +0,0 @@
-When(/^I visit the page$/) do
-  browser.visit settings.url
-end
-
-When(/^I view the page with JavaScript disabled$/) do
-  disable_javascript_and_css
-  browser.visit settings.url
-end
-
-Then(/^the document should have a title$/) do
-  page.must_have_title
-end
-
-Then(/^the title should describe the primary content of the document$/) do
-  begin
-    page.must_have_title_that_contains_h1_text
-  rescue Exception => error
-    assert_title_describes_primary_content_of_document(browser.title, browser)
-  end
-end
-
-Then(/^there should be exactly one element with `role="(.*?)"`$/) do |arg1|
-  page.must_have_one_main_element
-end
-
-Then(/^there must be exactly one h1 element$/) do
-  page.must_have_one_h1
-end
-
-Then(/^each heading must be followed by content or a heading of one level deeper \(h2\-h6\)$/) do
-  puts "Heading hierarchy:"
-  puts page.heading_hierarchy.to_s
-  page.must_have_correct_heading_hierarchy
-end
-
-Then(/^there must be no elements with a title attribute whose content is repeated within the element$/) do
-  page.must_have_no_elements_with_title_attribute_content_repeated_within
-end
-
-Then(/^any form fields with associated labels do not have a title attribute$/) do
-  page.must_have_no_form_fields_with_label_and_title
-end
-
-Given(/^there should be no elements with a tabindex attribte of (\d+) or greater$/) do |max_tabindex|
-  page.must_not_have_any_elements_with_tabindex_greater_than max_tabindex.to_i
-end
-
-Given(/^there should be no elements with a tabindex attribute of (\d+) except for:$/) do |tabindex, elements|
-  page.must_not_have_elements_with_tabindex(tabindex.to_i, except: elements.raw.flatten)
-end

data/standards/step_definitions/w3c_steps.rb

@@ -1,7 +0,0 @@
-When(/^I submit the page to the W3C Markup Validation Service$/) do
-  w3c.validate settings.url
-end
-
-Then(/^there should be no errors$/) do
-  expect(w3c.errors).to be_empty
-end

data/standards/support/capybara.rb

@@ -1,53 +0,0 @@
-require 'capybara'
-require 'capybara/dsl'
-require 'phantomjs/poltergeist'
-
-Capybara.register_driver :poltergeist do |app|
-  Capybara::Poltergeist::Driver.new(app, js_errors: false)
-end
-
-Capybara.default_driver = :poltergeist
-
-Before do
-  Capybara.use_default_driver
-end
-
-After do
-  Capybara.reset_sessions!
-end
-
-module BBC
-  module A11y
-
-    module Browser
-      def browser
-        Capybara.current_session
-      end
-
-      def disable_javascript_and_css
-        unless Capybara.drivers.keys.include?(:without_js)
-          skip_this_scenario <<-ERROR
-You need to define a non-javascript driver for Capybara in order to run this scenario. Here's an example you could use:
-
-    require 'capybara/selenium'
-    Capybara.register_driver(:without_javascript_or_css) do |app|
-      profile = Selenium::WebDriver::Firefox::Profile.new
-      profile['permissions.default.stylesheet'] = 2
-      profile['javascript.enabled'] = false
-      Capybara::Selenium::Driver.new(app, profile: profile)
-    end
-
-You can put this code into your a11y.rb file
-
-You'll also need to add the `selenium-webdriver` gem to your Gemfile.
-          ERROR
-        else
-          Capybara.current_driver = :without_js
-        end
-      end
-    end
-
-  end
-end
-
-World(BBC::A11y::Browser)