We Keep Coding

Aria gridcell label always blank inside SVG rect

I'm trying to develop an accessible Bar Chart. As there is no formal ARIA role for graphics just yet, I decided to add role="grid" to my SVG. Most of the stuff is working OK, but the gridcell is always blank when I test my chart using Voice Over.
This is the codepen that illustrates my graph. And this is a video of my testing using Voice Over.
This is how I've configured the gridcell for my rect tag:
<g className={barClass} role="gridcell" aria-label={bar.count + ' ' + bar.fruit}>
<rect width={bar.count * 10} height="19" y={20 * index}/>
</g>
Question: Am I doing something wrong? Why voiceover does not recognize the aria label?
UPDATE 1: I'm using Chrome and Safari and the issue is present in both browsers.

Use the <title> and <desc> elements with the aria-label attribute and the img role as a fallback:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title>Network</title>
<desc>An example of a computer network based on a hub</desc>
<!-- add graphic content here, and so on for the other components-->
</g>
<g id="ComputerA" aria-label="computer A: A common desktop PC" role="img">
<title>Computer A</title>
<desc>A common desktop PC</desc>
</g>
<g id="ComputerB">
<title>Computer B</title>
<desc>A common desktop PC</desc>
</g>
<g id="CableA" aria-label="Cable A: 10BaseT twisted pair cables" role="img">
<title>Cable A</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableB">
<title>Cable B</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableN">
<title>Cable N</title>
<desc>10BaseT twisted pair cable</desc>
</g>
</svg>
The simplest way to specify a text equivalent for an SVG graphic is to include the following elements in any SVG container or graphics element:
title
Provides a human-readable title for the element that contains it. The title element may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer.
desc
Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.
References
SVG Accessibility
SVG Accessibility Testing: Test Assertions with Tables
Tips for Creating Accessible SVG
Using ARIA to enhance SVG accessibility
Accessible SVGs
Just how accessible is SVG?
Current State of Authoring Accessible SVG
Inline SVG used for buttons and links
Text Links: Best Practices for Screen Readers
Accessibility: recommended alt-text convention for SVG and MathML?

SVG (d3.js) and jQuery UI selectable not working

I have a d3.js chart on which I'm trying to use jQueryUi Selectable plug-in while it shows the selection rectangle (no selecting effect as shown on plugin page) but once I release mouse nothing is selected. You can try on fiddle http://jsfiddle.net/mantrig/5b5698dr/
My code is somewhat like below :
<div class="selectable">
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:</text>
<text x="10" y="45">First line.</text >
<text x="10" y="70">Second line.</text >
Sorry, your browser does not support inline SVG.
</svg></div>
--js script--
$(function() {
$( ".selectable" ).selectable();
}
});
No class is getting add or remove on selection . These text elements are sample in my case these things will be dynamic from some json.

Cannot set opacity to element

I am trying to make and interactive svg which would react to some actions with javascript functions.
My SVG looks like this (this is example of one of many svg I am generating, I deleted some irrelevant elements to make the code more readable):
<svg contentScriptType="text/ecmascript" onmouseover="myOpacity(&apos;msg0&apos;, 0.5)"
onclick="svgClick(&apos;Some example text&apos;)"
width="760" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify"
onmouseout="myOpacity(&apos;msg0&apos;, 1)"
contentStyleType="text/css" height="30" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg" version="1.0">
<text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
<script xlink:href="script.js" xlink:actuate="onLoad"
xlink:type="simple" xlink:show="other" type="text/ecmascript"
xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
This is my script.js file with onClick and opacity functions:
function svgClick(text) {
alert(text);
}
function myOpacity(element_id, op_value)
{
element = document.getElementById(element_id);
element.setAttribute('opacity', op_value);
}
The problem is that myOpacity function does not work and nothing happens when I hover over my objects (despite the id should correspond to the argument of the function).
However, the onCLick function works perfectly, so the problem is probably with identifying the element by id.
I am quite stuck here, could you take a look in the code and tell me where did I go wrong?
EDIT: this is a followup from this answer: Interactive SVG - how to choose element to react on mouseover action?
That code works there but it somehow does not do anything in the code I posted here. So my question is why? I know I could do this via attributes, but in that case, I do not know how to handle scenario, when I want to set opacity to one element when mouseover action is triggered on another one...

