Loading...
 
Skip to main content
Updating to improve accessibility

Proposal to update Tiki's page structure to improve accessibility

Update: The GitLab commit of this proposal is here.


This proposal is to improve Tiki's page structure based on the references cited below. What we need to do is make sure the regions are labelled appropriately, and the headings are organized coherently. This is primarily to improve accessibility, following the W3.org guidelines. The changes are made in the templates/layouts/ . . . /layout_view.tpl files, and in the modules block file. The suggestions below are based on what I've learned about the topic so far, and of course anyone who has ideas please add them to the page for future improvements.

Also, I only looked at the wiki page layout so far. The changes outside of the center column will carry over to other content sections, but their center columns will also need to be checked, I imagine.

This proposal was sparked by: https://gitlab.com/tikiwiki/tiki/-/merge_requests/5671, where the issue came up regarding module heading consistency and the hierarchy of heading sizes on a Tiki page. The main reference for this is https://www.w3.org/WAI/tutorials/page-structure/.


The code below is based on templates/layouts/basic/layout_view.tpl, simplified by removing the side-column arrangements except for all three columns, and removing most CSS classes, if/then statements, etc. The proposed changes are indicated with comments, which are numbered to refer to notes below the code.

Copy to clipboard
<html>
    <head>
        {include file='header.tpl'}
    </head>
    <body>
        <a class="btn skipnav" href="#col1">{tr}Skip to main content{/tr}</a>  {* === Webaim.org recommends that this link be hidden (offscreen) until to the user navigates to it with the keyboard. === *}
        <div class="container">
            <div class="row">
                <header class="page-header" role="banner">  {* === (1) role="banner" ADDED === *}
                    {modulelist zone=top heading_text='{tr}Site identity, navigation, etc.{/tr}'} {* === (2) h2 HEADING, ETC. ADDED VIA ModuleList.php === *}
                </header>
            </div>
            <div class="row row-middle" id="row-middle">
                {modulelist zone=topbar heading_text='{tr}Navigation and related functionality and content{/tr}'}    {* === (2) h2 HEADING, ETC. ADDED VIA ModuleList.php === *}
                <div class="page-content-top-margin"></div>
                <div class="col col1" id="col1">
                    <div id="col1top-outer-wrapper">
                        <div class="d-none d-lg-block">
                            {if $prefs.feature_left_column eq 'user'}
                                <div class="side-col-toggle">
                                    {$icon_name = (not empty($smarty.cookies.hide_zone_left)) ? 'toggle-right' : 'toggle-left'}
                                    {icon name=$icon_name class='toggle_zone left btn btn-xs btn-secondary' href='#' title='{tr}Toggle left modules{/tr}'}
                                </div>
                            {/if}
                        </div>
                        <div class="col1top-inner-wrapper">
                            {modulelist zone=pagetop heading_text='{tr}Related content{/tr}' role=complementary} {* === (3) h2 HEADING, ROLE, ETC. ADDED VIA ModuleList.php === *}
                            <div id="feedback" role="alert"> {* === WRAPPING div ADDED TO PROVIDE role=alert  === *}
                                {feedback}
                            </div>
                            {block name=quicknav}{/block} {* === (displays wikitopline) === *}
                        </div>
                        <div class="d-none d-lg-block">
                            {if $prefs.feature_right_column eq 'user'}
                                <div class="side-col-toggle">
                                    {$icon_name = (not empty($smarty.cookies.hide_zone_right)) ? 'toggle-left' : 'toggle-right'}
                                    {icon name=$icon_name class='toggle_zone right btn btn-xs btn-secondary' href='#' title='{tr}Toggle right modules{/tr}'}
                                </div>
                            {/if}
                        </div>
                    </div>
                    {block name=title}{/block} {* === (displays page title, depending on pref setting) === *}
                    {block name=navigation}{/block} {* === (displays translation management GUI, etc.) === *}
                    <main>  {* === (4) MAIN ELEMENT ADDED, TO CONTAIN content BLOCK === *}
                        {block name=content}{/block}
                    </main>
                    {modulelist zone=pagebottom  heading_text='{tr}Related content{/tr}' role=complementary}    {* === (3) h2 HEADING, ROLE, ETC. ADDED VIA ModuleList.php === *}
                </div>
                <div class="col col2" id="col2">
                    {modulelist zone=left class="left-aside" heading_text='{tr}More content and functionality (left side){/tr}'} {* === (5) div CHANGED TO aside AND h2 HEADING, ETC. ADDED VIA ModuleList.php === *}
                </div>
                <div class="col col3" id="col3">
                    {modulelist zone=right class="right-aside" heading_text='{tr}More content and functionality (right side){/tr}'}  {* === (5) div CHANGED TO aside AND h2 HEADING, ETC. ADDED VIA ModuleList.php === *}
                </div>
            </div>
            <footer class="row footer main-footer" id="footer">
                <div class="footer_liner">
                    {modulelist zone=bottom heading_text='{tr}Site information, links, etc.{/tr}' role=contentinfo} {* === (6) h2 HEADING, ROLE, ETC. ADDED VIA ModuleList.php === *}
                </div>
            </footer>
        </div>
        {include file='footer.tpl'}
    </body>
