Highlighted

Making Animate html5 accessible?

Contributor ,
Jun 24, 2019

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?

TOPICS
Discussions

Views

260

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Making Animate html5 accessible?

Contributor ,
Jun 24, 2019

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?

TOPICS
Discussions

Views

261

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 24, 2019 0
Adobe Community Professional ,
Jun 25, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 2
Contributor ,
Jun 25, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
pbesong LATEST
Contributor ,
Jun 28, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 28, 2019 0