WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Organizational Charts

for

From: Jim Allan
Date: May 6, 2015 3:54PM

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