Our friends at the National Network for Equitable Library Service (NNELS) have created this video series to help you check whether your eBook files meet five key areas of accessibility (structured headings, useful image descriptions, sufficient colour contrast, accessibility metadata, and correct language declarations) before submitting them to our Books by Heart Program.
Before you get started:
- Download and install Ace by DAISY
- Download and install Sigil EPUB Editor (this is optional – if you have another EPUB editor you prefer, that’s great)
Then, for each book for which you need to check accessibility:
- Make a back-up copy of the book you are going to work on.
- Run the book through Ace by DAISY
- Review the violations, and correct them in the book (using Sigil or your preferred method) according to the checklist and videos provided.
- Save the updated book, and run it through Ace by DAISY again.
- Address any outstanding violations, save the updated book, run through Ace again.
Please note: Outstanding errors that were not covered in the videos or checklist may remain – this is expected and will be addressed for the 50 books selected for the program
If you have any questions, please let us know!
Thank you to our funders:
Introduction to Using Ace by DAISY & Sigil (5:09)
Link 1: Getting Started with Ace by DAISY (download page)
Link 2: Downloading Sigil EPUB Editor
Transcript
Hello, and welcome to a series of short videos designed to introduce viewers to using Ace by DAISY, specifically in the context of the Books by Heart Project.
These videos have been prepared by the National Network for Equitable Library Service on behalf of the Atlantic Publishers’ Marketing Association. In this project, you will be asked to use Ace by DAISY to check the accessibility of the EPUBs you would like to submit, and address the violations that Ace reports. The videos in this series will demonstrate how to do all of this.
To begin, you will need to install Ace by DAISY, and you will also probably need an ebook editor to address the violations. In the videos, I will be using Sigil, a free ebook editor. I will now demonstrate how to download and install Ace by DAISY, and how to run a check on an EPUB. I will also demonstrate how to download and install Sigil, and show how to open an EPUB in Sigil. Any links I mention can be found in the description, and in the transcript.
Installing and Using Ace by DAISY
Ace by DAISY is an EPUB accessibility checker developed by the DAISY Consortium. It is a tool that produces a report of violations that need fixing, and data visualizations to aid the manual inspection process. The Ace App is available for the Windows, MacOS and Linux desktop operating systems. Visit the first link in the description to access the page to download and install Ace by DAISY. (https://daisy.github.io/ace/getting-s…). Follow the directions for your operating system. If you run into any issues, please reach out for help.
Once you have installed the program, open it up, and run a check on an EPUB. You can browse for a file by navigating to: File – Check EPUB, or by dragging and dropping an EPUB right onto the interface of the program, or by using the “Click to Browse” link on the interface. Once you select a book, click “Check”, and Ace will begin to process the book. It should only take a few seconds, but if the file is large, it may take longer.
What Ace by DAISY shows is:
-a list of violations, as well as the rules or guidelines that are being violated;
-links to the Accessible Publishing Knowledge base, which may be helpful for addressing the issues;
-a metadata tool;
-headings outlines; and
-image descriptions.
We’ll get into all of these things in this video series. For now, congratulations on using Ace to check your book for accessibility!
Installing and Using Sigil EPUB Editor
In order to address the violations that come up in Ace by DAISY, you will need to make some changes to your EPUB file. You may already have a program or system you use to do this – if so, feel free to stick with it! If you don’t, or you want to see how we will be doing it in this video series, then please follow along.
Sigil EPUB Editor is an easy-to-use program anyone can use to dive into the code of their ebooks. It can be downloaded from sigil-ebook.com. Visit the second link in the description to access the page to download and install Sigil EPUB Editor. Follow the directions for your operating system. If you run into any issues, please reach out for help.
Once you have the program installed, you can browse for an EPUB file by navigating to: File – Open, and choosing a book, or by right clicking on a book on your computer, and choosing to open it in Sigil.
When you open a book, you may get a warning that says “Files exist in EPUB that are not listed in manifest, they will be ignored.” You can just click OK – this is fine. Another warning that comes up commonly is this one, that says “This EPUB has HTML files that are not well formed or are missing a DOCTYPE, html, head or body elements. Sigil can automatically fix these files, although this may result in minor data loss in extreme circumstances.” And asks if you want to fix the files. You can say no here – this is just Sigil looking for something that is not a requirement.
So now, we have our book open in Sigil! You will probably want to set it up as I have here, with three panes: one is called “Book Browser”, which shows the files, one shows the code, and the last one shows the book preview. And as you make changes to the code, they will be shown in the preview (if they make visual changes).
And that is everything for this video! Before I sign off, I’ll leave you with one important note: before you make any changes to a book in Sigil, you will probably want to save a copy in case you make any changes that cause errors. It never hurts to have a back-up!
Thanks for watching!
Ace by DAISY & Headings (6:21)
Link 1: Optimizing Word Documents for InDesign and Accessibility
Transcript
In this video, we will be looking at Headings! In order for books to be included in the Books by Heart collection, they will need to have semantic headings that are correctly ordered. Headings are relied on for navigation, and having correctly structured and organized headings is important.
So, to start we will run our book through Ace by DAISY, and navigate to the “Outlines” tab. In this tab, you will see three columns: EPUB Table of Contents, which is generated by the Navigation File, Headings Outline, which is generated by the content in the EPUB that is wrapped in headings tags (like h1, h2, h3, etc.), and the HTML outline, which can be ignored.
The EPUB Table of Contents should link to all sections of the book, in order. In this book, the EPUB Table of Contents is complete, no problems here. What we will focus in on is the Headings Outline.
The most common issues with headings are:
-heading elements are not used (which means that the content will not be recognized as a heading);
-heading elements are not used in order – levels are skipped (which will be confusing to machines and assistive technology); and
-single headings break over two lines.
Let’s take a look at each one:
No Heading Elements
In this book, there are a lot more items in “EPUB Table of Contents” than there are in the “Headings Outline” – this says to me that some headings are missing from the book. Let’s take a look at the book in Sigil.
Looking at Chapter 2, we see that the text “Introduction” at the top has the visual appearance of a heading, but it did not appear in that Headings outline, and it is not wrapped in a set of h1 tags. This – and all the other headings in the book – will need to be corrected.
This may be as simple as searching for all text that has a class of “h1” or “h2” or “h3”, and updating the code by changing those “p” tags to the correct heading level. If we take this approach, we would – for example – make this say h1 instead of it being a paragraph with a class of h1, and of course you need to update the closing tag as well. Because of the way the CSS for this document is set up, the visual appearance remains the same. If you try this, and it does not stay the same for you, you may need to poke around in the CSS a bit. Reach out for help if you are stuck!
Depending on your workflow, instead of making the changes in Sigil, you may wish to return to the InDesign file, and tell InDesign to associate text with the paragraph style of “h1” to have the HTML tag of “h1”. For more info on this approach, check out link one in the description. Once you have made the needed changes, you can re-export the file and keep on checking and correcting.
Heading Elements are not Used in Order
Headings represent a key way for readers who use assistive technology to get a feel for how the book is laid out. Heading levels should be presented in hierarchical order with a predictable structure of cascading headings, meaning that the highest level elements like Table of Contents, Parts or Chapters, Bibliographies, Indexes, etc. should be heading level 1, and the second highest elements, like Chapters (if the book has parts) and subsections should be heading level 2, and so on, up to heading level 6.
No heading levels should be skipped, and if any are, this should be corrected.
Single Headings Break Over Two Lines
Another frequent issue we see is when a single heading, like “Chapter One: The Unexpected Party” breaks over two lines, with “Chapter One” on one line, and “The Unexpected Party” is on a second line. If this is coded correctly, with a line break, there is no problem. But when it is coded in a way that makes each line a heading, it becomes a problem for assistive technology. As we see in the Headings outline here, for the text “The Inaccessibility: An Example”, it creates two navigation points for a single section.
To correct this, let’s take a look in Sigil. What we can do is take away the closing h3 tag from the first line, and the opening h3 tag from the second line, and add a line break tag – br / instead. Now, this is a single heading that breaks over two lines.
If the text of each line needs to be styled differently, this can be achieved by wrapping each line in its own span tags, with classes.
Once your book has a full set of headings in the Headings Outline section of Ace by DAISY, you’re all set!
Thanks for watching!
Ace by DAISY & Colour Contrast (3:57)
Link 1: Colour Contrast Analyzer
Transcript
Hello! In this video, we will be looking at colour contrast. If text and background do not have sufficient colour contrast, you will get a serious violation telling you that the contrast between foreground and background colours does not meet contrast ratio thresholds. Some readers find it very difficult to read text when there is not sufficient colour contrast.
In our example book, this paragraph at the end of the foreword (Chapter1.xhtml) is causing the issue. As you may guess from the name of the class “contrast1”, this text has been designed to have poor colour contrast.
To fix poor colour contrast, you have a few options – you can go into the CSS, and adjust the colour of the text so that it is sufficient! A great tool to look into this is the Colour Contrast Analyser (see link one in the Description).
I’ll demonstrate using this tool. Colour contrast analyser allows you to select a foreground and background colour, and tells you if the contrast passes WCAG. So, let’s use some things on my desktop here: I’ll pick this as white from the book in Sigil as the background, and – just to prove/demonstrate, I’ll pick this green text as the foreground – as we can see, it fails. So, we will have to pick a different colour! Let’s find one that has sufficient contrast. There – if we use this nice deep green, the contrast is sufficient. Now, we can copy the hex code that CCA provided, and paste it into the CSS of the book in Sigil.
First, we’ll open up the CSS document, and search for the class of the text, which is contrast1. Make sure to tell Sigil to search in the current file – otherwise you’ll be sent on a wild goose chase. When you find the class, you can replace the colour with the hex code you copied from the CCA. There – as you can see, it updated in the preview!
Changing the colour of the text can also be accomplished in InDesign, of course, and a lot of factors will go into deciding how you can best remediate your files. If you have any questions, reach out!
Thanks for watching!
Ace by DAISY & Image Descriptions (3:20)
Link 1: Adding alt text: Using InDesign, and in the code of an EPUB
Transcript
In this video, we will look at what Ace shows you for image descriptions. The tab we will be looking at is the last one – Images.
There are five columns in this tab: it shows a thumbnail of the image, the text that is in the alt attribute, text that is in an “aria-describedBy” field, text in the associated “figcaption” element, if there is one, and the location in the book.
Image descriptions are required for accessibility, so there should be text in each alt attribute. This book, as you may have noticed, is called “awful.EPUB”, so that is why the text in the alt-attribute field is just the filenames. Image descriptions should be descriptive – filenames do not count!
Let’s take a look at this Peter Pan ReflowableTestEbook.EPUB: in here, we have wonderful, descriptive text! You’ll notice that there is nothing under aria-describedBy. This is totally fine. There is text in some of the figcaption fields, this is fine if you have it – and fine if you do not have it. Note that the cover has a description – this is a requirement!
Long Descriptions
Sometimes, if you have a graph, chart, diagram, or another sort of image that is complex in some way, then you may require a long description. Ace will not be looking for this, as a long description is usually linked to in another section of the book. If you have long descriptions, that is great! Just be sure to also include brief alt-text.
Adding Alt-text
If some or all of your images are missing alt-text, you will need to add it in. This can be done in a text editor like Sigil, or in InDesign. If you want to do it in the InDesign file, check out Link One in the description – it will take you through how to do it. For now, let’s take a look at how to do this in Sigil!
I’ve got Awful.EPUB open here in Sigil. Note that you’ll probably want to have a document somewhere that contains all of your image descriptions for a book, so you can just paste them in to either your ebook editor or InDesign when they are done. For the purpose of this video, of course, we are just looking at adding alt-text, so let’s dive in.
We are in the Title Page file (title.xhtml), and here we have the Canadian flag with the alt-text “wavflag.jpg” in the alt attribute for the image. So, let’s simply replace that text with our image description, like so. And that is all there is to it! Nothing changes visually, in the preview, but now the alt-text is embedded in the image, and will be available to screen readers and other assistive technology.
And that is all for now – thanks for watching!
Ace by DAISY & Accessibility Metadata (4:18)
Link 1: Schema.org Accessiblity Metadata
Transcript:
In this video, we will be looking at metadata. Let’s start by looking at the list of violations in the Ace report. As you can see, it shows that there are “Serious” violations indicating that the book is missing the following required accessibility metadata:
-metadata-accessmode
-metadata-accessibilityfeature
-metadata-accessibilityhazard
-metadata-accessibilitysummary
There is also a “Moderate” violation for missing an optional piece of accessibility metadata:
-metadata-accessmodesufficient
In order to be considered accessible, accessibility metadata will need to be added to the book.
Using Ace to Add Accessibility Metadata
The Ace tool has incorporated a handy way to add accessibility metadata! Start by navigating to the metadata tab. You will see:
-The book’s metadata that is included in the OPF file (we’ll get to that in a minute);
-A list of missing accessibility metadata – they list all possible ones, but we are just going to be addressing the ones that result in violations;
-A link to a page on the DAISY Knowledge Base, that will help you learn about which attributes to select; and
-Options to “Edit” and “Save” the EPUB.
When we click on “Edit”, it opens up a pop-up window that you can use to select metadata, which can be saved to the EPUB file. I’ll demonstrate.
For schema:accessMode, we’ll select “textual”. This means that the book has text in it that can be read. If the book has any images in it, you will want to add another schema:accessMode field for that. So down at the bottom, let’s select schema:accessMode, and hit the plus sign. That will add another field to the list. For this one, we’ll select “visual”. Now, the book will have metadata that states that the book has both text and images within. You can keep going until you have added all of the required metadata. When you hit “Save” it will save the changes to the file, and re-process the EPUB.
Using an Editor to Add Accessibility Metadata
You are also able to use an ebook editor like Sigil to add accessibility metadata. Refer to Link one, the DAISY Knowledge base’s page on schema metadata, to determine all of the pieces you need to add – then, you can copy some metadata from there, paste it into your OPF file, like so, and update it to suit your book and the features you have included.
And that is all for metadata! Thanks for watching.
Ace by DAISY & Language Declarations (4:01)
Code to grab for Canadian English: xml:lang=”en-ca” lang=”en-ca”
Code to grab for Canadian French: xml:lang=”fr-ca” lang=”fr-ca”
Transcript
Hello and welcome to this video on language declarations! In order for a book to be accessible, it needs to have language declarations on each document that makes up the book. Let’s take a look at the violation in the Ace report.
For missing language declarations, we see “Serious” violations against the “html-has-lang” rule. This will need to be added manually to each document in the EPUB. Let’s take a look at the book in Sigil to see what we need to do.
Here we are looking at one of the files in the book – each XHTML file in the book browser needs a language declaration, and the place it needs to be added is the HTML header at the top of each page. Note that you may have it in other locations, like on each paragraph, or in body tags, which is fine, but it needs to be in the HTML header.
To add language declarations to each HTML header, you may be able to start by grabbing the code you need from the description section of this video; I’ve included the code for Canadian English and Canadian French.
This book is in English, so I’ll grab the code for that from my document. Then, we’ll want to paste it into the EPUB, like so. I’ll save that. So you can either go into each document and paste the code in, or you can do a global find and replace. Let’s copy this now complete HTML header – copy that – and head over to another document that doesn’t have a language declaration yet. Hit Control or Command F to make the find and replace area appear, then Paste your copied text into the “Replace” field at the bottom. Now, grab the HTML header that does not have the language declarations, and paste it into the “Find” field. Next, select “all HTML files” from the dropdown below, so it will make changes to all files. Then, hit “Replace All”! It should make the change to all files – but double check to make sure.
And that is it for language declarations! Thank you so much for watching!