Improve accessibility

[timseverien]

The tags and their contents should be accessible.

• [x] Investigate whether current state is or isn’t accessible for assistive tech and keyboard navigation. Does the button/content-pair makes sense? Should taggd provide additional descriptions?
• [x] Investigate what and how issues can be improved. Changes in DOM hierarchy, tags, or by adding ARIA attributes.
• [ ] Apply the changes ;)

---

Changes:

• [ ] Wrap image in figure tag
• [ ] Wrap buttons in figure tag, and set size on figure to prevent invisible element overlap
• [ ] Wrap tooltips in figcaption-tag.
• [ ] Add focus or active event to a button to enable keyboard navigation

[jwahyoung]

@timseverien You might consider using the HTML5 figure tag along with figcaption for accessibility. This would probably require someone to wrap their image in a figure tag (or the library could do it) but for each tag, the library could create a corresponding nested figure object (styled to match the current buttons) with a hidden figcaption. This would be accessible, as the content would be available for users with screen readers; it would also be more semantic.

The button/content pair does not currently work with keyboards. The buttons are tabbable, but the content will not be shown.

[timseverien]

Thank you so much @jedd-ahyoung. I’ve added criteria based on your comment. Could you please review them?

[jwahyoung]

Looks good, but I think you've reversed figure and figcaption. The figure tag would wrap an image or an area of content, while the figcaption would actually contain the tooltip text, like so (I've added inline styles to make this more clear):

<figure id="myFigure" style="position: relative;">
    <img src="myImage">

   <figure id="tooltip1" style="width: 5px; height: 5px; position: absolute; top: x1; left: y1">
        <figcaption>My tooltip here</figcaption>
   </figure>

   <figure id="tooltip2" style="width: 5px; height: 5px; position: absolute; top: x2; left: y2">
        <figcaption>My second tooltip here</figcaption>
   </figure>
</figure>

Based on this, you could actually style the nested figures to have width and heights, so that they could "frame" areas of sorts (like an image map, or like how you can frame faces of people in photos on facebook). Hope that made it more clear.

[timseverien]

Clearly I was just testing your alertness... lol :D

Should be fixed now!