While making a visualization with Vega-Lite (using VegaEmbed in Vue), the outputted graphic is skipped in iOS using VoiceOver. Every other screen reader seems to work.
I'm using the following spec:
{
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
data: {
name: 'simple_capacity',
"values": [
{"route": "C", "b": 22, 'hh24': "1999-01-02T12:00:00"},
{"route": "C", "b": 77, 'hh24': "1999-01-02T17:00:00"},
{"route": "C", "b": 44, 'hh24': "1999-01-02T14:00:00"},
{"route": "D", "b": 11, 'hh24': "1999-01-02T11:00:00"},
{"route": "D", "b": 22, 'hh24': "1999-01-02T12:00:00"},
{"route": "D", "b": 66, 'hh24': "1999-01-02T16:00:00"},
{"route": "E", "b": 88, 'hh24': "1999-01-02T18:00:00"},
{"route": "E", "b": 44, 'hh24': "1999-01-02T14:00:00"},
{"route": "E", "b": 77, 'hh24': "1999-01-02T17:00:00"}
]
},
mark: {
type: 'rect', tooltip: true
},
encoding: {
// Y Axis
y: {
field: 'route',
type: 'nominal',
},
x: {
field: 'hh24',
type: 'temporal',
timeUnit: "hours",
},
color: {
field: "b",
type: "ordinal",
legend: null
},
},
}
Is there a way to edit the svg roles directly in the Vega-Lite (or Vega) spec? It seems as though heavy modifications of these roles has a positive effect in getting VoiceOver to read the outputted graphics
EDIT:
It seems like the role "graphics-symbol" on SVG tags caused iOS VoiceOver (MacOS is fine) to skip the graphics:
<path
aria-label="Route: 1 - Hour: 23:00; XXXXXXXX"
role="graphics-symbol"
aria-roledescription="rect mark"
d="M827.541,0h35.958v25h-35.958Z"
fill="#ddd"></path>
Removing the role attribute caused iOS VoiceOver to read the individual marks.