doc/todo/add_aria_landmarks_to_make_ikiwiki_websites_more_accessible.mdwn

   1 Here is a patch for page.tmpl to add these landmarks.
   2
   3 > This can't be applied as a patch as-is because it's based on Tails'
   4 > modified `page.tmpl`, but I get the general idea. A reviewer will need
   5 > to check the ARIA meanings of those roles to confirm that they
   6 > are appropriate (I haven't done that yet). [[!tag patch]] --[[smcv]]
   7
   8 [[!format diff """
   9 diff --git a/templates/page.tmpl b/templates/page.tmpl
  10 index 5efad1a..cb76590 100644
  11 --- a/templates/page.tmpl
  12 +++ b/templates/page.tmpl
  13 @@ -30,7 +30,7 @@
  14  </head>
  15  <body>
  16
  17 -<div class="banner">
  18 +<div class="banner" role="banner">
  19    <a class="tails" href="<TMPL_VAR HOMEPAGEURL>">
  20      <span class="acronym">Tails</span><br/>
  21      <span class="slogan">The Amnesic Incognito Live System</span>
  22 @@ -155,20 +155,20 @@
  23  <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
  24
  25  <TMPL_IF SIDEBAR>
  26 -<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
  27 +<TMPL_IF HTML5><aside class="sidebar" role="navigation"><TMPL_ELSE><div class="sidebar" role="navigation"></TMPL_IF>
  28  <TMPL_VAR SIDEBAR>
  29  <TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
  30  </TMPL_IF>
  31
  32  <div id="pagebody">
  33
  34 -<TMPL_IF HTML5><section id="content"><TMPL_ELSE><div id="content"></TMPL_IF>
  35 +<TMPL_IF HTML5><section id="content" role="main"><TMPL_ELSE><div id="content" role="main"></TMPL_IF>
  36  <TMPL_VAR CONTENT>
  37  <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
  38
  39  <TMPL_UNLESS DYNAMIC>
  40  <TMPL_IF COMMENTS>
  41 -<TMPL_IF HTML5><section id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
  42 +<TMPL_IF HTML5><section id="comments" role="complementary"><TMPL_ELSE><div id="comments" role="complementary"></TMPL_IF>
  43  <TMPL_VAR COMMENTS>
  44  <TMPL_IF ADDCOMMENTURL>
  45  <div class="addcomment">
  46 @@ -183,7 +183,7 @@
  47
  48  </div>
  49
  50 -<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF>
  51 +<TMPL_IF HTML5><footer id="footer" class="pagefooter" role="contentinfo"><TMPL_ELSE><div id="footer" class="pagefooter" role="contentinfo"></TMPL_IF>
  52  <TMPL_UNLESS DYNAMIC>
  53  <TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
  54
  55 """]]