Adding ARIA landmarks allows for example screen readers users to move directly to...

[ikiwiki.git] / doc / todo / add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn
diff --git a/doc/todo/add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn b/doc/todo/add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn

new file mode 100644 (file)

index 0000000..85f194f
--- /dev/null
+++ b/doc/todo/add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn
@@ -0,0 +1,47 @@
+Here is a patch for page.tmpl to add these landmarks.
+diff --git a/templates/page.tmpl b/templates/page.tmpl
+index 5efad1a..cb76590 100644
+--- a/templates/page.tmpl
++++ b/templates/page.tmpl
+@@ -30,7 +30,7 @@
+ </head>
+ <body>
+ 
+-<div class="banner">
++<div class="banner" role="banner">
+   <a class="tails" href="<TMPL_VAR HOMEPAGEURL>">
+     <span class="acronym">Tails</span><br/>
+     <span class="slogan">The Amnesic Incognito Live System</span>
+@@ -155,20 +155,20 @@
+ <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
+ 
+ <TMPL_IF SIDEBAR>
+-<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
++<TMPL_IF HTML5><aside class="sidebar" role="navigation"><TMPL_ELSE><div class="sidebar" role="navigation"></TMPL_IF>
+ <TMPL_VAR SIDEBAR>
+ <TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
+ </TMPL_IF>
+ 
+ <div id="pagebody">
+ 
+-<TMPL_IF HTML5><section id="content"><TMPL_ELSE><div id="content"></TMPL_IF>
++<TMPL_IF HTML5><section id="content" role="main"><TMPL_ELSE><div id="content" role="main"></TMPL_IF>
+ <TMPL_VAR CONTENT>
+ <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
+ 
+ <TMPL_UNLESS DYNAMIC>
+ <TMPL_IF COMMENTS>
+-<TMPL_IF HTML5><section id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
++<TMPL_IF HTML5><section id="comments" role="complementary"><TMPL_ELSE><div id="comments" role="complementary"></TMPL_IF>
+ <TMPL_VAR COMMENTS>
+ <TMPL_IF ADDCOMMENTURL>
+ <div class="addcomment">
+@@ -183,7 +183,7 @@
+ 
+ </div>
+ 
+-<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF>
++<TMPL_IF HTML5><footer id="footer" class="pagefooter" role="contentinfo"><TMPL_ELSE><div id="footer" class="pagefooter" role="contentinfo"></TMPL_IF>
+ <TMPL_UNLESS DYNAMIC>
+ <TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
+