WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: the state of contenteditable

for

Number of posts in this thread: 7 (In chronological order)

From: Jennison Mark Asuncion
Date: Thu, May 22 2014 12:24PM
Subject: the state of contenteditable
No previous message | Next message →

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

From: Detlev Fischer
Date: Thu, May 22 2014 1:02PM
Subject: Re: the state of contenteditable
← Previous message | Next message →

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

From: Jesse Hausler
Date: Wed, May 28 2014 3:38PM
Subject: Re: the state of contenteditable
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Wed, May 28 2014 4:54PM
Subject: Re: the state of contenteditable
← Previous message | Next message →

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.

From: Jesse Hausler
Date: Wed, May 28 2014 5:06PM
Subject: Re: the state of contenteditable
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Wed, May 28 2014 5:24PM
Subject: Re: the state of contenteditable
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Thu, May 29 2014 1:45AM
Subject: Re: the state of contenteditable
← Previous message | No next message

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.