Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

StepActorActionResultMobile DesignAlternate FlowAccessibility Notes
1patronlogs in and navigates to the library catalog
  • displays header/facet with selectable options for:
    • Books
    • Audiobooks
  • Books is selected by default
  • ebooks are displayed
  • Selectable interface is accessible and can be read by a screen reader
    • Screen reader must announce if selected.
    • Should indicate how many selections in list, ex "Books, selected, 1 of two"
    • Selected state is clear to the user (implementation tbd)

 

 

If audiobooks are turned off in the circulation manager for the library, then no entry point will exist for audiobooks. In this case, the facet/header should be hidden.

(Willa will advise if it should say "Format, books" and also display the word format somewhere so that users know what the menu is called.)

2patronselects "Audiobooks"
  • audiobooks displays in selected state
  • audiobooks are displayed in the lanes
  • Audiobook badge is shown on all audiobooks
    • Icons must be accessible: Book format, indicated with small red icon, should also be represented as programmatically accessible text. So a screen reader would hear "title of book"+"audiobook" or "title of book"+"ebook".
  • Screen reader:
    • focus stays on the drop down componentselected segment (audiobooks)
    • announces "audiobooks selected"
 

If no audiobooks are available at a library, then UI presents a message, "Sorry, no audiobooks were found."


 

When a user selects a new tab, the focus should stay on that tab (is screen reader user isn't bumped back to top of page) KW: this may not be applicable if we aren't using tabs?

WA Note: the focus should stay on the selected segment. – same principle of not moving focus unnecessarily.

When a user selects a new format, once the new books load that is announced to a user of a screen reader. Chat about best approach.

1b. iOS Patron browses audio books in SimplyE

Description: iOS Patron navigates to the catalog and browses by selecting ebook, audiobooks, or all formats.

Main Flow

StepActorActionResultiOS DesignAlternate FlowAccessibility Notes
1patronlogs in and navigates to the library catalog
  • displays header/facet with selectable options for:
    • Books
    • Audiobooks
  • Books is selected by default
  • ebooks are displayed
  • Selectable interface is accessible and can be read by a screen reader
    • Screen reader must announce if selected.
    • Should indicate how many selections in list, ex "Books, selected, 1 of two"
    • Selected state displays with an inner shadow as shownis clear to the user (implementation tbd)

 

 

If audiobooks are turned off in the circulation manager for the library, then no entry point will exist for audiobooks. In this case, the facet/header should be hidden.

 

2patronselects "Audiobooks"
  • audiobooks displays in selected state
  • audiobooks are displayed
  • 'audio' badge or icon is shown on all audiobooks
    • Icons must be accessible: Book format, indicated with small red icon, should also be represented as programmatically accessible text. So a screen reader would hear "title of book"+"audiobook" or "title of book"+"ebook".
  • Screen reader:
    • focus stays on the selected segment (audiobooks)
    • announces "audiobooks selected"

https://www.figma.com/file/VJuFJNGaVSwdXF2VWiVuZ4oe/NYPL-SimplyE-mobile?node-id=28%3A3

If no audiobooks are available at a library, then UI presents a message, "Sorry, no audiobooks were found."

When a user selects a new tabsegment/facet, the focus should stay on that tab segment (is screen reader user isn't bumped back to top of page)

When a user selects a new tabsegment, once the new books load that is announced to a user of a screen reader. Chat about best approach.

2. Patron searches for an audiobook in SimplyE

Description: Patron selects audiobooks format and clicks on the search field, enters a book title, and views audiobooks results.

Main Flow

StepActorActionResultiOS DesignAndroid DesignAlternate FlowAccessibility
1patrontaps the search field with "Audiobooks" selected
  • keyboard displays

  • search field becomes active

*Note: there is a bug that shortens the search field. This must be fixed.

    
2patronmakes an entry in the search field and clicks 'return' or 'search'
  • Displays audiobooks that match search parameters
  • displays 'All' option in the selection menu/facet
  • audio badge or icon displays as shown
 If no results are found displays a 'no results found' message. 
3patronselects 'All'

Displays both ebook and audio books that match search parameters

audio or ebook badge/icon displays on each to indicate content type

  

Patron clicks "books" tab and it displays all ebooks matching search parameters

IF patron entered search parameters with Books tab displayed, THEN they will be able to click the Audio tab and see all audiobooks matching search parameters.

 

 


3. Patron borrows an audiobook in SimplyE  

...