Adding aria-label to GuestUser nav

[kenirwin]

Our accessibility folks note that if two nav elements appear on the same page, they should have aria-labels to differentiate between their purposes.

We’re using the GuestUser, and find that the GuestUser plugin adds a nav with no label – it’s structually different than the banner for an admin user. Is there a way that I can add an aria-label in this plugin, or that the plugin could be updated to provide this feature?

[jflatnes]

Can you point to what element is the offending one? My recollection is that Guest User does just use the “normal” user bar that’s used when regular users are logged in when the plugin isn’t installed. But maybe you’re talking about something else.

[kenirwin]

Here’s the page I’m looking at: https://dlp.lib.miamioh.edu/picturebook/

And the code for the login bar. I’d just like to be able to add an aria-label on the admin-bar, or even have a default one supplied by Omeka like aria-label="Site Login"

<nav id="admin-bar">

<ul class="navigation">
    <li>
        <a id="menu-guest-user-login" href="/picturebook/guest-user/user/login">Login</a>
    </li>
    <li>
        <a id="menu-guest-user-register" href="/picturebook/guest-user/user/register">Register</a>
    </li>
</ul></nav>

It does look like that’s the same code as the main Omeka user info, so this probably isn’t a GuestUser issue after all. When I was looking initially I was comparing it to the code on the admin side, which uses a <header> element.

<header role="banner">
        <div id="site-title" class="two columns">
        <a href="https://dlp.lib.miamioh.edu/picturebook" target="_blank">Children's Picture Book Database at Miami University</a>
    </div>
	<button id="mobile-navbar-toggle" class="mobile-menu" data-target="#global-nav" title="Admin" aria-label="Admin" aria-expanded="false"><span class="admin-icon" aria-role="hidden"></span></button>

    <nav id="global-nav">
        <ul class="navigation">
    <li>
        <a href="/picturebook/admin/plugins">Plugins</a>
    </li>
    <li>
        <a href="/picturebook/admin/appearance">Appearance</a>
    </li>
    <li>
        <a href="/picturebook/admin/users">Users</a>
    </li>
    <li>
        <a href="/picturebook/admin/settings">Settings</a>
    </li>
</ul>
        
        <ul id="user-nav">
                                <li>Welcome, <a href="/picturebook/admin/users/edit/10">Ken Irwin</a></li>
            <li><a href="/picturebook/admin/users/logout" id="logout">Log Out</a></li>
                </ul>
    </nav>
    </header>

[jflatnes]

OK, so it’s just the admin bar.

It turns out we happen to have made that change ourselves already, a few weeks ago, just adding an aria-label to the admin-bar nav element.

[kenirwin]

Thanks @jflatnes – what’s the best way for us to get access to this feature? Will it be included in an upcoming release? THanks

[jflatnes]

It’ll be in an upcoming release, but I can’t give you a date.

common/admin-bar.php is the file that generates that bar and you can override it in your theme to set an aria-label or make whatever other changes you want.

[kenirwin]

Thanks!

I also notice a related issue re: pagination. In:
application/views/scripts/common/pagination_control.php
There’s a labeled nav:
<nav class="pagination-nav" aria-label="<?php echo __('Pagination'); ?>">

But since this element is used twice (once at the bottom and once at the top of many pages, at least in some themes), the repetion fails to meet the “unique accessible name as required when two or more nav elements are present” .

Is there by any chance a fix for that coming as well?

[jflatnes]

We actually have been looking at that problem just now, in fact.

Do you have a preferred solution? Simply calling one “Bottom Pagination” or “Pagination 2”?

[kenirwin]

Bottom Pagination sounds good to me – thanks!

[jflatnes]

This change is in: we’re doing “Top pagination” and “Bottom pagination” for our own, and themes/plugins can pass whatever they want as an aria-label for any instance of the pagination.