WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Organizational Charts

for

From: Birkir R. Gunnarsson
Date: May 7, 2015 8:32PM

aria-flowto is only supported in Jaws and FF (Jaws 14 and higher and,
I believe FF25 and higher) .. noother combination of browser and
screen reader that I have seen offer this functionality, sadly.
What about building an expandable tree widget?
(admittedly it takes quite a bit of coding).
You would start at the top, then use arrow keys to expand and
collapsae branches of the tree and arrow keys up and down to traverse
siblings.
Some ARIA trickery and JavaScript keyboard/focus management would make
this doable, admittedly it takes a developer more than an hour, or
two, maybe even 5, but it is quite doable.
Cheers



On 5/7/15, Yamanishi, Evan < <EMAIL REMOVED> > wrote:
> Ah, wish I had seen this thread sooner! I was toying around with this
> problem a while back, and came across thecodeplayer.com's example:
> http://thecodeplayer.com/walkthrough/css3-family-tree. I used that to
> attempt a quiz-like tree: http://codepen.io/sh0ji/pen/OPGGbG (admittedly
> still incomplete).
>
> Visual richness and non-visual accessibility are hardly ever mutually
> exclusive with proper separation of data and presentation, and CSS is
> amazing for that.
>
> Evan
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Moore,Michael (DARS)
> Sent: Thursday, May 07, 2015 10:29 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Organizational Charts
>
> Thanks Jim,
>
> This would be a good enhancement to Olaf's example. It does not seem to be
> supported in IE9 but worked well in the current release of FF. I am using
> JFW16 with the current patch.
>
> Mike Moore
> Accessibility Coordinator,
> Texas Department of Assistive and Rehabilitative Services
> (512) 424-4159 (Office)
> (512) 574-0091 (Cell)
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Jim Allan
> Sent: Wednesday, May 06, 2015 4:55 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Organizational Charts
>
> Mike,
> check out aria-flowto
> works in Jaws
>
> Aria-flowto & aria-flowfrom
>
> When the author defines these relationships on elements in a Web page, JAWS
> will announce that the element has a "flows from" or "flows to"
> relationship. The user can move to "flows to" elements using the *EQUALS*
> Navigation Quick Key and to "flows from" using the *SHIFT+EQUALS* Navigation
> Quick Key.
> test page -
> http://wps.pearsoned.com/wps/media/objects/8956/9171771/FlowToBasic.html
>
>
> On Wed, May 6, 2015 at 4:30 PM, Moore,Michael (DARS) <
> <EMAIL REMOVED> > wrote:
>
>> Thanks, I like this. Even works well in IE9
>>
>> Mike Moore
>> Accessibility Coordinator,
>> Texas Department of Assistive and Rehabilitative Services
>> (512) 424-4159 (Office)
>> (512) 574-0091 (Cell)
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Olaf Drümmer
>> Sent: Wednesday, May 06, 2015 3:34 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] Organizational Charts
>>
>> Hi Mike,
>>
>> please check out this (admittedly hacked together) HTML example (just
>> save the HTML portion as an HTML file and open in a decent browser).
>>
>> Olaf
>>
>>
>> -----------------------------------
>>
>>
>>
>> <!DOCTYPE html>
>> <html>
>> <head>
>> <meta charset='utf-8'>
>> <style type="text/css">
>> #org1{
>> width: 400px;
>> height: 200px;
>> background-color: silver;
>> padding-top: 30px;
>> }
>> #t1, #b1, #b2 {
>> background-color: #ff7;
>> margin : 5px;
>> list-style: none;
>> width:100px;
>> height:30px;
>> display:block;
>> text-align: center;
>> padding-top: 10px;
>> }
>> #t1{
>> position:relative;
>> top:0px;
>> left:105px;
>> }
>> #b1 {
>> position:relative;
>> top:25px;
>> left:-50px;
>> }
>> #b2 {
>> position:relative;
>> top:-20px;
>> left:175px;
>> }
>> </style>
>> </head>
>> <body>
>> <h1>Org Chart</h1>
>> <div id="org1" alt="Org Chart - visual graphical
>> presetation from unordered nested list, with some SVG help">
>> <svg style='width: 400px; height: 200px;
>> position:
>> absolute;' alt="">
>> <line x1="70" y1="100" x2="200" y2="50"
>> style="stroke:rgb(0,0,127);stroke-width:5"/>
>> <line x1="330" y1="100" x2="200" y2="50"
>> style="stroke:rgb(0,0,127);stroke-width:5"/>
>> </svg>
>> <ul>
>> <li id="t1">Boss</li>
>> <ul>
>> <li id="b1">Secretary</li>
>> <li id="b2">Driver</li>
>> </ul>
>> </ul>
>> </div>
>> </body>
>> </html>
>>
>>
>>
>>
>> -----------------------------------
>>
>>
>> On 6 May 2015, at 21:43, "Moore,Michael (DARS)" <
>> <EMAIL REMOVED> > wrote:
>>
>> > The problem that I have with that approach is that it hides the list
>> structure behind an image, unless I am missing something. So if I need
>> to manipulate the text to make it more readable I don't have an option.
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
>
> --
> [image: http://www.tsbvi.edu] <http://www.tsbvi.edu>;Jim Allan, Accessibility
> Coordinator & Webmaster Texas School for the Blind and Visually Impaired
> 1100 W. 45th St., Austin, Texas 78756
> voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.