Fixes readium#172 ARIA landmarks

Added main landmark to epub content region. Changed toolbar region landmark to banner from navigation Added a region named Page Navigation to prev/next button area Added Page Navigation to EN-US messages.json Added empty alt attribute to empty library arrow image
becka11y · Aug 25, 2014 · c322254 · c322254
1 parent 281e239
commit c322254
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 9 deletions.
diff --git a/chrome-app/index.html b/chrome-app/index.html
@@ -27,7 +27,7 @@
 
     <!-- This is all application-specific HTML -->
     <body class="chrome-app">
-        <nav id="app-navbar" class="navbar" role="navigation">
+        <nav id="app-navbar" class="navbar" role="banner" aria-label="{{Strings.i18n_toolbar}}">
         </nav>
         <div id="app-container">
         </div>

diff --git a/i18n/_locales/en_US/messages.json b/i18n/_locales/en_US/messages.json
@@ -410,6 +410,9 @@
   "i18n_page_next" : {
     "message" : "Next Page"
   },
+  "i18n_page_navigation" : {
+    "message" : "Page Navigation"
+  },
   "chrome_accept_languages": {
     "message": "$CHROME$ accepts $languages$ languages",
     "placeholders": {

diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
 
     <!-- This is all application-specific HTML -->
     <body>
-        <nav id="app-navbar" class="navbar" role="navigation">
+        <nav id="app-navbar" class="navbar" role="banner">
         </nav>
         <div id="app-container">
         </div>

diff --git a/simpleviewer.html b/simpleviewer.html
@@ -21,7 +21,7 @@
 
     <!-- This is all application-specific HTML -->
     <body>
-        <nav class="navbar" role="navigation">
+        <nav class="navbar" role="banner" aria-label="{{Strings.i18n_toolbar}}">
         </nav>
         <div id="app-container">
         </div>

diff --git a/templates/empty-library.html b/templates/empty-library.html
@@ -2,5 +2,5 @@
 	<div id="empty-message">
 		{{strings.i18n_add_items}}
 	</div>
-	<img id="empty-message-arrow" src="images/library_arrow.png">
+	<img id="empty-message-arrow" src="images/library_arrow.png" alt="">
 </div>
diff --git a/templates/library-body.html b/templates/library-body.html
@@ -1,2 +1,2 @@
-<div class="row library-items">
+<div class="row library-items" role="main">
 </div>
diff --git a/templates/reader-body.html b/templates/reader-body.html
@@ -1,16 +1,15 @@
 <div id="readium-toc-body"
 aria-label="{{strings.toc}}"
-role="navigation"
->
+role="navigation">
 </div>
 
-<div id="reading-area">  
+<div id="reading-area" role="main">  
   <div id="epub-reader-container">
     <div id="epub-reader-frame">
     </div>
   </div>
 
-  <div id="readium-page-btns">
+  <div id="readium-page-btns" role="region" tabindex="-1" aria-label="{{strings.i18n_page_navigation}}">
   <!-- page left/right buttons inserted here when EPUB is loaded (page progression direction) -->
   </div>