Advance Accessibility Tests for Extended Descriptions

The test book is created by DAISY Consortium and DIAGRAM Center in the support of the efforts of publishing working group and EPUB 3 Community group of World Wide Web Consortium.

Introduction to Extended Descriptions

Many types of structures in HTML require additional information to be used effectively by persons with disabilities. The term commonly used is "extended descriptions." Images are most frequently identified as needing extended descriptions, but other structures may also use this technique.

Images fall into several categories, and those that are merely decorative do not need to be presented to the user who is blind. Some images are adequately described in the surrounding text or in a caption and require no alternative (alt) text. Other images can briefly be described and "alt text" is normally used. However, some images that convey a great deal of information require extended descriptions.

In this Extended Description Test EPUB, we will look at a range of techniques to present extended descriptions. We believe that the results from these tests will be very helpful to publishers and others producing content. In addition, developers of all kinds of reading systems, including reading apps and reading devices, who want to create a great reading experience will benefit. It should be noted that reading systems extend to reading in browsers such as Readium or Microsoft's Edge, on platforms such as iBooks or the Amazon Kindle, in specialized software such as Voice Dream Reader, or in hardware devices such as the Victor Stream or a Kindle reader.

Over the years features have been added to HTML and to ARIA (Accessible Rich Internet Applications) to provide the functionality to read extended descriptions. Some of the HTML structures are new and our ongoing testing will show their adoption in reading systems and with assistive technology. In HTML, the introduction of the details element with its summary element allows more information to be added. The summary provides a short description and this can be expanded. Normally the expanded feature is shown with a button that expands and collapses. A new ARIA attribute introduced in ARIA 1.1 is aria-details, which Assistive Technology will eventually recognize and provide an easy way to get to the extended description. However, currently aria-details is not supported properly; consequently we will also test a fallback mechanism of normal linking to get to the extended description.

It is important to point out that publishers may choose not to clutter the page with extended descriptions. This is why we will test mechanisms to expand descriptions or to move them to the end of a chapter, and provide a way to get back to the correct reading position in the content. This EPUB test title will provide several chapters and each with a specific technique we want to test. It is also important to mention here that the primary objective of these tests is to test the functionality and not the visual appearance.

This testing will help us identify the extended description techniques that are supported most widely in reading systems and assistive technology combinations. With this information, we will develop best practices with publishers and also provide feedback to reading system developers for improving accessibility of their products. We will also provide this information to Assistive Technology developers.

Thank you to the Web Accessibility Initiative for the images we will use

The content of these examples comes from Web Accessibility Tutorials

Assistive Technology and Other Techniques for Reading

In this extended description title, we expect a wide range of Assistive Technology (AT) to be used. In addition we believe in many cases no Assistive Technology will be used. Instead the reader will rely on native features such as font enlargement and foreground and background changes to help improve the reading experience. Further, read aloud or other technology for presenting the information to users with learning disabilities or dyslexia will be employed. Collectively we refer to this in this title using the phrase "AT and other reading techniques."

What is in this EPUB?

There are five more chapters that contain a total of twelve examples. Each example has one or two tests for evaluation and comment. The tests are numbered and correspond to the numbers in the evaluation form.

Extended description using details and summary

Notes about techniques

In the first image on this page, the HTML details and summary elements are used to expose the extended image descriptions directly within the figcaption for the image.

In the second image, the HTML details and summary elements are used to expose the extended image descriptions directly under the image (details is placed after img element, as a sibling).

In both images, aria-details also points to this details/summary structure, which eventually will be picked up by assistive technologies and reading systems to make this a seamless experience.

Tests for bar chart image that uses HTML details/summary for image description, and aria-details for navigation

The tests below refer to the bar chart image immediately following.

Detection of aria-details on image (img element) in figure element
extdesc-010

This test passes if aria-details for the image is reported. (For example, your screen reader will announce has details)

Moving to extended description inside figcaption
extdesc-020

This test passes if you can use aria-details to take you to the HTML details/summary element just below the image. (For example your browser or screen reader may provide some shortcut key or an interactive element like button, link etc. for using aria-details.)

Detection and utilization of details and summary elements inside figcaption
extdesc-030

This test passes if all the following steps are successful:

The HTML details/summary elements are reported. (For example, there is an interactive element like button, link etc. that you can activate.)

You can expand and collapse the details element containing the extended description. (For example, you can activate the interactive element to expand or collapse the extended description.)

When expanded, the extended description should appear immediately after the activating element. When you collapse it, you should remain at the same position.

Following is the bar chart image for the above tests

Example.com Site visitors Jan to March 2014

Expand / collapse description

Overview

The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.

Data

