Add WAI-ARIA roles to #main, #comments and #footer when in HTML5 mode

Based on a patch from Patrick.

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
index a07cd842ab14c6ad3bf058c865874069904d0091..d13fa0a6ff420f6cbff509f07c5a6f22c5e7551a 100644 (file)
--- 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
@@ -67,6 +67,8 @@ The `role` attribute is not allowed by the XHTML 1.0 Strict DTD, so we
 should only emit it in HTML5 mode (and we should probably
 [[todo/generate_HTML5_by_default]]).
 
+Specific roles:
+
 [[!format diff """
 -<div class="banner">
 +<div class="banner" role="banner">
@@ -86,4 +88,8 @@ reasonable guess. I would hope that the fact that it's an `<aside>`
 in HTML5 mode is enough to give accessibility tools a clue already?
 Would declaring this to be a `note` be sufficient?
 
+I've applied your suggested roles for #main, #comments and #footer,
+but only in HTML5 mode for the reason given above. I have not applied
+a role to the sidebar just yet.
+
 --[[smcv]]

diff --git a/templates/page.tmpl b/templates/page.tmpl
index c886b22d81d53069fd10ff290dbddb672d093566..c709c4f851678a7adfea7eeacfd4246fbe136018 100644 (file)
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -134,7 +134,7 @@
 
 <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"></TMPL_IF>
 <TMPL_VAR CONTENT>
 <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
 
@@ -146,7 +146,7 @@
 
 <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"></TMPL_IF>
 <TMPL_VAR COMMENTS>
 <TMPL_IF ADDCOMMENTURL>
 <div class="addcomment">
@@ -161,7 +161,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"></TMPL_IF>
 <TMPL_UNLESS DYNAMIC>
 <TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>