Accessibility issues in admin area

[millipedia]

We're very keen on producing accessible websites (hey, I'm sure we all are) and we make sure that any website designs we create hit accessibilty targets. We do a lot of work with public sector bodies who have legal requirements to meet. But it looks to me as if the default admin interface doesn't hit those targets.

Running the WAVE accessibility tool on a default admin page pulls back a bunch of contrast errors and about 10 other errors.

We can fix the contrast errors easily enough (especially now we have the Less module) and I suspect most of the other errors should be relatively east to fix (they mostly seem to be missing labels and broken aria tags) but one thing that looks more problematic is being able to navigate using the keyboard. At the moment you don't seem to be able to use the dropdown menu or page lister without using the mouse. Keyboard navigation is one of the legal requirements for lots of our clients here in the UK.

So before I dive in has anyone done any work on fixing accessibility in an admin theme? Or is this a fundamental issue with UiKit?

 

EDIT: seems you can tab onto the page lister in Chrome even if you can't in Firefox, which improves things a lot but I still can't seem to use the dropdown menus...
EDIT 2: So in Chrome you can tab to the top nav menu items but there's no visible focus. And whilst you can't view the dropdowns (at least I can't) then you can navigate to top level page.

 

Edited July 15, 2021 by millipedia
learnt more about how it works in chrome...

[millipedia]

I've tweaked the default colours (using the handy tool at https://learnui.design/tools/accessible-color-generator.html ) to be as close to the current colours as possible but still hitting AA contrast requirements.

Here's before and after screenshots for comparison. I don't think it's too drastic a change...

 

The admin.less changes for that are:

/**************************************************************
 * Primary variables
 *
 * Adjusted to hit AA accessibility.
 *
 */

 @reno-text-color: #354b60;
 @reno-link-color: #df2b5b; // #e83561;
 @reno-link-hover-color: darken(@reno-link-color, 10%);
 @reno-dark-background: #1C2836;
 @reno-muted-background: #f0f3f7;
 @reno-muted-text-color: #6f7580; // #8d939e; 
 @reno-muted-text-color-alternate: #577898; // #6c8dae; 
 @reno-primary-background: #008668; // #3eb998;
 @reno-secondary-background: #e2e9ef;
 @reno-success-background: #8bccde;
 @reno-success-color: @reno-text-color;
 @reno-warning-background: #FFD15E;
 @reno-warning-color: @reno-text-color;
 @reno-danger-background: #bc283d;
 @reno-danger-color: #fff;
 @reno-alert-background: #ffd;
 @reno-alert-color: @reno-text-color;
 @reno-primary-headline-color: #1C2836;
 @reno-secondary-headline-color: lighten(@reno-primary-headline-color, 30%);
 @reno-notes-text-color: @reno-muted-text-color;
 @reno-notes-background: #ffd;
 @reno-masthead-background: @reno-dark-background;
 @reno-masthead-link-color: rgba(255, 255, 255, 0.7); 
 @reno-masthead-link-hover-color: lightblue;
 @reno-masthead-link-current-color: #fff;
 @reno-masthead-icon-color: #6f7580; // #8d939e;
 @reno-masthead-search-text-color: #8d939e; // #008668
 @reno-masthead-search-background: transparent;
 @reno-masthead-search-border-color: lighten(#253447, 10%);
 @reno-masthead-search-focus-background: lighten(#253447, 5%);
 @reno-masthead-search-focus-text-color: #fff;
 @reno-masthead-search-focus-border-color: @reno-masthead-search-focus-background;
 @reno-masthead-search-icon-color: @reno-masthead-icon-color;
 @reno-button-text-color: #fff;
 @reno-button-background: @reno-primary-background;
 @reno-button-hover-background: @global-link-color;
 @reno-button-secondary-background: @reno-muted-text-color-alternate; 
 @reno-dropdown-background: #fff; 
 @reno-dropdown-color: @reno-text-color;
 @reno-dropdown-hover-background: #e2e9ef;
 @reno-dropdown-border-color: #d9e1ea;
 @reno-dropdown-border: 1px solid @reno-dropdown-border-color;
 @reno-dropdown-nav-icon-color: #667982; //#97aab4;
 @reno-page-list-link-color: #7a002b;
 @reno-page-list-link-open-color: #bb153e;
 @reno-page-list-icon-color: @reno-link-color;
 @reno-page-list-link-active-color: @reno-link-hover-color;
 @reno-page-list-link-hover-color: @reno-link-hover-color;
 @reno-page-list-action-link-color: #fff;
 @reno-page-list-action-link-background-color: @reno-link-color; 
 @reno-page-list-action-link-hover-color: #fff;
 @reno-page-list-action-link-hover-background-color: @reno-link-hover-color;
 @reno-inputfield-border: 1px solid #d9e1ea;
 @reno-inputfield-input-background: #f0f3f7;
 @reno-inputfield-input-border-color: #b1c3d4 #cbd7e3 #cbd7e3 #cbd7e3;
 @reno-inputfield-select-background: #f0f3f7;
 @reno-inputfield-select-border-color: #cbd7e3;
 @reno-form-radio-checked-background: @reno-muted-text-color-alternate;
 @reno-offcanvas-text-color: @reno-text-color;
 @reno-offcanvas-link-color: @reno-text-color;
 @reno-offcanvas-link-hover-color: @reno-link-color;
 @reno-offcanvas-link-open-color: @reno-link-color;
 @reno-offcanvas-background: @reno-secondary-background; 
 @reno-offcanvas-search-background: #fff;
 @reno-language-tab-background: transparent;
 @reno-language-tab-color: @reno-text-color;
 @reno-language-tab-current-background: #d2dce6;
 @reno-language-tab-current-color: @reno-primary-headline-color;
 @reno-language-tab-hover-background: @reno-muted-background;
 @reno-language-tab-hover-color: @reno-text-color;
 @reno-language-tab-empty-color: @reno-muted-text-color;
 @reno-table-header-color: @reno-muted-text-color-alternate;
 @reno-table-header-current-color: @reno-primary-background;

I think it'd be worth updating to the defaults to something like this - seems an easy step in the right direction.

[matjazp]

I worked on this too. Attached is my modified admin theme I posted somewhere on the forum, but this version is bit modified, I tried to fix some focus issues...

admin.less

[millipedia]

So today I learned that on MacOS you need to update settings to allow keyboard navigation of links in Firefox:

https://www.a11yproject.com/posts/2017-12-29-macos-browser-keyboard-navigation/

Chrome just ignores this setting on MacOS and seems to do what it wants (and which in this case is what I was expecting to happen).

Anyway, the upshot is that whilst I still can't fire the drop down menus in the UIKit admin theme I can at least navigate the top level menu items using a keyboard without having to change browsers.

[matjazp]

Those hover dropdowns bothers me too. I use desktop browser and sometimes my hand shakes and can't move my mouse with enough precision. When you hover over top level menu, the second level menu is opened and if you happen to move your mouse outside of the menu area, the menu closes. So I usually just click on Pages, Setup, Modules.