Period | Site 1 | Site 2 | Site 3
Jan | 135 | 112 | 92
Feb | 117 | 114 | 99
Mar | 96 | 111 | 126
Qtr Total | 348 | 337 | 308

Presentation

The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

Tests for peacock image that uses HTML details/summary for image description, and aria-details for navigation

The three tests below refer to the peacock image immediately following the tests.

Detection of aria-details on image (img element)
extdesc-050

This test passes if aria-details for the image is reported. (For example, your screen reader will announce has details.)

Moving to extended description next to the image
extdesc-060

This test passes if you can use aria-details to take you to the HTML details/summary element just below the image. (For example your browser or screen reader may provide some shortcut key or an interactive element like button, link etc. for using aria-details.)

Detection and utilization of details and summary elements
extdesc-070

This test passes if all the following steps are successful:

The HTML details/summary elements are reported. (For example, there is an interactive element like button, link etc. that you can activate.)

You can expand and collapse the details element containing the extended description. (For example, you can activate the interactive element to expand or collapse the extended description.)

When expanded, the extended description should appear immediately after the activating element. When you collapse it, you should remain at the same position.

Following is the peacock image for the above tests

Expand / collapse description

The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.

Extended descriptions using links to end of chapter

Notes about techniques

In this chapter there are two examples. The extended descriptions are placed at the end of the chapter. It is expected that this approach will appeal to publishers that do not want the descriptions to impact the appearance of the content. The approaches have the lowest impact on the visual layout. They both use aria-details, which points to a div at the end of the chapter, which eventually will be picked up by assistive technologies and reading systems to make navigation to the description a seamless experience. However, until aria-details is widely adopted, a traditional link is placed below the image that points to the same location at the end of the chapter. The bar chart has a text link and the peacock has an image as a link. A link back to the image is provided to take the reader back to the same location where they left off reading in the primary flow of content.

In summary, the three techniques we are testing are:

aria-details attribute.

Text hyperlink to act as fallback if aria-details is not supported.

Image hyperlink to act as fallback if aria-details is not supported.

Tests for bar chart image that uses aria-details for navigation to end of chapter description

The tests below refer to the bar chart image immediately following.

Detection of aria-details
extdesc-090

This test passes if aria-details for the image is reported. (For example, your screen reader will announce has details.)

Linking to extended description at end of chapter
extdesc-100

This test passes if you can use aria-details to take you to the description at the end of the chapter, under the heading "Description of Bar Chart". (For example your browser or screen reader may provide some shortcut key or an interactive element like button, link etc. for using aria-details.)

Following is the bar chart image for the above tests

Example.com Site visitors Jan to March 2014

Fallback technique 1

The test below refers to the bar chart image immediately following.

Fallback technique for linking to extended description via text hyperlink
extdesc-110

This test passes if all the following steps are successful:

The link "Follow for extended description" is reported, and on activating, it takes the focus to extended description at end of this document. The extended description is placed under the heading "Description of Bar Chart"

You can read the extended description

On activating the link "Navigate back to Bar Chart image" below the extended description, it takes the focus back to original position.

Following is the bar chart image for the above fallback test

Example.com Site visitors Jan to March 2014

Follow for extended description

Fallback technique 2

The test below refers to the peacock image immediately following.

Fallback technique for linking to extended description via image hyperlink
extdesc-120

This test passes if all the following steps are successful:

The link "Follow link for extended description at end of chapter" is reported, and on activating it takes the focus to extended description at end of this document. The extended description is placed under the heading "Description of Peacock"

You can read the extended description

On activating the link "Navigate back to Peacock image" below the extended description, it takes the focus back to original position in the image.

Following is the peacock image for the above fallback test

Complex Images (provided as filler)

We want to simulate that there is a lot of material between the images and the end of the chapter where the extended descriptions are placed. This provides that filler.

Complex images contain substantial information; more details than can be conveyed in a short phrase or sentence. These are typically:

graphs and charts, including flow charts and organizational charts;

diagrams and illustrations where the page text relies on the user being able to understand the image;

maps showing locations or other information such as weather systems.

End of Chapter Extended Descriptions

Description of Bar Chart

Overview

The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.

Data

Period | Site 1 | Site 2 | Site 3
Jan | 135 | 112 | 92
Feb | 117 | 114 | 99
Mar | 96 | 111 | 126
Qtr Total | 348 | 337 | 308

Presentation

The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

Navigate back to bar chart image.

Description of Peacock

The male peacock is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.

Navigate back to peacock image.

Extended descriptions using ARIA described-by pointing to a visually hidden aside

Notes about techniques

In the following examples, the aria-describedby attribute is used to expose the extended image description, which is in an aside element.

In the first example, aria-describedby points to an aside element, placed inside a figcaption element.

In the second example, the head of the peacock is described using a paragraph of text that is in an aside on the web page.

