Using WAI-ARIA for code folding?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Using WAI-ARIA for code folding?

Rich Morin
I have been experimenting with ways to present computer source code,
using HTML markup.  One of the things I'd like to support is code
folding (selectively hiding and showing sets of lines, based on the
hierarchical structure of the code):

  http://wiki.cfcl.com/Projects/AxAp/Code_Mocks

It seems like WAI-ARIA attributes could be used for this, as in:

 Example 41 - Treeview
 http://oaa-accessibility.org/example/41/

However, it isn't a very close match to my use case.  Given that
someone else may have done work in this area, I thought I should
ask for help.  Any suggestions before I start hacking?

-r

--
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation



Reply | Threaded
Open this post in threaded view
|

RE: Using WAI-ARIA for code folding?

Sean Murphy (seanmmur)
I assume when you refer to code folding is that you are collapsing the actual code and showing the function only. If I am right, I would look at the aria role for expand/collapse as this might be all you need.


Sean Murphy
Accessibility Software engineer
[hidden email]
Tel: +61 2 8446 7751 Cisco Systems, Inc.
The Forum 201 Pacific Highway
ST LEONARDS
2065
Australia
cisco.com
 
 Think before you print.
This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.

-----Original Message-----
From: Rich Morin [mailto:[hidden email]]
Sent: Thursday, 4 August 2016 1:29 PM
To: [hidden email]
Subject: Using WAI-ARIA for code folding?

I have been experimenting with ways to present computer source code, using HTML markup.  One of the things I'd like to support is code folding (selectively hiding and showing sets of lines, based on the hierarchical structure of the code):

  http://wiki.cfcl.com/Projects/AxAp/Code_Mocks

It seems like WAI-ARIA attributes could be used for this, as in:

 Example 41 - Treeview
 http://oaa-accessibility.org/example/41/

However, it isn't a very close match to my use case.  Given that someone else may have done work in this area, I thought I should ask for help.  Any suggestions before I start hacking?

-r

--
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation




Reply | Threaded
Open this post in threaded view
|

RE: Using WAI-ARIA for code folding?

Beranek, Nicholas
Sean is correct. Leverage the aria-expanded property on a link or button and toggle it between "true" and "false" depending on the state. You can also use aria-controls="idref-of-drawer" to create a programmatic relationship between the title and the drawer.

Although, the more I think about it, for SC 2.4.4 Link Purpose (In Context) you can use the link text by itself. In the "Code_Mocks" example below, they toggle the link text from "Show Code" to "Hide Code". Maintain focus on the link and ensure the code snippet is the next item within the DOM.

Nick Beranek
Capital One

-----Original Message-----
From: Sean Murphy (seanmmur) [mailto:[hidden email]]
Sent: Thursday, August 04, 2016 12:12 AM
To: Rich Morin; [hidden email]
Subject: RE: Using WAI-ARIA for code folding?

I assume when you refer to code folding is that you are collapsing the actual code and showing the function only. If I am right, I would look at the aria role for expand/collapse as this might be all you need.


Sean Murphy
Accessibility Software engineer
[hidden email]
Tel: +61 2 8446 7751 Cisco Systems, Inc.
The Forum 201 Pacific Highway
ST LEONARDS
2065
Australia
cisco.com
 
 Think before you print.
This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.

-----Original Message-----
From: Rich Morin [mailto:[hidden email]]
Sent: Thursday, 4 August 2016 1:29 PM
To: [hidden email]
Subject: Using WAI-ARIA for code folding?

I have been experimenting with ways to present computer source code, using HTML markup.  One of the things I'd like to support is code folding (selectively hiding and showing sets of lines, based on the hierarchical structure of the code):

  http://wiki.cfcl.com/Projects/AxAp/Code_Mocks

It seems like WAI-ARIA attributes could be used for this, as in:

 Example 41 - Treeview
 http://oaa-accessibility.org/example/41/

However, it isn't a very close match to my use case.  Given that someone else may have done work in this area, I thought I should ask for help.  Any suggestions before I start hacking?

-r

--
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation




________________________________________________________

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.


Reply | Threaded
Open this post in threaded view
|

Re: Using WAI-ARIA for code folding?

Rich Morin
Thanks to Sean and Nicholas for their comments and suggestions!

FWIW, I found a couple of articles that seem pretty relevant to this task.
Unfortunately, both of them are a bit dated.  Has the web browser or screen
reader environment changed in any way that I should take into account?

  Using ARIA trees (W3C wiki, 2012)
  https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees

  (Not so) Simple ARIA Tree Views and Screen Readers (Jason Kiss, 2013)
  http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers

The second article suggests a "best approach" that handles some issues
that the author found in various browsers and screen readers:

  In this proposed best approach, the tree view uses an unordered list, and
  each list item has a nested link.  The list items have role="treeitem",
  and implement aria-selected, aria-level, and aria-expanded if they have
  children.  The nested link in each list item is set with role="presentation"
  and tabindex="-1".  All of these attributes are added using JavaScript,
  since the functionality of the tree view depends on scripted arrow key
  controls.

Does this seem like a reasonable starting point?

-r

 --
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation



Reply | Threaded
Open this post in threaded view
|

RE: Using WAI-ARIA for code folding?

Bryan Garaventa
Hi,
If you use a Tree widget, it will enforce a form field type effect for screen reader users, which will make it nearly impossible to review and copy code if that is what you want.

The simple Accordion pattern would work best for this, as suggested by others earlier.

Here is some code recently built for the W3C that demonstrates this, with configuration settings within the file setup.js for changing the functionality as needed.
http://whatsock.com/test/w3c/ARIA%20Accordions.zip

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
[hidden email]
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: Rich Morin [mailto:[hidden email]]
Sent: Thursday, August 04, 2016 10:29 AM
To: [hidden email]
Subject: Re: Using WAI-ARIA for code folding?

