Copy link to clipboard
Copied
I made a clickable map but i'm finding out it's not accessible. Although it's what they want, to get enough color contrast I would have to make the background completely white, blowing out the background image and pretty much destroying the look. Since this is a canvas, is there some way of marking it up after publishing so a screen reader could read it and someone could tab thru the different months where the linked content would be? Here is my graphic (note only a couple months are clickable for now). http://www.personal.psu.edu/pzb4/simba/map.html​
Or would there be a way of clicking to an alternate version that's just black and white with simplified content?
Copy link to clipboard
Copied
One big add to the accessibility of that project would be to include a much bigger hit area on the hover elements. Right now most are only activated via text rollover and that is always not so accessible even for people without the regular accessibility issues. Additionally, if it's a higher contrast you are looking for - perhaps even simply adjusting the color values on the interactive elements like this would help?
Copy link to clipboard
Copied
Thanks, I am in the process of adjusting the color contrast between the text and the background of the buttons and am making the hit area the whole diameter of the circles. I think my biggest issue will be getting it to somehow work with a screenreader and tabbing through it. I don't think I can change the colors of the different regions to much effect, though. I'm not sure that's extremely important though as long as the text is more readable. Wondering if I should use a tag to have a screenreader ignore the canvas altogether and maybe do something with invisible divs to be able to tab through it?
Copy link to clipboard
Copied
I have since reworked the graphic. i made it more vertical to work better with mobile devices, adjusted the contrast and included alternate content between the canvas tags that can be read by a screenreader. Seems to work fine there. Here is the new link:
http://www.personal.psu.edu/pzb4/simba/index.html
Still some dummy links and everything after June 2019 has blank links.
Find more inspiration, events, and resources on the new Adobe Community
Explore Now