Note:

Since aria-describedby will flatten all the extended image description text, we believe the table within the extended image description will not be navigable using AT.

Since the description is hidden visually, this solution is not recommended for universal accessibility because the description will not be available to low vision users and people with learning disabilities.

The test below refers to the bar chart image immediately following.

aria-describedby points to an aside in a figcaption
extdesc-150

The test passes if you are able to read/hear the following text when the focus is on the image. (You should be able to read it before reaching the horizontal break):

Extended Description Overview
The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.

Note: there may be a lot more text read that is in a table.

Note for screen reader users: It is possible that your screen reader reads the text inside aria-describedby before reporting the image. In such a case, please provide your experience in the notes.

Following is the bar chart image along with its description for the above test

Horizontal break

Example.com Site visitors Jan to March 2014

Extended Description Overview

The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month.

Data

Period | Site 1 | Site 2 | Site 3
Jan | 135 | 112 | 92
Feb | 117 | 114 | 99
Mar | 96 | 111 | 126
Qtr Total | 348 | 337 | 308

Presentation

The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

The test below refers to the peacock image immediately following.

aria-describedby points to an aside at the end of chapter
extdesc-160

The test passes if you are able to read/hear the following text when the focus is on the image. (You should be able to read the description before reaching the Filler simulating aside at the end of the chapter)

The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings."

Following is the peacock image along with its description for the above test

Filler simulating aside at the end of the chapter

Extended Description: The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings.

Tests for decorative images

Impact of alt=quote endquote (empty alt) and role= quote presentation endquote

Many times decorative images are used on pages, sometimes called "eye candy." For persons using Assistive Technology this can be destractive and annoying. To suppress having anything spoken, like the file name of the image, two techniques are recommended to be used on the same image. Use alt="", i.e. the alt is empty. plus use role=presentation". When both are present, the person using AT should hear nothing. However, when only alt="" (empty alt) is used, the reader should be alerted that there is a graphic present and they should understand that the graphic was adequately described in the fig caption or the surrounding text.

Block-level image with empty alt and without role="presentation"
extdesc-170

The test passes if assistive technology is able to detect that there is a graphic or image between the two lines of text.

This text is before the image

and this text is after the image.

Inline graphic with empty alt and without role="presentation"
extdesc-180

The test passes if assistive technology is able to detect that there is a graphic or image between the two sentences in the paragraph.

This text is before the image. And this text is after the image.

Block-level image with role="presentation" and empty alt
extdesc-190

The test passes if assistive technology is not able to detect the graphic or image between the following two lines of text.

This text is before the image

and this text is after the image.

Inline graphic with role="presentation" and empty alt
extdesc-200

The test passes if assistive technology is not able to detect the graphic or image in the middle of the paragraph.

This sentence is before the image. This sentence is after the image.

Details and summary expanding

The expanding and collapsing nature of the HTML details element with the summary feature needs to be tested for accessibility. The example we have here is a very large chunk of text with HTML markup. When expanded, it would reflow into several pages. Some reading systems have a scrolling view and others have a paginated view. We want to make sure that this behaves correctly.

The text is a recipe that is a real recipe you could try.

Expanding details and ease of reading
extdesc-210

This test passes if all the following steps are successful:

You can expand the details and the screen adjusts by itself, bringing the relevant text on screen.

You can read to the end of description. After the recipe you should see some End of chapter Header and text to ensure nothing was cut off.

Please repeat this test for paginated view as well as scroll view and provide a note about it. Please also include notes about usability of this approach.

Goulash Soup

Soups and Stews

In this chapter I will present the soups and stews that qualify to be called George's Goulash Soup. While I have consulted many other recipies, there is no single other recipe that is the basis for my recipies, i.e. these are truly mine. I will also include tips and tricks about cuts of meat and thoughts about freezing.

George's Goulash Soup

While Gail and I traveled in Germany, Austria, and Switzerland in the Fall and Winter of 1974, we often found Goulash Soup or sometimes called Humgarian Goulash Soup on the menus. We always had at least a cup and came to love all the variations. I have set out to make my own version of these wonderful dishes.

Ingredients

Note: Measurements in US.

2 Tablespoons vegetable oil

3-4 cloves crushed garlic

3-4 lb stew meat cut into sugar cube or smaller size chunks

1 large onion or equivalent amount of leek

2 16 oz cans of beef stock (can substitute bullion cubes and water)

1 16 oz can of Tomato sauce

1 16 oz. can of crushed, stewed, or whole tomatoes (if whole, chop)

2 Tablespoons paprika

Lots of black pepper (1/2 Tablespoon)

1/2 Tablespoon chili powder

6 medium carrots cut into sugar cube size or smaller chunks

