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 --[Patrick](https://www.google.com/accounts/o8/id?id=AItOawlnBLXDQbzD3OCcqZshcmExPNwlgD0tJ7A)
   4
   5 > This can't be applied as a patch as-is because it's based on Tails'
   6 > modified `page.tmpl`, but I get the general idea. A reviewer will need
   7 > to check the ARIA meanings of those roles to confirm that they
   8 > are appropriate (I haven't done that yet). [[!tag patch]] --[[smcv]]
   9
  10 [[!format diff """
  11 diff --git a/templates/page.tmpl b/templates/page.tmpl
  12 index 5efad1a..cb76590 100644
  13 --- a/templates/page.tmpl
  14 +++ b/templates/page.tmpl
  15 @@ -30,7 +30,7 @@
  16  </head>
  17  <body>
  18
  19 -<div class="banner">
  20 +<div class="banner" role="banner">
  21    <a class="tails" href="<TMPL_VAR HOMEPAGEURL>">
  22      <span class="acronym">Tails</span><br/>
  23      <span class="slogan">The Amnesic Incognito Live System</span>
  24 @@ -155,20 +155,20 @@
  25  <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
  26
  27  <TMPL_IF SIDEBAR>
  28 -<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
  29 +<TMPL_IF HTML5><aside class="sidebar" role="navigation"><TMPL_ELSE><div class="sidebar" role="navigation"></TMPL_IF>
  30  <TMPL_VAR SIDEBAR>
  31  <TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
  32  </TMPL_IF>
  33
  34  <div id="pagebody">
  35
  36 -<TMPL_IF HTML5><section id="content"><TMPL_ELSE><div id="content"></TMPL_IF>
  37 +<TMPL_IF HTML5><section id="content" role="main"><TMPL_ELSE><div id="content" role="main"></TMPL_IF>
  38  <TMPL_VAR CONTENT>
  39  <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
  40
  41  <TMPL_UNLESS DYNAMIC>
  42  <TMPL_IF COMMENTS>
  43 -<TMPL_IF HTML5><section id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
  44 +<TMPL_IF HTML5><section id="comments" role="complementary"><TMPL_ELSE><div id="comments" role="complementary"></TMPL_IF>
  45  <TMPL_VAR COMMENTS>
  46  <TMPL_IF ADDCOMMENTURL>
  47  <div class="addcomment">
  48 @@ -183,7 +183,7 @@
  49
  50  </div>
  51
  52 -<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF>
  53 +<TMPL_IF HTML5><footer id="footer" class="pagefooter" role="contentinfo"><TMPL_ELSE><div id="footer" class="pagefooter" role="contentinfo"></TMPL_IF>
  54  <TMPL_UNLESS DYNAMIC>
  55  <TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
  56
  57 """]]
  58
  59 ----
  60
  61 Here is a review. Please "sign" any responses so we can keep track of
  62 who is talking to who :-)
  63
  64 General points:
  65
  66 The `role` attribute is not allowed by the XHTML 1.0 Strict DTD, so we
  67 should only emit it in HTML5 mode (and we should probably
  68 [[todo/generate_HTML5_by_default]]).
  69
  70 Specific roles:
  71
  72 [[!format diff """
  73 -<div class="banner">
  74 +<div class="banner" role="banner">
  75 """]]
  76
  77 There is no such class in IkiWiki's page.tmpl, so this part can't be applied.
  78 After this is applied to the main IkiWiki, you'll need to talk to the
  79 maintainers of the Tails wiki about changing that in their fork of the template.
  80
  81 [[!format diff """
  82 -<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
  83 +<TMPL_IF HTML5><aside class="sidebar" role="navigation"><TMPL_ELSE><div class="sidebar" role="navigation"></TMPL_IF>
  84 """]]
  85
  86 I don't think the sidebar is *necessarily* navigation, although it's a
  87 reasonable guess. I would hope that the fact that it's an `<aside>`
  88 in HTML5 mode is enough to give accessibility tools a clue already?
  89 Would declaring this to be a `note` be sufficient?
  90
  91 I've applied your suggested roles for #main, #comments and #footer,
  92 but only in HTML5 mode for the reason given above. I have not applied
  93 a role to the sidebar just yet.
  94
  95 --[[smcv]]