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.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 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
> > > > > > list messages to = EMAIL ADDRESS 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 ADDRESS REMOVED =
>

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.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS 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 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
> > > > > > > > > list messages to = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >
> > > messages to = EMAIL ADDRESS REMOVED =
>
> > > >

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 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.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS 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 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
> > > > > > > > > list messages to = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >
> > > list messages to = EMAIL ADDRESS REMOVED =
>
> > > list messages to = EMAIL ADDRESS REMOVED =
>

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.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 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.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS 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 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
> > > > > > > > > list messages to = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >
> > > list messages to = EMAIL ADDRESS REMOVED =
>
> > > list messages to = EMAIL ADDRESS REMOVED =
>