4 medium potatoes cut into sugar cube size chunks or smaller

2 cups frozen peas

Optional: up to 1/2 cup potato flakes, used to thicken if desired, other thickening is OK (flour or cornstarch)

Tip: I normally take a chuck (shoulder roast) or arm roast and remove all bone, fat and sinue to make the stue meat.

Method

In large pot, heat over high heat vegetable oil and crushed garlic. When the garlic is fragrant, add onion or leek, followed by meat. Brown and simmer for 10 to 20 minutes.

Add beef stock, tomatoes, tomato sauce, paprika, pepper, chile powder, and simmer for at least 1 hour over low heat. the soup should just be on a low simmer.

Add carrots, and simmer for 30 minutes on low.

Add potatoes and simmer for 30 minutes (potatoes need a higher roll to cook).

Add peas and simmer for 30 minutes or until potatoes, carrots, and peas are soft and perfect!

Thicken with potato flakes (instant mashed potatoes) or other thickening agent, if desired.

Serving SUGGESTIONS: Serve with fresh baked bread or rolls. Sour cream may be added at the table.

Deep Freezing: This soup freezes well. I will label a one quart ziplock bag with the name of the soup and date. I will remove any air in the bag and lay on a cookie sheet and place in the deep freezer. I then remove from cookie sheet and position in the deep freezer.

This is at the end of the chapter

This sentence is the last item in this details expansion test.

details and summary expanding and collapsing

The expanding and collapsing nature of the HTML details element with the summary feature needs to be tested for accessibility. The example we have here is a very large chunk of text with HTML markup. When expanded, it would reflow into several pages. Some reading systems have a scrolling view and others have a paginated view. We want to make sure that this behaves correctly.

The text is a recipe that is a real recipe you could try.

Collapsing and pagination
extdesc-220

This test passes if the expanded description collapses without leaving space or pages behind. Two conditions must be satisfied:

On activating the expand/collapse button twice, the description first expands then collapses.

The extra pages or space created for showing the extended description also collapse, and you are able to read end of chapter header and text just after the expand/collapse button.

Please repeat this test for paginated view as well as scrolling view, and provide a note about it. Please also include notes about usability of this approach.

Goulash Soup

Soups and Stews

In this chapter I will present the soups and stews that qualify to be called George's Goulash Soup. While I have consulted many other recipies, there is no single other recipe that is the basis for my recipies, i.e. these are truly mine. I will also include tips and tricks about cuts of meat and thoughts about freezing.

George's Goulash Soup

While Gail and I traveled in Germany, Austria, and Switzerland in the Fall and Winter of 1974, we often found Goulash Soup or sometimes called Humgarian Goulash Soup on the menus. We always had at least a cup and came to love all the variations. I have set out to make my own version of these wonderful dishes.

Ingredients

Note: Measurements in US.

2 Tablespoons vegetable oil

3-4 cloves crushed garlic

3-4 lb stew meat cut into sugar cube or smaller size chunks

1 large onion or equivalent amount of leek

2 16 oz cans of beef stock (can substitute bullion cubes and water)

1 16 oz can of Tomato sauce

1 16 oz. can of crushed, stewed, or whole tomatoes (if whole, chop)

2 Tablespoons paprika

Lots of black pepper (1/2 Tablespoon)

1/2 Tablespoon chili powder

6 medium carrots cut into sugar cube size or smaller chunks

4 medium potatoes cut into sugar cube size chunks or smaller

2 cups frozen peas

Optional: up to 1/2 cup potato flakes, used to thicken if desired, other thickening is OK (flour or cornstarch)

Tip: I normally take a chuck (shoulder roast) or arm roast and remove all bone, fat and sinue to make the stue meat.

Method

In large pot, heat over high heat vegetable oil and crushed garlic. When the garlic is fragrant, add onion or leek, followed by meat. Brown and simmer for 10 to 20 minutes.

Add beef stock, tomatoes, tomato sauce, paprika, pepper, chile powder, and simmer for at least 1 hour over low heat. the soup should just be on a low simmer.

Add carrots, and simmer for 30 minutes on low.

Add potatoes and simmer for 30 minutes (potatoes need a higher roll to cook).

Add peas and simmer for 30 minutes or until potatoes, carrots, and peas are soft and perfect!

Thicken with potato flakes (instant mashed potatoes) or other thickening agent, if desired.

Serving SUGGESTIONS: Serve with fresh baked bread or rolls. Sour cream may be added at the table.

Deep Freezing: This soup freezes well. I will label a one quart ziplock bag with the name of the soup and date. I will remove any air in the bag and lay on a cookie sheet and place in the deep freezer. I then remove from cookie sheet and position in the deep freezer.

This is at the end of the chapter

This sentence is the last item in this details expansion test.