Instagram Feed keyboard accessibility

There are many possible ways of doing this using a combination of tabs, arrows, Enter, and space. But here's the simplest strategy in my opinion:

You should be able to tab through the thumbnails and to the < and > buttons in order (e.g. <, thumbnail 1, thumbnail 2 ... , >). Shift + Tab should go backwards. When you tab to a thumbnail it should behave like hover, and a screen reader should be able to read the text that appears on hover (but if the hover text is the same as the alt text of the image, it's ok to just focus on the image instead without showing the hover text).

When you press Enter it should act like a click. Once the popup is open, the photo navigation buttons (<, >, and dots) should be accessible by tabs and Enter should be equivalent to a click. The close popup (x) button should also be accessible using tab. When the popup window is open, tabs should only navigate within the popup window (not to the page behind it).

  • Peter
  • May 13 2022
  • Future consideration