</html>

Notes

(1) The ARIA role given to the header element is typically banner, as this is where the site name and logo, etc. are - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role.

(2) The hierarchy of headings needs to be coherent and continuous, with no gaps in heading sizes. The page title is the h1 heading, and Tiki's modules have always had h3 headings. The h3 size makes sense semantically, though, when each module zone has an h2 heading. This new heading is visually hidden, so is available to screen readers but not visible on the normal screen. The h2 heading text needs to be describe the contents of the module zones, which is difficult because we don't know what modules will be assigned or what purpose the module zone will have at each site. For this reason, in this update, the heading text is pretty generic so it can be accurate, without repeating the role information and so on. To be really thorough, this heading text could be an admin preference, one for each module zone; maybe that could be a future enhancement. Also, aria-labelledby is added in order to label the module zone using the heading text (https://www.w3.org/WAI/tutorials/page-structure/regions/).

(3) In these module zones, not only is the h2 heading added, but also an ARIA role. HTML5 nav and aside elements don't need a role specified because the role is implied by the element type. But these modules contained in divs, which are role-neutral, need a role specified for accessibility purposes. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)

(4) Every web page should have a main element, to delineate the main content of the page, so here the content block is wrapped with main tags (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role#use_only_one_main_role_per_document).

(5) The div id="col2" and div id="col3" elements remain as they were but now the div class="modules" elements that they contain are changed to aside elements for better HTML5 semantics. No role needs to be specified for these. Leaving the Bootstrap grid div elements as they were is based on the idea that these are just positioning elements with no semantic significance, and changing the div class="modules" elements means the same pattern regarding the heading and so on, implemented with ModuleList.php can be used consistently for all the module zones.

(6) The page footer should have a role="contentinfo" as it typically contains copyright information, etc. - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role

Other details

  • Best practice seems to be to make the skipnav link near the top of the document out of sight by placing it offscreen until the (partially sighted) user navigates to it via the tab key, rather than having it visually hidden (screen reader-only). Apparently having this button visible is helpful to some partially sighted users (https://webaim.org/techniques/skipnav/, https://www.washington.edu/accesscomputing/it-good-idea-make-skip-navigation-links-invisible).
  • Most of the page's areas of regions have clear and distinct purposes but there are a number of elements at the top of the middle column that have kind complementary purposes. The first version of this proposal suggested adding a section element to contain them, so this includes the pagetop module zone, the wikitopline, the page title and the translation management interface, depending on what preferences are activated. But based on more research and thinking, there is no enclosing section and instead these items are treated separately. Todo: the navigation block content is in tiki-wiki_topline.tpl and this still needs to be looked at from an accessibility perspective.
  • The module zone headings, rather than using the Tiki technical terminology like "topbar zone", should makes sense to non-technical users, so the headings should reflect the content (modules) that is most likely to be assigned to the zones. "Page header" makes sense for the top module zone. Maybe "Secondary page header" for the topbar zone, but suggestions are welcome.
  • Related proposal: The menu module should have a new parameter, aria-label, so the main navbar of the site can have something like aria-label="Primary Navigation" and other specific-purpose menus created for the site can have appropriate labels.
History Source Comments
Show PHP error messages