W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2016

RE: Using WAI-ARIA for code folding?

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Date: Thu, 4 Aug 2016 19:34:44 +0000
To: Rich Morin <rdm@cfcl.com>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Message-ID: <DM5PR03MB27450B3BE9E372A7E6C3128998070@DM5PR03MB2745.namprd03.prod.outlook.com>
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.
bryan.garaventa@ssbbartgroup.com
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: Rich Morin [mailto:rdm@cfcl.com] 
Sent: Thursday, August 04, 2016 10:29 AM
To: w3c-wai-ig@w3.org
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           rdm@cfcl.com
http://www.cfcl.com/rdm/resume    San Bruno, CA, USA   +1 650-873-7841

Software system design, development, and documentation
Received on Thursday, 4 August 2016 19:35:24 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 4 August 2016 19:35:25 UTC