WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: the state of contenteditable

for

From: Bryan Garaventa
Date: May 29, 2014 1:45AM


I did a bit of testing to see how it works in JAWS15 and the latest NVDA, and there still appears to be a few bugs in each.

Sample markup:

<div contenteditable tabindex="0" role="textbox" aria-multiline="true" aria-label="Message" ></div>

In JAWS and IE11, it works well.
However, using JAWS and FF and Chrome, pressing Enter to add a line break will automatically exit Forms Mode.

Using NVDA in FF and Chrome, it works well.
However, using NVDA in IE11, none of the typed content is readable using the arrow keys.

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Wednesday, May 28, 2014 4:24 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] the state of contenteditable

No, the best place to check for mapped roles is within the UAIG Role Mappings Table http://www.w3.org/TR/wai-aria-implementation/#mapping_role_table

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
Sent: Wednesday, May 28, 2014 4:07 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] the state of contenteditable

Oh, did this not make it into the final recommendation?
http://www.w3.org/TR/2007/WD-aria-role-20070601/#textarea


On Wed, May 28, 2014 at 3:54 PM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

> ARIA should be used to ensure proper AT mappings in the accessibility
> tree, and to set an explicit label for the field.
>
> There is no textarea role however, this should be textbox. See
> http://www.w3.org/TR/wai-aria/roles#textbox
>
> So, role="textbox" should be added to set the role, aria-multiline
> should be set to 'true' to set textarea-like input, and aria-label or
> aria-labelledby should be set to assign an explicit label for the
> field, all of which would be on the focusable element that includes
> contenteditable.
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
> Sent: Wednesday, May 28, 2014 2:38 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] the state of contenteditable
>
> Great topic.. i was just about to ask about contenteditable divs...
>
> We're looking to use this style of rich text editor and I was
> wondering if the contenteditable part was accessible, if we need to
> add role="textarea", etc..
>
> http://quilljs.com/examples/
>
> Don't get caught up on the keyboard trap or the inaccessible toolbar
> on the second example. Those can all be fixed by the developer.
>
> Jesse
>
>
> On Thu, May 22, 2014 at 12:02 PM, Detlev Fischer <
> <EMAIL REMOVED> > wrote:
>
> > Hi Jennison,
> >
> > I put together an example in Feb 2013 using contenteditable and
> > testing against several screen reader browser combos - sorry it is
> > dated but maybe a start:
> > http://www.3needs.org/en/testing/code/aria-label-1.html
> >
> > Of course suport might have improved since.
> >
> > Best, Detlev
> >
> > On 22 May 2014, at 20:24, Jennison Mark Asuncion <
> > <EMAIL REMOVED> > wrote:
> >
> > > Hi there,
> > >
> > > I've been asked by a colleague for the current accessibility state
> > > of the contenteditable attribute. Is there any recommended ARIA
> > > support available if this is used?
> > >
> > > Jennison
> > > --
> > > Jennison Mark Asuncion
> > > LinkedIn at www.linkedin.com/in/jennison Follow me on Twitter
> > > www.twitter.com/jennison Organizer, Bay Area Accessibility and
> > > Inclusive Design
> > www.meetup.com/a11ybay
> > > Organizer, Accessibility Camp Bay Area
> > > www.accessibilitycampbay.org Co-Founder, Global Accessibility
> > > Awareness Day www.globalaccessibilityawarenessday.org
> > > > > > > > > list messages to <EMAIL REMOVED>
> >
> > --
> > Detlev Fischer
> > testkreis - das Accessibility-Team von feld.wald.wiese c/o
> > feld.wald.wiese Thedestraße 2
> > 22767 Hamburg
> >
> > Tel +49 (0)40 439 10 68-3
> > Mobil +49 (0)1577 170 73 84
> > Fax +49 (0)40 439 10 68-5
> >
> > http://www.testkreis.de
> > Beratung, Tests und Schulungen für barrierefreie Websites
> >
> >
> >
> >
> > > > > > list messages to <EMAIL REMOVED>
> >
> > > list messages to <EMAIL REMOVED>
>
> > > list messages to <EMAIL REMOVED>
>