Thanks to Sean and Nicholas for their comments and suggestions!

FWIW, I found a couple of articles that seem pretty relevant to this task.
Unfortunately, both of them are a bit dated.  Has the web browser or screen reader environment changed in any way that I should take into account?

  Using ARIA trees (W3C wiki, 2012)
  https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees

  (Not so) Simple ARIA Tree Views and Screen Readers (Jason Kiss, 2013)
  http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers

The second article suggests a "best approach" that handles some issues that the author found in various browsers and screen readers:

  In this proposed best approach, the tree view uses an unordered list, and
  each list item has a nested link.  The list items have role="treeitem",
  and implement aria-selected, aria-level, and aria-expanded if they have
  children.  The nested link in each list item is set with role="presentation"
  and tabindex="-1".  All of these attributes are added using JavaScript,
  since the functionality of the tree view depends on scripted arrow key
  controls.

Does this seem like a reasonable starting point?

-r

 --
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation




Reply | Threaded
Open this post in threaded view
|

Re: Using WAI-ARIA for code folding?

Rich Morin
> On Aug 4, 2016, at 12:34, Bryan Garaventa wrote:
> If you use a Tree widget, it will enforce a form field type effect
> for screen reader users, which will make it nearly impossible to
> review and copy code if that is what you want.

Ideally, the user would be able to review, edit, copy and paste, etc.
However, being able to efficiently review code would be a good start.

> The simple Accordion pattern would work best for this, as suggested
> by others earlier.

I can't find those suggestions; can you point me to a specific posting?

> Here is some code recently built for the W3C that demonstrates this,
> with configuration settings within the file setup.js for changing the
> functionality as needed.

Thanks!  I hacked up the example and got it to display two alternating
functions:

  http://cfcl.com/rdm/Projects/ARIA_Accord/t1.htm

I suspect there's a simple way to display combinations of functions
(toggling them individually), but my web-fu is a bit sketchy.  Help?

For extra credit, it would be great to be able to hide and show parts
of functions (e.g, the body of the case construct).  Suggestions?.

-r

 --
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation



Reply | Threaded
Open this post in threaded view
|

RE: Using WAI-ARIA for code folding?

Beranek, Nicholas
Looks good, Rich. Each are reading out as a "collapsed button" that switches to "expanded" once the state changes.

One minor issue for your document: Ensure that <dt> and <dd> are the only children of <dl>. You have a <tt> element in there as a child that's not valid HTML.

Nick Beranek
Capital One

-----Original Message-----
From: Rich Morin [mailto:[hidden email]]
Sent: Thursday, August 04, 2016 7:38 PM
To: [hidden email]
Subject: Re: Using WAI-ARIA for code folding?

> On Aug 4, 2016, at 12:34, Bryan Garaventa wrote:
> If you use a Tree widget, it will enforce a form field type effect for
> screen reader users, which will make it nearly impossible to review
> and copy code if that is what you want.

Ideally, the user would be able to review, edit, copy and paste, etc.
However, being able to efficiently review code would be a good start.

> The simple Accordion pattern would work best for this, as suggested by
> others earlier.

I can't find those suggestions; can you point me to a specific posting?

> Here is some code recently built for the W3C that demonstrates this,
> with configuration settings within the file setup.js for changing the
> functionality as needed.

Thanks!  I hacked up the example and got it to display two alternating
functions:

  http://cfcl.com/rdm/Projects/ARIA_Accord/t1.htm

I suspect there's a simple way to display combinations of functions (toggling them individually), but my web-fu is a bit sketchy.  Help?

For extra credit, it would be great to be able to hide and show parts of functions (e.g, the body of the case construct).  Suggestions?.

-r

 --
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation



________________________________________________________

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.


Reply | Threaded
Open this post in threaded view
|

RE: Using WAI-ARIA for code folding?

Bryan Garaventa
In reply to this post by Rich Morin
Looks good.

"I suspect there's a simple way to display combinations of functions (toggling them individually), but my web-fu is a bit sketchy.  Help?"

You can set both of the allowToggle and allowMultiple properties to true within the setup file to enable independent toggle behavior for all accordion triggering elements.

"For extra credit, it would be great to be able to hide and show parts of functions (e.g, the body of the case construct).  Suggestions?."

You can easily nest accordions, you simply need to wrap the setup script into a function that can be called multiple times to configure different groups of accordions.

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
[hidden email]
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: Rich Morin [mailto:[hidden email]]
Sent: Thursday, August 04, 2016 4:38 PM
To: [hidden email]
Subject: Re: Using WAI-ARIA for code folding?

> On Aug 4, 2016, at 12:34, Bryan Garaventa wrote:
> If you use a Tree widget, it will enforce a form field type effect for
> screen reader users, which will make it nearly impossible to review
> and copy code if that is what you want.

Ideally, the user would be able to review, edit, copy and paste, etc.
However, being able to efficiently review code would be a good start.

> The simple Accordion pattern would work best for this, as suggested by
> others earlier.

I can't find those suggestions; can you point me to a specific posting?

> Here is some code recently built for the W3C that demonstrates this,
> with configuration settings within the file setup.js for changing the
> functionality as needed.

Thanks!  I hacked up the example and got it to display two alternating
functions:

  http://cfcl.com/rdm/Projects/ARIA_Accord/t1.htm

I suspect there's a simple way to display combinations of functions (toggling them individually), but my web-fu is a bit sketchy.  Help?

For extra credit, it would be great to be able to hide and show parts of functions (e.g, the body of the case construct).  Suggestions?.

-r

 --
http://www.cfcl.com/rdm           Rich Morin           [hidden email]
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation