RE: Note about image map tutorial example

Hi Eric,

Long time, no visit.  Thanks for writing back.  And thank you and the Education & Outreach Working Group for the fantastic job of building out a growing list of digital accessibility learning resources on the W3C site.

I like the idea of using nested lists with content positioned onscreen via CSS as a best practice for implementing basic organizational charts on Web pages. I'm not sure how it would work if the chart became too complex.  Maybe alternative text will always play a strong role in making programmatically evident those relationships that sighted users often take for granted when perusing org charts.  Knowing the chain of command in any organization is important for employees, managers, customers and vendors alike.  This is an interesting topic that might prove fertile ground for the introduction of new WAI-ARIA markup down the road.

Thanks for responding to my comment.

Have a Great Day/Evening,

Brooks Newton

-----Original Message-----
From: Eric Eggert [mailto:ee@w3.org] 
Sent: Thursday, July 13, 2017 3:42 AM
To: brooksallennewton <brooksallennewton@gmail.com>
Cc: wai-eo-editors@w3.org
Subject: Re: Note about image map tutorial example

Hi Brooks,

Thanks for reporting the issue. Indeed the alt text in the example code was wrong; it wasn’t carried over from the actual image on the page or the main image maps example (https://www.w3.org/WAI/tutorials/images/imagemap/).

I have put in a correction, and we’ll update the page soon:
https://github.com/w3c/wai-tutorials/pull/536

In the future we want to look into SVG examples, too, that can express the relationship better. Of course nowadays you could probably use a nested list and CSS to have the same (or a better) effect, but this example is specifically for people who have to make image maps more accessible.

Best,
Eric

On 12 Jul 2017, at 18:57, brooksallennewton wrote:

> Kudos on buiding out these Web accessibility tutorials!  These 
> materials are very helpful.
> I think the org chart example you are currently using needs a bit more 
> work, however.
> https://www.w3.org/WAI/tutorials/images/examples/imagemap/
> The alt text provided in this example fails convey the hierarchical 
> nature of who reports to whom in the org chart image map. The alt for 
> the overall  <img> and for the various <area> hotspots doesn't touch 
> on the relationships between the individuals in the example org chart.
> You might consider picking another image map example that can be 
> better represented through alt text alone.  Another idea is to 
> supplement the alt text for the <img> and <area> elements in the image 
> map with an adjacent inline text explanation of the org chart that is 
> bound to the image map <img> using aria-describedby. Another 
> possibility would be to implement some other semantically meaningful 
> markup that programmaticaly exposes the hierarchical structure of 
> employees, their co-workers and their managers, without the need for 
> verbose alternative text explanations.
> Thanks!
> Brooks Newton
>
>
> Brooks NewtonIndependent UX Accessibility Consultant918 
> 207-1046brooksallennewton@gmail.com
> Sent from my Galaxy Tab® S2



--

Eric Eggert
Web Accessibility Specialist
Web Accessibility Initiative (WAI) at World Wide Web Consortium (W3C)


---
This email has been checked for viruses by AVG.
http://www.avg.com

Received on Thursday, 13 July 2017 13:51:21 UTC