pamontie

Hi Will,

I've used your code snippet for gallery transitions and I'm now trying to add an image pan. This is what I've hacked together but I'm kinda clueless on keyframes. The "pan" is working on screen, but I don't know how to add a fade inbetween each image transition. I just want the images to scroll/pan slowly and fade/transition to the next image...continuously.

the site is ljla.squarespace.com, pw:LJLA

.gallery-fullscreen-slideshow-list {
  overflow: hidden;
}
.gallery-fullscreen-slideshow-item {
scale: 1.1;
}

#sections .gallery-fullscreen-slideshow[data-transition="fade"] {
  --duration: 10s;
  figure,
  .gallery-fullscreen-slideshow-item-src{
    opacity:1;
  }
  .gallery-fullscreen-slideshow-item{
    visibility: visible;
  }
  figure:last-child {
    animation: fadeIn var(--duration, 5s) ease;
  }

  @keyframes fadeIn {
      90% {
    transform: translate3d(-80px, 0px, 0px);
  }

  100% {
    transform: translate3d(-60px, 0px, 0px);
  }
  }
}

I see that you have spent some time on accessiblity issues with Squarespace. I am building a site now for a university office and their accessibility team has flagged a few things. The search function being at the top of the list. Have you run into this before? The following is from their team...

Search

This search does not work well for screen reader users.

• no indication that the search is taking place as you type
• no indication when search has completed or found nothing

For a description of how to code this type of widget, see the following resources:

• Section 3.8 of - WAI-ARIA Authoring Practices 1.2
  • https://w3c.github.io/aria-practices/#combobox
• Editable Combobox With List Autocomplete Example | WAI-ARIA Authoring Practices 1.2
  • https://w3c.github.io/aria-practices/examples/combobox/combobox-autocomplete-list.html

Simpler alternative

A simpler alternative would be a standard search:

• user types characters into the input box
• user presses "search" button to initiate the search
• page refreshes to show results
  • results are presented as HTML list and/or have titles which are marked up as HTML headings so screen readers can quickly navigate results
  • as with any other page, results page main area begins with an h1 tag ( see issue #4 )