Fixed misuse of ARIA roles (see http://dev.opera.com/articles/view/introduction-to-wai-aria/)

.themes/classic/sass/base/_layout.scss

@@ -41,7 +41,7 @@ body {
   max-width: $max-width;
   position: relative;
   margin: 0 auto;
-  > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] {
+  > header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav.pagination {
     @extend .group;
     padding-left: $pad-min;
     padding-right: $pad-min;
@@ -67,7 +67,7 @@ body {
 
 #content { > div, > article { width: 100%; }}
 
-aside[role=sidebar] {
+aside.sidebar {
   float: none;
   padding: 0 $pad-min 1px;
   background-color: lighten($sidebar-bg, 2);
@@ -88,7 +88,7 @@ aside[role=sidebar] {
 
 body.sidebar-footer {
   @media only screen and (min-width: 750px) {
-    aside[role=sidebar]{ @include collapse-sidebar; }
+    aside.sidebar{ @include collapse-sidebar; }
   }
   #content { margin-right: 0px; }
   .toggle-sidebar { display: none; }
@@ -98,7 +98,7 @@ body.sidebar-footer {
   body > header { font-size: 1em; }
 }
 @media only screen and (min-width: 750px) {
-  aside[role=sidebar] { @include collapse-sidebar; }
+  aside.sidebar { @include collapse-sidebar; }
 }
 @media only screen and (min-width: 768px) {
   body { -webkit-text-size-adjust: auto; }
@@ -120,7 +120,7 @@ body.sidebar-footer {
       float: left;
     }
   }
-  aside[role=sidebar] {
+  aside.sidebar {
     @extend .group;
     width: $sidebar-width-medium - $sidebar-pad-medium*2;
     padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
@@ -147,7 +147,7 @@ body.sidebar-footer {
       padding-bottom: $pad-wide/2;
     }
   }
-  aside[role=sidebar] {
+  aside.sidebar {
     width: $sidebar-width-wide - $sidebar-pad-wide*2;
     padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
     .collapse-sidebar & {

.themes/classic/sass/base/_theme.scss

@@ -60,7 +60,7 @@ $page-border-bottom: darken($footer-bg, 5) !default;
 a {
   @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
 }
-aside[role=sidebar] a {
+aside.sidebar a {
   @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
 }
 a {

.themes/classic/sass/partials/_blog.scss

@@ -121,7 +121,7 @@ article + article {
   display: inline-block;
 }
 
-#content nav[role=pagination] {
+#content nav.pagination {
   text-align: center;
   font-size: .95em;
   div {

.themes/classic/sass/partials/_navigation.scss

@@ -31,8 +31,8 @@ body > nav {
       }
     }
   }
-  fieldset[role=site-search]{ float: right; width: 48%; }
-  fieldset[role=mobile-nav]{ float: left; width: 48%;
+  fieldset[role=search]{ float: right; width: 48%; }
+  fieldset.mobile-nav{ float: left; width: 48%;
     select{ width: 100%; font-size: .8em; border: 1px solid #888;}
   }
   ul { display: none; }
@@ -85,8 +85,8 @@ body > nav {
       width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px;
       .search { width: 91%; }
     }
-    fieldset[role=mobile-nav] { display: none; }
-    fieldset[role=site-search]{ width: 99%; }
+    fieldset.mobile-nav { display: none; }
+    fieldset[role=search]{ width: 99%; }
   }
   @media only screen and (min-width: 992px) {
     form {

.themes/classic/sass/partials/sidebar/_base.scss

@@ -1,7 +1,7 @@
 .side-shadow-border {
   @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
 }
-aside[role=sidebar] {
+aside.sidebar {
   color: $sidebar-color;
   text-shadow: lighten($sidebar-bg, 8) 0 1px;
   a { @extend .force-wrap; }

.themes/classic/source/_includes/custom/navigation.html

@@ -1,4 +1,4 @@
-<ul role=main-navigation>
+<ul class="main-navigation">
   <li><a href="{{ root_url }}/">Blog</a></li>
   <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
 </ul>

.themes/classic/source/_includes/navigation.html

@@ -1,11 +1,11 @@
-<ul role=subscription data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
+<ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
   <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
   {% if site.subscribe_email %}
     <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
   {% endif %}
 </ul>
 <form action="{{ site.simple_search }}" method="get">
-  <fieldset role="site-search">
+  <fieldset role="search">
     <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}" />
     <input class="search" type="text" name="q" results="0" placeholder="Search"/>
   </fieldset>

.themes/classic/source/_layouts/default.html

@@ -1,14 +1,14 @@
 {% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}
 {% include head.html %}
 <body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == false %} class="no-sidebar" {% endif %}>
-  <header>{% include header.html %}</header>
-  <nav role=navigation>{% include navigation.html %}</nav>
+  <header role="banner">{% include header.html %}</header>
+  <nav role="navigation">{% include navigation.html %}</nav>
   <div id="main">
     <div id="content">
       {{ content | expand_urls: root_url }}
     </div>
   </div>
-  <footer>{% include footer.html %}</footer>
+  <footer role="contentinfo">{% include footer.html %}</footer>
   {% include disqus.html %}
   {% include google_analytics.html %}
   {% include google_plus_one.html %}

.themes/classic/source/_layouts/page.html

@@ -3,7 +3,7 @@ layout: default
 ---
 
 <div>
-<article>
+<article role="article">
   {% if page.title %}
   <header>
     <h1 class="entry-title">{{ page.title | titlecase }}</h1>
@@ -32,7 +32,7 @@ layout: default
 {% endif %}
 </div>
 {% unless page.sidebar == false %}
-<aside role=sidebar>
+<aside class="sidebar">
   {% if site.page_asides.size %}
     {% include_array page_asides %}
   {% else %}

.themes/classic/source/_layouts/post.html

@@ -4,7 +4,7 @@ single: true
 ---
 
 <div>
-<article class="hentry">
+<article class="hentry" role="article">
   {% include article.html %}
   <footer>
     <p class="meta">
@@ -25,7 +25,7 @@ single: true
 {% endif %}
 </div>
 {% unless page.sidebar == false %}
-<aside role=sidebar>
+<aside class="sidebar">
   {% if site.post_asides.size %}
     {% include_array post_asides %}
   {% else %}

.themes/classic/source/index.html

@@ -10,7 +10,7 @@ layout: default
       {% include article.html %}
     </article>
   {% endfor %}
-  <nav role="pagination">
+  <nav class="pagination">
     <div>
       {% if paginator.next_page %}
         <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
@@ -22,7 +22,7 @@ layout: default
     </div>
   </nav>
 </div>
-<aside role=sidebar>
+<aside class="sidebar">
   {% if site.blog_index_asides.size %}
     {% include_array blog_index_asides %}
   {% else %}

.themes/classic/source/javascripts/octopress.js

@@ -1,7 +1,7 @@
 function getNav() {
-  var mobileNav = $('nav[role=navigation] fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next().append('<select></select>');
+  var mobileNav = $('nav[role=navigation] fieldset[role=search]').after('<fieldset class="mobile-nav"></fieldset>').next().append('<select></select>');
   mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
-  $('ul[role=main-navigation] a').each(function(link) {
+  $('ul.main-navigation a').each(function(link) {
     mobileNav.children('select').append('<option value="'+link.href+'">&bull; '+link.text+'</option>');
   });
   mobileNav.children('select').bind('change', function(event) {
@@ -19,7 +19,7 @@ function addSidebarToggler() {
       $('body').addClass('collapse-sidebar');
     }
   });
-  var sections = $('aside[role=sidebar] > section');
+  var sections = $('aside.sidebar > section');
   if (sections.length > 1) {
     sections.each(function(section, index){
       if ((sections.length >= 3) && index % 3 === 0) {
@@ -29,7 +29,7 @@ function addSidebarToggler() {
       $(section).addClass(count);
     });
   }
-  if (sections.length >= 3){ $('aside[role=sidebar]').addClass('thirds'); }
+  if (sections.length >= 3){ $('aside.sidebar').addClass('thirds'); }
 }
 
 function testFeatures() {