Skip to main content
P
pbesong
Inspiring
June 24, 2019
Question

Making Animate html5 accessible?

  • June 24, 2019
  • 1 reply
  • 533 views

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?

This topic has been closed for replies.

1 reply

Joseph Labrecque
Community Expert
Joseph LabrecqueCommunity Expert
Community Expert
June 25, 2019

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?

    P
    pbesongAuthor
    Inspiring
    June 25, 2019

    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?

    P
    pbesongAuthor
    Inspiring
    June 28, 2019

    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.

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices