Skip to content
This repository was archived by the owner on Feb 26, 2019. It is now read-only.

Improve accessibility #29

Open
2 of 7 tasks
timseverien opened this issue Sep 11, 2016 · 4 comments
Open
2 of 7 tasks

Improve accessibility #29

timseverien opened this issue Sep 11, 2016 · 4 comments

Comments

@timseverien
Copy link
Owner

timseverien commented Sep 11, 2016

The tags and their contents should be accessible.

  • 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?
  • 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
Copy link

@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
Copy link
Owner Author

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

@jwahyoung
Copy link

jwahyoung commented Oct 6, 2016

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
Copy link
Owner Author

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

Should be fixed now!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants