Dick Detzner developed the mechanism for building the flipbook for the Illini Success 2022-23 Annual Report within the Illini Success website. This flip-book style site was not converted from a PDF; rather, it was created directly on the web using Drupal editing tools. It’s a single-page experience meant to approximate the feel of flipping through a booklet. Here are some key points about this implementation:
- The site uses the Illinois Framework developed by the WIGG group
- The flipbook makes use of a content type called Flipbook, which uses any of the paragraph types available in the framework
- The display is basically a heavily modified carousel, using the Drupal Slick Carousel module and a Drupal view
- Dick kept extensive notes and copies of the templates, Views settings, CSS, and JS, which he would be happy to share
In Dick’s testing, it seems to navigate fairly well with a keyboard, but he’d like additional input and feedback on the site. Join us to take a look at this real-world effort to make a non-PDF flipbook-style site!
We’re always looking for websites and topics to discuss! Email us any time and we’ll add your site/topic to the agenda for an upcoming meeting.
Meeting Notes
About the flipbook:
- Built in Drupal
- Essentially just a carousel - used Drupal module Slick Carousel
- Uses a Drupal View, which creates a Block that can be inserted into any page
- Adapted it to make it more accessible
- Tablist:
- Navigate using arrow keys
- Tab jumps to current tablist element, second tab
- Notes:
- Height of page set by tallest page in entire carousel, so if pages have substantially different amounts of information, some pages can have a lot of empty space at bottom
- Tablist comes after carousel content in DOM, used JS to move it above
- Table of Contents created some issues with inserting at beginning of page - solved by putting button before content, popup after content (uses absolute positioning)
- Content:
- Stored as a Drupal content type w/paragraphs
- Required a shift in thinking for content creators
- Web is responsive
- Need to use less columns per table than in PDF
Discussion:
- Bryan: how much of a sense do content editors have of how their content will look as they’re creating/editing content?
- Standard Drupal content types using Illinois Theme
- It looks pretty similar to final result as they’re editing
- Bryan: is it possible to link to individual pages?
- Yes - Table of Contents links to a specific page
- Recommendation: update URL as you navigate between pages using tablist
- Bryan: might be interesting to try out an approach like Inclusive Components Content Slider
- Table of Contents popup - make it a menu button
- Esc should dismiss and put focus on ToC button (as it does now)
- Add aria-haspopop=true and aria-expanded to the toggle button.
- Remove role=tabpanel from the contents menu container. Change container to a <nav> and user aria-label to label as “Table of Contents.”
- Tab from last item in menu should dismiss menu and move focus to paginator
- Shift-tab from first item in menu should move focus to Table of Contents button. Menu should not be dismissed - user can click on the button to do that.
- Tablist:
- Needs aria-label
- Remove tabindex=”0”
- Visual indication of focus - add additional indication for prev/next (e.g. glow, additional border/outline, etc)
- Recommend this page order for widgets:
- Table of Contents
- Pagination
- Prev
- Next
- Carousel Content
- Prev/Next buttons: dynamically label buttons based on which page is previous/next
- Leave just “Prev” or “Next” visible, update info for screen reader users
- Or change button content to, e.g.:
______
| Next |
| P. 9 |
| _____|
- Recommend adding an additional view of all content in a single page, reachable via “view as a single page” link
- Add additional display mode for this content, instead of carousel, display as just content
- Could still do table of contents with in-page links
- Heading structure:
- Recommend starting each pane with H2 (relatively minor issue)
- Multiple H1s is an SEO issue
- H2s for each pane would be best for “view all” view of content - otherwise the page will have 22 H1 elements all visible simultaneously