Jump to content

Accessibility issues in admin area


Recommended Posts

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.

wave.png.08961a5a77ea6fc4653c4a52be3339eb.png

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 by millipedia
learnt more about how it works in chrome...
  • Like 3
Link to comment
Share on other sites

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...

edit_page_comparisson.png.900a78c03a6211df60d21b08cb848ba6.png

 

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.

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...