ImageCard: Reduce the amount of tabs to get through an image card component

[fswlee]

The problem It takes a lot of keyboard tabs to get through an image card which can be very frustrating when navigating the site. On the image search results:

1. full card
2. image
3. save button
4. title link
5. sub-menu
6. collection name

The solution Less tabs to get through each card! Maybe:

1. image and title as a link
2. save button
3. sub-menu
4. collection name

[sirrah-tam]

Additional Notes:

The problem

There are repeated links within the image card that to the same destination, one for the image and one for the title. This creates additional tab stops (# of items in keyboard focus) that over time will lengthen the amount of time required by a keyboard-only or screen reader user to interact with the site.

The solution

Ideally, there should be a single link for an "item" that takes users to the detail page. If possible, have the items title become the keyboard focusable link, and set up the click event for the image as a separate mouse-only action that does not receive focus.

Alternatives considered

There are also ways to expand the 'clickable' area of a link through CSS.

Additional information

Additionally, depending on the implementation, the Pharos documentation should include information about not have the item's container gain keyboard focus unless there is some action that can be taken while receiving focus, ie. pressing Enter to go to detail page, using arrow keys to move to the next item, etc. If this approach is taken, then neither the image or title would gain focus after the outer container, and would move directly to any other inner links (author/collection).