Permalink
Browse files

version that works nicely except in IE6 where the layout breaks badly…

…. Need more time to fix that
  • Loading branch information...
1 parent 4b82989 commit fec3ee952630e047fbf5c8f2cc9322ce59b91dc2 Dirk Ginader committed Dec 10, 2010
View
@@ -17,18 +17,17 @@
}
.accessible-longdesc button .text{
display: block;
- float:left;
+ float:right;
overflow: hidden;
width: 0px;
- /*visibility:hidden;*/
zoom:1;
}
.accessible-longdesc button.hover .text{
width:auto;
}
.accessible-longdesc button .icon{
display: block;
- float:left;
+ float:right;
width: 16px;
height:16px;
zoom:1;
@@ -43,4 +42,9 @@
background-image:url(spinner.gif);
background-repeat:no-repeat;
background-position:center;
+}
+.accessible-longdesc .desc-content{
+ width:100%;
+ height:100%;
+ overflow:auto;
}
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
<head>
<title>Long description of disability chart</title>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-<link href="/styles/examplestyles.css" rel="stylesheet" type="text/css" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
@@ -23,6 +23,15 @@
</div>
<div>
<p>more data that is not in the #the-description node</p>
+ <ul>
+ <li>Total declaring one or more disabilities: 18.6 percent </li>
+ <li>Sensory (visual and hearing): 2.3 percent</li>
+ <li>Physical: 6.2 percent</li>
+ <li>Mental: 3.8 percent</li>
+ <li>Self-care: 1.8 percent</li>
+ <li>Diffuculty going outside the home: 6.4 percent</li>
+ <li>Employment disability: 11.9 percent</li>
+ </ul>
</div>
</body>
</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -17,18 +17,18 @@
<div class="section" id="longdesc">
<h3>The <code class="markup">longdesc</code> attribute</h3>
<div style="border: 2px solid black; padding: 5px;">
- <div class="mediaobject"><img src="graph.jpg" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.html#the-description"></div>
+ <div class="mediaobject"><img src="graph.png" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.html#the-description"></div>
</div>
<p>The <code class="markup">longdesc</code> attribute, which can be added to an <code class="markup">&lt;img&gt;</code> tag, does nothing more than provide access to the separate page where a long description is available. The <code class="markup">longdesc</code> value must be the URL of the long description page. It should <strong>NOT</strong> contain the long description text itself. A <code class="markup">longdesc</code> works in the same way as the previous example, except that the link is typically not visible to sighted readers. The following example is the same graph with a <code class="markup">longdesc</code> attribute added:</p>
<div style="border: 2px solid black; padding: 5px;">
- <div class="mediaobject"><img src="graph.jpg" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.html"></div>
+ <div class="mediaobject"><img src="graph.png" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.html"></div>
</div>
<p>While modern screen readers provide good support for <code class="markup">longdesc</code>, a problem arrises in using <code class="markup">longdesc</code> exclusively - browsers do not currently provide any visual indication that the image references a long description page. Many browsers do provide this information in the image details or context menu, but this is not readily apparent. The <code class="markup">longdesc</code> approach is a technique recommended in both the <a href="/standards/wcag/checklist">Web Content Accessibility Guidelines</a> and the <a href="/standards/508/checklist">Section 508 guidelines</a>. It would have much better utility if modern browsers and other assistive technologies provided a more apparent method of identifying and accessing long description pages. <strong>Because the long description page is useful to all users, if longdesc is used, it should be used in conjunction with a standard link to the long description page (method #2 above).</strong></p>
<p>Here is the markup for the <code class="markup">longdesc</code> attribute:</p>
<div class="programlisting">
- <code class="markup">&lt;img src="graph.jpg" width="526" height="353" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.htm"&gt;</code>
+ <code class="markup">&lt;img src="graph.png" width="526" height="353" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities" longdesc="description.htm"&gt;</code>
<div style="border: 2px solid black; padding: 5px;">
- <div class="mediaobject"><img src="graph.jpg" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"></div>
+ <div class="mediaobject"><img src="graph.png" class="border" width="510" height="348" alt="Graph of percentage of total U.S. noninsitutionalized population age 16-64 declaring one or more disabilities"></div>
</div>
</div>
</div>
View
@@ -18,7 +18,7 @@
(function($) {
- var debugMode = true;
+ var debugMode = false;
$.fn.extend({
accessibleLongdescShow: function(){
@@ -41,7 +41,7 @@
el
.wrap('<div class="'+o.options.wrapperClass+'"></div>')
.parent()
- .append('<button><span class="text">'+o.options.infoText+'</span><span class="icon">'+o.options.infoIcon+'</span></button>')
+ .append('<button><span class="icon">'+o.options.infoIcon+'</span><span class="text">'+o.options.infoText+'</span></button>')
.find('button')
.bind('mouseenter mouseleave focusin focusout',function(){
$(this).toggleClass('hover');
@@ -51,18 +51,22 @@
var url = el.attr('longdesc');
url = url.replace("#", " #");
el.parent().
- append('<div class="desc"/>')
- .find('.desc').load(url,function(){
- var desc = $(this)
+ append('<div class="desc" tabindex="-1"><div class="desc-content"></div></div>')
+ .find('.desc-content').load(url,function(){
+ var desc = $(this).parent();
+ desc
.css('backgroundImage','none')
.prepend('<button><span>'+o.options.closeText+'</span></button>')
.find('button')
.click(function(){
debug('click close');
- debug(desc);
+ var button = el.parent().children('button');
+ debug(button);
+ button.focus();
desc.remove();
})
- .end();
+ .end()
+ .focus();
});
});
});

0 comments on commit fec3ee9

Please sign in to comment.