Here is a patch for page.tmpl to add these landmarks.
--Patrick
This can't be applied as a patch as-is because it's based on Tails' modified
page.tmpl
, but I get the general idea. A reviewer will need to check the ARIA meanings of those roles to confirm that they are appropriate (I haven't done that yet). --smcv
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>
Here is a review. Please "sign" any responses so we can keep track of who is talking to who :-)
General points:
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
generate HTML5 by default). --smcv
Now we do. --smcv
Specific roles:
-<div class="banner">
+<div class="banner" role="banner">
There is no such class in IkiWiki's page.tmpl, so this part can't be applied. After this is applied to the main IkiWiki, you'll need to talk to the maintainers of the Tails wiki about changing that in their fork of the template.
-<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>
I don't think the sidebar is necessarily navigation, although it's a
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
Feedback desired. Tagging this reviewed to take it off the patches list --smcv