diff options
author | Anika Henke <anika@selfthinker.org> | 2021-03-06 10:59:24 +0000 |
---|---|---|
committer | Anika Henke <anika@selfthinker.org> | 2021-03-07 18:02:11 +0000 |
commit | 834b0b20de79be29615faead011eba07e2f8d904 (patch) | |
tree | 46ad198101806cc7d13c0c14867a898746d30920 | |
parent | 86491c6cddf80057c28aea48b309b081fd8b0497 (diff) | |
download | dokuwiki-834b0b20de79be29615faead011eba07e2f8d904.tar.gz dokuwiki-834b0b20de79be29615faead011eba07e2f8d904.zip |
Add semantic section elements to dokuwiki template
This changes the divs for the main content, header, footer,
sidebar and page tools to their semantic equivalent
(main, header, footer, nav and nav again)
and adds ARIA labels where appropriate.
The media manager popup changes to have a main and a nav.
-rw-r--r-- | lib/tpl/dokuwiki/detail.php | 10 | ||||
-rw-r--r-- | lib/tpl/dokuwiki/main.php | 17 | ||||
-rw-r--r-- | lib/tpl/dokuwiki/mediamanager.php | 8 | ||||
-rw-r--r-- | lib/tpl/dokuwiki/tpl_footer.php | 7 | ||||
-rw-r--r-- | lib/tpl/dokuwiki/tpl_header.php | 6 |
5 files changed, 23 insertions, 25 deletions
diff --git a/lib/tpl/dokuwiki/detail.php b/lib/tpl/dokuwiki/detail.php index 8e65410d7..ec6eabb60 100644 --- a/lib/tpl/dokuwiki/detail.php +++ b/lib/tpl/dokuwiki/detail.php @@ -34,7 +34,7 @@ header('X-UA-Compatible: IE=edge,chrome=1'); <div class="wrapper group" id="dokuwiki__detail"> <!-- ********** CONTENT ********** --> - <div id="dokuwiki__content"><div class="pad group"> + <main id="dokuwiki__content"><div class="pad group"> <?php html_msgarea() ?> <?php if(!$ERROR): ?> @@ -82,20 +82,20 @@ header('X-UA-Compatible: IE=edge,chrome=1'); <div class="docInfo"><?php tpl_pageinfo(); ?></div> */ ?> - </div></div><!-- /content --> + </div></main><!-- /content --> <hr class="a11y" /> <!-- PAGE ACTIONS --> <?php if (!$ERROR): ?> - <div id="dokuwiki__pagetools"> - <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3> + <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> + <h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3> <div class="tools"> <ul> <?php echo (new \dokuwiki\Menu\DetailMenu())->getListItems(); ?> </ul> </div> - </div> + </nav> <?php endif; ?> </div><!-- /wrapper --> diff --git a/lib/tpl/dokuwiki/main.php b/lib/tpl/dokuwiki/main.php index 67b6e61de..014a35c0e 100644 --- a/lib/tpl/dokuwiki/main.php +++ b/lib/tpl/dokuwiki/main.php @@ -34,7 +34,8 @@ $showSidebar = $hasSidebar && ($ACT=='show'); <?php if($showSidebar): ?> <!-- ********** ASIDE ********** --> - <div id="dokuwiki__aside"><div class="pad aside include group"> + <nav id="dokuwiki__aside" aria-label="<?php echo $lang['sidebar'] + ?>"><div class="pad aside include group"> <h3 class="toggle"><?php echo $lang['sidebar'] ?></h3> <div class="content"><div class="group"> <?php tpl_flush() ?> @@ -42,11 +43,11 @@ $showSidebar = $hasSidebar && ($ACT=='show'); <?php tpl_include_page($conf['sidebar'], true, true) ?> <?php tpl_includeFile('sidebarfooter.html') ?> </div></div> - </div></div><!-- /aside --> + </div></nav><!-- /aside --> <?php endif; ?> <!-- ********** CONTENT ********** --> - <div id="dokuwiki__content"><div class="pad group"> + <main id="dokuwiki__content"><div class="pad group"> <?php html_msgarea() ?> <div class="pageId"><span><?php echo hsc($ID) ?></span></div> @@ -63,19 +64,19 @@ $showSidebar = $hasSidebar && ($ACT=='show'); <div class="docInfo"><?php tpl_pageinfo() ?></div> <?php tpl_flush() ?> - </div></div><!-- /content --> - <hr class="a11y" /> + <hr class="a11y" /> + </div></main><!-- /content --> <!-- PAGE ACTIONS --> - <div id="dokuwiki__pagetools"> - <h3 class="a11y"><?php echo $lang['page_tools']; ?></h3> + <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading"> + <h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3> <div class="tools"> <ul> <?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?> </ul> </div> - </div> + </nav> </div><!-- /wrapper --> <?php include('tpl_footer.php') ?> diff --git a/lib/tpl/dokuwiki/mediamanager.php b/lib/tpl/dokuwiki/mediamanager.php index 53ed06292..c39b81f37 100644 --- a/lib/tpl/dokuwiki/mediamanager.php +++ b/lib/tpl/dokuwiki/mediamanager.php @@ -27,18 +27,18 @@ header('X-UA-Compatible: IE=edge,chrome=1'); <body> <div id="media__manager" class="dokuwiki"> <?php html_msgarea() ?> - <div id="mediamgr__aside"><div class="pad"> + <nav id="mediamgr__aside"><div class="pad"> <h1><?php echo hsc($lang['mediaselect'])?></h1> <?php /* keep the id! additional elements are inserted via JS here */?> <div id="media__opts"></div> <?php tpl_mediaTree() ?> - </div></div> + </div></nav> - <div id="mediamgr__content"><div class="pad"> + <main id="mediamgr__content"><div class="pad"> <?php tpl_mediaContent() ?> - </div></div> + </div></main> </div> </body> </html> diff --git a/lib/tpl/dokuwiki/tpl_footer.php b/lib/tpl/dokuwiki/tpl_footer.php index c7a04e155..0750c7b58 100644 --- a/lib/tpl/dokuwiki/tpl_footer.php +++ b/lib/tpl/dokuwiki/tpl_footer.php @@ -8,7 +8,7 @@ if (!defined('DOKU_INC')) die(); ?> <!-- ********** FOOTER ********** --> -<div id="dokuwiki__footer"><div class="pad"> +<footer id="dokuwiki__footer"><div class="pad"> <?php tpl_license(''); // license text ?> <div class="buttons"> @@ -28,7 +28,6 @@ if (!defined('DOKU_INC')) die(); src="<?php echo tpl_basedir(); ?>images/button-dw.png" width="80" height="15" alt="Driven by DokuWiki" /></a> </div> -</div></div><!-- /footer --> -<?php -tpl_includeFile('footer.html'); + <?php tpl_includeFile('footer.html'); ?> +</div></footer><!-- /footer --> diff --git a/lib/tpl/dokuwiki/tpl_header.php b/lib/tpl/dokuwiki/tpl_header.php index aca45ffeb..b314b27ea 100644 --- a/lib/tpl/dokuwiki/tpl_header.php +++ b/lib/tpl/dokuwiki/tpl_header.php @@ -8,7 +8,7 @@ if (!defined('DOKU_INC')) die(); ?> <!-- ********** HEADER ********** --> -<div id="dokuwiki__header"><div class="pad group"> +<header id="dokuwiki__header"><div class="pad group"> <?php tpl_includeFile('header.html') ?> @@ -78,7 +78,5 @@ if (!defined('DOKU_INC')) die(); </div> <?php endif ?> - - <hr class="a11y" /> -</div></div><!-- /header --> +</div></header><!-- /header --> |