Add WAI-ARIA roles to #main, #comments and #footer when in HTML5 mode
authorSimon McVittie <smcv@debian.org>
Sun, 5 Oct 2014 13:34:10 +0000 (14:34 +0100)
committerSimon McVittie <smcv@debian.org>
Sun, 5 Oct 2014 13:34:10 +0000 (14:34 +0100)
Based on a patch from Patrick.

doc/todo/add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn
templates/page.tmpl

index a07cd842ab14c6ad3bf058c865874069904d0091..d13fa0a6ff420f6cbff509f07c5a6f22c5e7551a 100644 (file)
@@ -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]]
index c886b22d81d53069fd10ff290dbddb672d093566..c709c4f851678a7adfea7eeacfd4246fbe136018 100644 (file)
 
 <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>
 
 
 <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">
 
 </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>