I pasted your code into a jsFiddle (making the JavaScript inline), and it works without problems in Firefox and Chrome:
http://jsfiddle.net/wpZs6/
However, the hover part could be considerably easier with just a CSS hover selector:
<svg width="760" height="30" xmlns="http://www.w3.org/2000/svg" version="1.0">
<style type="text/css">
svg:hover #msg0 {opacity:.5}
</style>
<text fill="black" x="10" id="msg0" font-size="10" y="20">Some text</text>
</svg>
See here: http://jsfiddle.net/L58z6/

try this :
var divtmp = document.getElementById(element_id);
var newStyle = "filter:alpha(opacity=85);-moz-opacity:0.85; opacity: 0.85;";
divtmp.setAttribute("style", newStyle );

SVG anchor current page highlight

I have an SVG-based menu with links similar to the following. I'd like to highlight the current page's link (e.g., by adding "font-weight:bold"). Any suggestions? Should I do something with Javascript? (Note that I'm linking the SVG in my HTML page via an <object> tag for compatibility, so the solution has to work with that constraint.) Oh, and I'm fine with the highlight only working in modern browsers.
<svg ...>
<style type="text/css">
a text {
fill:#ffffff;
}
a:hover text {
fill:#2020ff;
}
</style>
<g>
<a id="aHome" xlink:href="/" target="_top">
<text id="txtHome">Home</text>
</a>
...
</g>
</svg>

Well, apparently forgetting about this for a week was worth a bronze badge. :-P
Anyways, the code above is actually correct by itself. Go figure - I had other overriding CSS styles that caused the a:hover bit to fail.

How to overlay data on an image

I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most common map applications.
From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any recommendations on how to do this and maybe point me in the right direction?

Does not require canvas although canvas can be used.
Shortest coding would be make a div with a background image being the image you want to place points on.
If it is not an image then you would need to make two divides on the overlay divide (the first one in the HTML code) use position:absolute to place it on top with the same width and height -- then the image content divide that follows will be layered under your absolute positioned divide.
<div style="background:url(image.jpg); width:100px; height:100px">
... material here is on top of the image ...
</div>
or
<div style="position:absolute; width:100px; height:100px">
... material here is on top of the image ...
</div>
<div style="width:100px; height:100px">
... place object here which picks up your map or whatever ...
</div>
The ... material here is on top of the image ... can be a canvas but SVG would be less coding as it has links supported
<div style="background:url(image.jpg); width:100px; height:100px">
<object data="yourOverlay.svg" width="100" height="100" >
</object>
</div>
Here is a sample SVG file posted at http://tutorials.jenkov.com/svg/a-element.html
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="/svg/index.html">
<text x="10" y="20">/svg/index.html</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="new">
<text x="10" y="40">/svg/index.html
(xlink:show="new")</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="replace">
<text x="10" y="60">/svg/index.html
(xlink:show="replace")</text>
</a>
<a xlink:href="/svg/index.html" target="_blank">
<text x="10" y="80">m/svg/index.html
(target="_blank")</text>
</a>
<a xlink:href="/svg/index.html" target="_top">
<text x="10" y="100">/svg/index.html
(target="_top")</text>
</a>
</svg>
Depending on your application you may want to consider straight HTML for "... material here is on top of the image ..." so it will work in older browsers.
And FYI you could code the background into the SVG and just have a object tag in the html page and use googles "SVGWEB" http://code.google.com/p/svgweb/ to support nearly every browser.

Good resource here: http://dev.opera.com/articles/view/html5-canvas-painting/
But for what you're doing, you don't really need a canvas, imo. If you have an image, and you know where stuff is that you want to overlay (pixel offset), you can provide the pixel offsets from each data point in JSON or XML to your client script, and then just have it use absolute positioning to place them where they need to be on the image.

Another possible solution is to just use an SVG image which i believe supports links ect directly