Merge pull request #1 from a11yproject/gh-pages

Update

.ruby-version

@@ -1 +1 @@
-ruby-2.0.0-p195
+ruby-2.0.0-p247

CONTRIBUTING.md

@@ -2,13 +2,23 @@
 # Contributing to A11Y Project
 Do you enjoy web accessibility and want to help? **Here's how you can help.**
 
+## Pattern Submissions
+If you'd like to submit patterns to the A11Y Project make sure to do the following…
+
+1. [Make a CodePen](http://codepen.io/pen) **NOTE** : Please keep code as vanilla as possible. No Sass. No LESS. No HAML etc. You get the point.
+2. [Submit your pen to our Issue Tracker](https://github.com/a11yproject/a11yproject.com/issues/new) w/the name of your pattern as the title.
+3. Wait for the community to give you feedback and approval. **Note:** Keep the feedback and discussion to the pattern submitted and avoid discussing other patterns. Submit new patterns as separate issues.
+4. “Git” down and boogie
+
+    ![boogie dance](http://bukk.it/gitdown.gif)
+
 ## Writing articles
 We have a list of articles we'd love to see written. Have an idea for an article? We'd love to know what you want to contribute.
 
 1. Search to make sure someone hasn't snagged the article already.
 2. Claim an article by starting a new issue with "Article: your title" as the issue title. The final title can (or probably should) be different.
 3. When you check–in, reference that issue number in the commit, e.g., `re: #32`
-4. Articles can either be submitted via a pull request or written in plain text at a linkable location on the web. We recommend using GitHub's [gists](https://gist.github.com) (but [OK So Clap](http://oksoclap.com/) is another option if gists aren't your thing). Link us to your [gist](https://gist.github.com) (or your [clap](http://oksoclap.com/)) in the [issue field](https://github.com/a11yproject/a11yproject.com/issues) for your article and we'll be sure to clone and update our site accordingly with your masterpiece. If you are submitting the article via pull request, we have a lovely [sample post file](_posts/example-post.md) to get you started. 
+4. Articles are written in plain text at a linkable location on the web. We recommend using GitHub's [gists](https://gist.github.com) (but [OK So Clap](http://oksoclap.com/) is another option if gists aren't your thing). Link us to your [gist](https://gist.github.com) (or your [clap](http://oksoclap.com/)) in the [issue field](https://github.com/a11yproject/a11yproject.com/issues) for your article and we'll be sure to clone and update our site accordingly with your masterpiece. When you are ready to submit the article via a pull request, we have a lovely [sample post file](_posts/example-post.md) to get you started. 
 
 ### Plain-text Workflow for Article Submission
 1. Make a [gist](https://gist.github.com) or a [clap](http://oksoclap.com/)
@@ -20,7 +30,7 @@ We have a list of articles we'd love to see written. Have an idea for an article
 Here are some suggestions and tips on writing your article:
 
 - Short - Aim for a timed reading length of approximately two minutes.
-- Focused - Keep it digestable and to a single topic. Articles that span multiple areas and topics are better broken up.
+- Focused - Keep it digestible and to a single topic. Articles that span multiple areas and topics are better broken up.
 
 ## Reporting issues
 Notice something inaccurate? Noticed something inaccessible on this site? You think you can code something up better?
@@ -39,7 +49,7 @@ If you have a feature request(s) we suggest filing an issue initially to discuss
 
 ## Build Process
 - In order to create a site build you'll need to make sure you've run through all the listed commands in the order they appear from our [README.md](https://github.com/a11yproject/a11yproject.com#local-development)
-- CSS changes must be done in ``.sass`` files first, never just the compiled files. We use [Codekit](http://incident57.com/codekit) to compile our *Sass* and *Compass*.
+- CSS changes must be done in ``.scss`` files first, never just the compiled files. We use [Codekit](http://incident57.com/codekit) to compile our *Sass* and *Compass*.
 
 
 ## Pull requests
@@ -49,4 +59,4 @@ If you have a feature request(s) we suggest filing an issue initially to discuss
 
 ## License
 
-By contributing your code, you agree to license your contribution under the terms of the [APLv2](https://github.com/twitter/bootstrap/blob/master/LICENSE).
+By contributing your code, you agree to license your contribution under the terms of the [APLv2](http://www.apache.org/licenses/LICENSE-2.0.html).

Gemfile

@@ -2,5 +2,5 @@ source "https://rubygems.org"
 
 gem "compass"
 gem "jekyll"
-gem "maruku"
+gem "kramdown"
 gem "anemone"

Gemfile.lock

@@ -4,43 +4,59 @@ GEM
     anemone (0.7.2)
       nokogiri (>= 1.3.0)
       robotex (>= 1.0.0)
-    chunky_png (1.2.8)
-    classifier (1.3.3)
+    blankslate (2.1.2.4)
+    chunky_png (1.3.1)
+    classifier (1.3.4)
       fast-stemmer (>= 1.0.0)
     colorator (0.1)
-    commander (4.1.3)
+    commander (4.1.6)
       highline (~> 1.6.11)
-    compass (0.12.2)
+    compass (0.12.6)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
-      sass (~> 3.1)
-    directory_watcher (1.4.1)
+      sass (~> 3.2.19)
     fast-stemmer (1.0.2)
+    ffi (1.9.3)
     fssm (0.2.10)
-    highline (1.6.19)
-    jekyll (1.0.2)
+    highline (1.6.21)
+    jekyll (1.5.1)
       classifier (~> 1.3)
       colorator (~> 0.1)
       commander (~> 4.1.3)
-      directory_watcher (~> 1.4.1)
-      kramdown (~> 1.0.2)
-      liquid (~> 2.3)
-      maruku (~> 0.5)
+      liquid (~> 2.5.5)
+      listen (~> 1.3)
+      maruku (= 0.7.0)
       pygments.rb (~> 0.5.0)
-      safe_yaml (~> 0.7.0)
-    kramdown (1.0.2)
-    liquid (2.5.0)
-    maruku (0.6.1)
-      syntax (>= 1.0.0)
-    nokogiri (1.5.9)
-    posix-spawn (0.3.6)
-    pygments.rb (0.5.0)
+      redcarpet (~> 2.3.0)
+      safe_yaml (~> 1.0)
+      toml (~> 0.1.0)
+    kramdown (1.3.3)
+    liquid (2.5.5)
+    listen (1.3.1)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      rb-kqueue (>= 0.2)
+    maruku (0.7.0)
+    mini_portile (0.5.3)
+    nokogiri (1.6.1)
+      mini_portile (~> 0.5.0)
+    parslet (1.5.0)
+      blankslate (~> 2.0)
+    posix-spawn (0.3.8)
+    pygments.rb (0.5.4)
       posix-spawn (~> 0.3.6)
       yajl-ruby (~> 1.1.0)
+    rb-fsevent (0.9.4)
+    rb-inotify (0.9.4)
+      ffi (>= 0.5.0)
+    rb-kqueue (0.2.2)
+      ffi (>= 0.5.0)
+    redcarpet (2.3.0)
     robotex (1.0.0)
-    safe_yaml (0.7.1)
-    sass (3.2.9)
-    syntax (1.0.0)
+    safe_yaml (1.0.3)
+    sass (3.2.19)
+    toml (0.1.1)
+      parslet (~> 1.5.0)
     yajl-ruby (1.1.0)
 
 PLATFORMS
@@ -50,4 +66,4 @@ DEPENDENCIES
   anemone
   compass
   jekyll
-  maruku
+  kramdown

README.md

@@ -2,7 +2,6 @@
 
 A11Y Project
 ==========
-
 Making *#A11Y* tips and tricks easier to digest and leveraging the community into the cloud. The Accessibility Project is a community–driven effort to make web accessibility easier.
 
 This site is the product of a community of people who want to help to make web accessibility…well, accessible. Our goal is to accomplish this with 3 tennets in mind:
@@ -11,40 +10,36 @@ This site is the product of a community of people who want to help to make web a
 2. **Up-to-date.** The project is hosted on Github so information can be current with the latest standards.
 3. **Forgiving.** People make mistakes and web accessiblity is hard, so we seek to be encouraging.
 
-##Requirements
+##Contributing
 ========
-In order to contribute to the website’s codebase, you’ll need to know a bit about [Jekyll](https://github.com/mojombo/jekyll), [Compass](http://compass-style.org), [Sass](http://sass-lang.com), [Twitter Bootstrap](http://twitter.github.com/bootstrap), [Bash](http://www.gnu.org/software/bash/manual/bashref.html#What-is-Bash_003f) and [Markdown](http://daringfireball.net/projects/markdown/). You'll also need to know how to install *[Ruby Gems](https://rvm.io)* and of course have *[Ruby](http://www.ruby-lang.org/en/downloads/)* installed on your machine.
+Everything you need to know about contributing to this project can be found in our [Contributor Docs](https://github.com/a11yproject/a11yproject.com/blob/gh-pages/CONTRIBUTING.md)
 
-###Gems Installation
+##Requirements
+========
+In order to contribute to the website’s codebase, you’ll need to know a bit about [Jekyll](https://github.com/mojombo/jekyll), [Compass](http://compass-style.org), [Sass](http://sass-lang.com), [Bootstrap](http://getbootstrap.com), [Bash](http://www.gnu.org/software/bash/manual/bashref.html#What-is-Bash_003f) and [Markdown](http://daringfireball.net/projects/markdown/). You'll also need to know how to install *[Ruby Gems](https://rvm.io)* and of course have *[Ruby](http://www.ruby-lang.org/en/downloads/)* installed on your machine.
 
+###Gem Installation
 Use the ``bundle`` command to install the necessary gems for the **A11Y Project**. (**Hint**: All the cool kids use [ruby version manager](https://rvm.io) to organize ``gemset`` dependencies):
 If you don't have [bundler](http://gembundler.com) installed you'll need to run ``gem install bundler`` before using ``bundle``.
 
     $ bundle
 
-##Contributing
-========
-[Contributors Docs](https://github.com/a11yproject/a11yproject.com/blob/gh-pages/CONTRIBUTING.md)
-
 ##Under the Hood
 ========
 ###Markup
-
 Posts are all written in [Markdown](http://daringfireball.net/projects/markdown).
 
 ###Stylesheets
 Authored with [Compass](http://compass-style.org) and [Sass](http://sass-lang.com).
 
 ###Framework
-
-The site is built on a customized [Compass](http://compass-style.org/) port of [Twitter Bootstrap](http://twitter.github.com/bootstrap). [Jekyll](https://github.com/mojombo/jekyll) is used for templating and posts.
+The site is built on a customized [Compass](http://compass-style.org/) port of [Bootstrap](http://getbootstrap.com). [Jekyll](https://github.com/mojombo/jekyll) is used for templating and posts.
 
 ##Local Development
 ========
 The following are tasks which can be run from your shell of choice. Some of us use [iTerm](http://iterm.sourceforge.net/downloads.shtml) for Mac but whatevs.
 
 ###Rake Commands
-
 The following ``rake`` tasks are available and are used for testing the site locally, on your own machine (use `rake -T` to list them):
 
     rake build        # Build site with Jekyll

_config.yml

@@ -3,7 +3,7 @@
 permalink: /posts/:title
 pygments: false
 exclude: ['Rakefile', 'README.md', 'config.rb']
-markdown: maruku
+markdown: kramdown
 
 # configuration required for some pages
 

_layouts/default.html

@@ -42,6 +42,7 @@
           <div class="nav-collapse collapse">
             <ul class="nav">
               <li><a href="/archives.html">Archives</a></li>
+              <li><a href="/patterns/">Patterns</a></li>
               <li><a href="/checklist.html">Checklist</a></li>
               <li><a href="/resources.html">Resources</a></li>
               <li><a href="/about.html">About</a></li>
@@ -68,8 +69,8 @@ <h5>Contributors</h5>
 
           <div class="span4">
             <h5>Colophon</h5>
-            <p>&copy; 2013 The Accessibility Project<br />
-              Powered by <a href="https://github.com/mojombo/jekyll">Jekyll</a> &amp; <a href="http://twitter.github.com/bootstrap/">Bootstrap</a></p>
+            <p>&copy; <span class="a11y-copyright"></span> The Accessibility Project<br />
+              Powered by <a href="https://github.com/mojombo/jekyll">Jekyll</a> &amp; <a href="http://getbootstrap.com">Bootstrap</a></p>
             <p><a href="https://twitter.com/A11YProject">@A11YProject</a> | <a href="/atom.xml">Subscribe</a></p>
             <div id="google_translate_element"></div>
 
@@ -81,17 +82,18 @@ <h5>Colophon</h5>
 
     </footer>
 
-  {% if site.github %}
-    <a href="http://github.com/{{ site.github.username }}"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
-  {% endif %}
-
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
     <!-- Site-Scripts | Includes: bootstrap-dropdown.js, bootstrap-collapse.js, garlic.min.js -->
-    <script src="./js/minified/scripts-min.js"></script>
+    <script src="/js/minified/scripts-min.js"></script>
+
+    <!-- Dynamic Copyright Year -->
+    <script>
+      $('.a11y-copyright').text(new Date().getFullYear())
+    </script>
 
     <script type="text/javascript">
     function googleTranslateElementInit() {

_posts/2013-01-14-aria-landmark-roles.md

@@ -12,11 +12,13 @@ categories:
 
 * **banner** – Typically the “header” of your page that includes the name of the site
 * **search** – For the search form
-* **form** - Group of elements that as a whole, assemble a form (please note that there isn't a great deal of legacy support for this role)</li>
+* **form** - Group of elements that as a whole, assemble a form (please note that there isn't a great deal of legacy support for this role)
 * **main** – This would designate the main content area on your site
 * **navigation** – Use on any navigation list, typically on the nav element
 * **contentinfo** – Typically the "footer" of your page that contains information about the parent document such as copyrights and links to privacy statements
 
 To add a role to an element, simply add the "role" as an attribute:
 
     <header role="banner" class="site-header">
+
+It's recommended to label the areas with a descriptive name using *aria-label*, *aria-labelledby* or *title*. This get's more important in case you use a role more than once. Please note that 'banner', 'main' and 'contentinfo' should only be used once.

_posts/2013-04-22-title-attributes.md

@@ -8,7 +8,7 @@ categories:
 ---
 **Short answer:** Don't use them, except in special circumstances.
 
-HTML `title` attributes are often perceived as an accessibility (and SEO) bonus, but the opposite is true. For screen reader users the content included inside of the `title` attribute is typically unncessary, redundant, and [possibly not even used](http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=38). Conversely, content being put in the `title` attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it's probably not necessary.
+HTML `title` attributes are often perceived as an accessibility (and SEO) bonus, but the opposite is true. For screen reader users the content included inside of the `title` attribute is typically unnecessary, redundant, and [possibly not even used](http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=38). Conversely, content being put in the `title` attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it's probably not necessary.
 
 There are a few times when using a `title` attribute is appropriate:
 
@@ -19,4 +19,4 @@ Rule of Thumb: Serve all users equal content.
 
 ### Further reading
 - ["Using the HTML title attribute"](http://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/) by Steve Faulkner _(Jan 15th, 2013)_
-- [RNIB Blog: TITLE attributes](http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=38) _(May 16th, 2007)_
+- [RNIB Blog: TITLE attributes](http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=38) _(May 16th, 2007)_

_posts/2013-05-11-skip-nav-links.md

@@ -27,9 +27,9 @@ Skip nav links are useful for users who use keyboard navigation only, but screen
       <li><a href="/blog">Blog</a></li>
     </ul>
   </nav>
-  <div id="main" role="main">
+  <main id="main" role="main">
     <!-- page specific content -->
-  </div>
+  </main>
 </body>
 {% endhighlight %}
 

about.md

@@ -8,7 +8,7 @@ For many web developers, accessibility is complex and somewhat difficult. The Ac
 
 1. **Digestible.** We strive to feature short, digestible pieces of content.
 1. **Up-to-date.** The project is hosted on Github so information can be current with the latest standards.
-1. **Forgiving.** People make mistakes and web accessiblity is hard, so we seek to be encouraging.
+1. **Forgiving.** People make mistakes and web accessibility is hard, so we seek to be encouraging.
 
 ### Why accessibility is important
 
@@ -20,4 +20,4 @@ If you care and are knowledgeable about accessibility and want to help please co
 
 ### About this site
 
-This site is built with [Jekyll](https://github.com/mojombo/jekyll) & [Bootstrap](http://twitter.github.com/bootstrap/), collaboratively by developers (see the footer) on [Github](https://github.com/a11yproject/a11yproject.com/). In its current state, The Accessibility Project may not be a perfect example of an accessible website… yet. We're commited, through the power of Open Source, to incrementally improve our own accessibility on the site going forward.
+This site is built with [Jekyll](https://github.com/mojombo/jekyll) & [Bootstrap](http://getbootstrap.com), collaboratively by developers (see the footer) on [Github](https://github.com/a11yproject/a11yproject.com/). In its current state, The Accessibility Project may not be a perfect example of an accessible website… yet. We're committed, through the power of Open Source, to incrementally improve our own accessibility on the site going forward.

checklist.html

@@ -55,6 +55,13 @@
 
 					<p>Focal content of document. Use only once.</p>
 
+					<!-- article -->
+					<label for="article-role" class="checkbox"><code>&lt;article role="article"&gt;</code>
+						<input name="aria-article-role" id="article-role" type="checkbox">
+					</label>
+
+					<p>Represents an independent item of content. Use only once on outermost element of this type.</p>
+
 					<!-- complementary -->
 					<label for="complementary-role" class="checkbox"><code>&lt;aside role="complementary"&gt;</code>
 						<input name="aria-complementary-role" id="complementary-role" type="checkbox">
@@ -83,7 +90,19 @@
 
 					<p>Add a `search` role to your primary search form.</p>
 				</fieldset>
-
+
+				<!-- Language -->
+				<fieldset id="language">
+					<legend>Language Attribute</legend>
+					<p>Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation.</p>
+					<!-- text transcript -->
+					<label for="language-input" class="checkbox"><code>&lt;html lang="en"&gt;</code>
+						<input name="language-input" id="language-input" type="checkbox">
+					</label>
+
+					<p>Specify a language with the lang attribute on the &lt;html&gt; element.</p>
+				</fieldset>
+
 				<!-- Document Outline -->
 				<fieldset id="forms">
 					<legend>Document Outline</legend>
@@ -184,6 +203,7 @@
 
 				<fieldset>
 					<p>Test against different types of color blindness with a tool like <a href="http://colorfilter.wickline.org/">http://colorfilter.wickline.org/</a>.</p>
+					<p>If you are on a Mac, another option is <a href="http://michelf.ca/projects/sim-daltonism/">Michel Fortin's, Sim Daltonism</a> color blindness simulator.</p>
 
 					<label for="deuteranopia" class="checkbox">Deuteranopia
 						<input name="deuteranopia" id="deuteranopia" type="checkbox">