When it comes to digital content, accessibility isn't just a nice-to-have. It's essential. That's why we recently took on the challenge of transforming our eBook collection from PDFs into a fully accessible web format. We often help our clients clean up their PDFs, and absent very specific circumstances, we recommend avoiding them as web content. Based on our own advice, our own website was lacking.
It was time we ate our own dog food.
The challenge
PDFs have their place, but they often fall short when it comes to accessibility, especially for users relying on screen readers or other assistive technologies. The main reason for making our eBooks PDFs was because it's what most other marketing departments also do with their eBooks. It was the default. Designers have complete control and can format a PDF to look different than a regular webpage. They're easy to upload and, compared to other document types, easy to share. But depending on your context, they're not so easy to read, and searching for content within them is cumbersome.
We knew we needed to do better. Our goals were:
- Convert PDF content to a web-friendly, accessible format
- Maintain the visual appeal of the original eBooks
- Ensure a consistent layout across devices
- Implement intuitive navigation for both desktop and mobile
- Make it easy for editors to convert existing PDFs and create new eBooks without developer intervention
A custom web-based platform
To meet these challenges head-on, we developed a custom web-based eBook platform that inherits all of the benefits of good old-fashioned HTML. Here's a breakdown of the key components:
Content Structure
We restructured our content using Markdown, which gave us the best of both worlds - easy conversion to HTML and a clean, readable format for our content editors. Each eBook was split into separate Markdown files for the cover, table of contents, and individual pages.
Responsive Layout
Using Sass, we crafted a responsive layout that looks great on screens of all sizes. No more pinching and zooming on mobile!
Accessible Navigation
We created a sidebar navigation that's visually appealing, keyboard-accessible, and screen reader-friendly. Users can easily move between pages and access the table of contents.
Image Handling
We didn't forget about visual content. All images now include appropriate alt text, ensuring they're described for users relying on screen readers.
Build Process
We implemented a build process using Eleventy, a static site generator. The process compiles our Markdown files into HTML and optimizes assets for production.
The results
Our new web-based eBook format delivered everything we set out to deliver. All eBook content is now fully accessible. Navigating between pages and chapters, with the table of contents always just a click away, is a better user experience than endlessly scrolling on a mobile device. Content updates can be done quickly through GitHub without opening a program like InDesign.
We can now provide a rich eBook experience without some of the bottlenecks we were experiencing when creating PDFs. Check out Why Your CMS Project Will Fail to see the new eBook format.
Conclusion
This project reinforced the importance of considering accessibility in all aspects of content delivery. It also showcased how modern web technologies can be leveraged to create inclusive, user-friendly experiences. By transforming our eBooks from PDF to a custom web-based format, we've not only improved accessibility and user experience but also streamlined our internal processes, reducing the friction when creating this type of content. As the platform evolves and we iterate on this foundation, we'll be able to do more interesting things with it.
Have you tackled similar accessibility challenges in your projects? We'd love to hear about your experiences.
If you would like an accessibility audit and a complete remediation plan that includes creative solutions like the one above, please contact us.