The current scatter plot reads as "Image" (image without added alt text) because the role="img" added to the svg (through Nivo). There's currently no way of removing that role or adding an aria-label to it as far as I can tell, so until that functionality gets added in Nivo there is not much that can be done.
Short term
In order to avoid the "Image" getting read, the Nivo chart could be rendered within a div that either has aria-hidden="true", or is a role="img" with an aria-label set itself. A link to a table alternative should be provided as well.
Interactive chart
If the role could be removed from the svg, the chart in itself could include screen reader interaction as well. Inside an svg, the screen reader will only read the text elements, and in order that they appear in the DOM. With that in mind:
Read the x-axis and y-axis first for context
The x-axis should be read first, to give context. Should be at least the label. The ticks could either be wrapped in a <g aria-hidden="true">, or be read in the order they appear. A hidden label can also be added for extra context.
Possible ways this could be read:
X-axis. User count. (<text><tspan className="hide_visually">X-axis</tspan> User Count</text>)
X-axis. User count. Ticks: 0, 2000, 4000,... (<g><text className="hide_visually">Ticks</text><text>0</text>...</g>)
X-axis. User count: 0-20000
Same goes for the y-axis.
Structure, split and sort the data
When it comes to the actual data, visually it is divided in 4 categories:
Assess (0-10000 users, 50-100% satisfaction, top left)
Adopt (10000-20000 users, 50-100% satisfaction, top right)
It would make sense to structure the data similarly for screen readers, meaning:
Title and properties. eg:
Assess
Assess: Low usage, high satisfaction. Technologies worth keeping an eye on.
Assess: Low usage, high satisfaction. Technologies worth keeping an eye on. (40 items).
...
All technologies in that bracket sorted by user count or satisfaction
Then the next bracket, and so on
In order to read the data points grouped and sorted correctly, the array with technologies should be split in four (based on the categories). For each category, the title (eg: Assess, low users, high satisfaction) gets drawn first, then all the data points in that layer get drawn.
Communicate the right info
The technologies are also labeled by color (type of technology?) and are mapped to a position on the x and y-axis, which both should be communicated when reading the technology title (which is the only thing that gets read by default).
This can be done for example by adding a visually hidden label to the titles and passing in the value for the user count and satisfaction in a human readable way. Eg:
GraphQL. Satisfaction: 93.82%. User count: 10157.
Optionally the label corresponding to the color could be added too: GraphQL (Data Layer). Satisfaction: 93.82%. User count: 10157.
This could over time also get more custom controls and interactions as well.
Grouped and sortable table alternative
Should be its own issue. But the default table could be expanded as well to group it more nicely by the 4 different categories, allow users to sort and filter.
Combinations: Quick overview + linked deep dive
Another solution could be to keep the chart as a quick overview for screen readers. Eg, read the summary of how many technologies to asses, adopt, etc (or count + titles only) and link to an accessible table alternative that's filtered on that category.
The issue
The current scatter plot reads as "Image" (image without added alt text) because the
role="img"added to the svg (through Nivo). There's currently no way of removing that role or adding an aria-label to it as far as I can tell, so until that functionality gets added in Nivo there is not much that can be done.Short term
In order to avoid the "Image" getting read, the Nivo chart could be rendered within a div that either has
aria-hidden="true", or is arole="img"with anaria-labelset itself. A link to a table alternative should be provided as well.Interactive chart
If the role could be removed from the svg, the chart in itself could include screen reader interaction as well. Inside an svg, the screen reader will only read the text elements, and in order that they appear in the DOM. With that in mind:
Read the x-axis and y-axis first for context
The x-axis should be read first, to give context. Should be at least the label. The ticks could either be wrapped in a
<g aria-hidden="true">, or be read in the order they appear. A hidden label can also be added for extra context. Possible ways this could be read:<text><tspan className="hide_visually">X-axis</tspan> User Count</text>)<g><text className="hide_visually">Ticks</text><text>0</text>...</g>)Same goes for the y-axis.
Structure, split and sort the data
When it comes to the actual data, visually it is divided in 4 categories:
It would make sense to structure the data similarly for screen readers, meaning:
In order to read the data points grouped and sorted correctly, the array with technologies should be split in four (based on the categories). For each category, the title (eg: Assess, low users, high satisfaction) gets drawn first, then all the data points in that layer get drawn.
Communicate the right info
The technologies are also labeled by color (type of technology?) and are mapped to a position on the x and y-axis, which both should be communicated when reading the technology title (which is the only thing that gets read by default).
This can be done for example by adding a visually hidden label to the titles and passing in the value for the user count and satisfaction in a human readable way. Eg: GraphQL. Satisfaction: 93.82%. User count: 10157.
Optionally the label corresponding to the color could be added too: GraphQL (Data Layer). Satisfaction: 93.82%. User count: 10157.
This could over time also get more custom controls and interactions as well.
Grouped and sortable table alternative
Should be its own issue. But the default table could be expanded as well to group it more nicely by the 4 different categories, allow users to sort and filter.
Combinations: Quick overview + linked deep dive
Another solution could be to keep the chart as a quick overview for screen readers. Eg, read the summary of how many technologies to asses, adopt, etc (or count + titles only) and link to an accessible table alternative that's filtered on that category.
Other solutions?