Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#14684 closed Bug (duplicate)

Use <button> rather than role="button" where possible

Reported by: Mike Gifford Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

Steps to reproduce

  1. Starting from Drupal 8.1's admin screen
  2. View the source of the buttons

Expected result

<li data-drupal-ckeditor-button-name="JustifyRight" class="ckeditor-button ui-sortable-handle"><button>justify right</button></li>

Actual result

<li data-drupal-ckeditor-button-name="JustifyRight" class="ckeditor-button ui-sortable-handle"><a href="#" class="cke-icon-only cke_ltr" role="button" title="justify right" aria-label="justify right"><span class="cke_button_icon cke_buttonjustifyright_icon">justify right</span></a></li>

Other details (browser, OS, CKEditor version, installed plugins)

Coming from https://www.drupal.org/node/2738667 & https://www.drupal.org/node/2735421

First rule of ARIA use (never forget):

If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

http://w3c.github.io/aria-in-html/#rule1

Change History (4)

comment:1 Changed 3 years ago by Jakub Ś

Keywords: accessibility removed
Status: newpending
Version: 4.5.10 (GitHub - master)

We had similar issue like that some time ago - #9988. I think that Reinmar has made some pretty interesting points in comment:7 and comment:9. In general it works, there are no problems with older browsers, quirks mode and screen readers (provided there are any of these issues left). I also agree that making a change just for the sake of making change is an overkill.

Having said all that I have also checked http://nightly.ckeditor.com/16-06-29-06-06/full/samples/toolbarconfigurator/index.html#basic and to my surprise I wasn't able to tab my way to buttons which is quite a serious issue imho. When I click one of the buttons I'm able to tab through them but that initial click is needed.

@mgifford if this is about conversion from link to button then this is a duplicate of #9988. If this is about making toolbar configurator accessible for keyboard then this should probably reported in separate ticket. What do you think? I believe this is about conversion but still the configurator needs a fix.

comment:2 Changed 3 years ago by Mike Gifford

I'm pretty sure this isn't just about stylistic concerns as #9988 at least begins with.

There are places where use of ARIA reduces accessibility:

https://www.paciellogroup.com/blog/2014/10/aria-in-html-there-goes-the-neighborhood/

http://webmaster.tamu.edu/2015/01/28/making-accessibility-better-with-aria-not-worse/#.V3PuC47O6nc

comment:3 Changed 3 years ago by Marek Lewandowski

Resolution: duplicate
Status: pendingclosed

Hello @mgifford, there's no doubt that semantical element are a better choice, if possible. Looking at #9988 it requests for using semantic markup whenever possible (it mentioned also non-semantic spans, but we'd not use that). In that regard, this issue is a duplicate of #9988, which is more generic than this one.

With that in mind we're setting this issue as a duplicate and let's keep an eye on #9988.

comment:4 Changed 3 years ago by Jakub Ś

NOTE: About the configurator not being accessible. I have created a separate ticket here: #14711.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy