Accessibility Findings Report - books.toscrape.com

Executive summary

BarrierScan tested 8 pages of books.toscrape.com against the WCAG-based axe-core ruleset. The scan identified 4 types of accessibility barrier affecting 1689 element instances across the site. Findings below are ordered by priority: the issue patterns most frequently cited in digital-accessibility litigation come first, weighted by severity and by how prominently the affected pages figure in a typical customer journey.

Pages scanned

Barrier types

1689

Element instances

Critical + serious

Top barriers

#	Barrier	Severity	Pages affected	Instances
1	Text does not have enough contrast against its background color-contrast	Serious	8	1043
2	Heading levels skip around heading-order	Moderate	8	8
3	The page is missing a main landmark landmark-one-main	Moderate	8	8
4	Page content sits outside any landmark region region	Moderate	8	630

Severity mix

Severity	Barrier types	Element instances
Critical	0	0
Serious	1	1043
Moderate	3	646
Minor	0	0

Prioritized findings

1. Text does not have enough contrast against its background

Serious

Rule: color-contrast | WCAG 2.0 AA, WCAG 1.4.3 | 8 pages, 1043 instances, 137 distinct element groups

What it is

Text is rendered in a color too close to its background color to read comfortably. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold).

Who it blocks

People with low vision, color-vision deficiencies, and older users. It also affects everyone reading on a phone in sunlight. Low-contrast prices, buttons, and form hints directly cost sales.

Where it occurs

https://books.toscrape.com/
https://books.toscrape.com/index.html
https://books.toscrape.com/catalogue/category/books_1/index.html
https://books.toscrape.com/catalogue/category/books/travel_2/index.html
https://books.toscrape.com/catalogue/category/books/mystery_3/index.html
https://books.toscrape.com/catalogue/category/books/historical-fiction_4/index.html
https://books.toscrape.com/catalogue/category/books/sequential-art_5/index.html
https://books.toscrape.com/catalogue/category/books/classics_6/index.html

Element: li:nth-child(*) > a — 8 pages, 152 instances
Example on https://books.toscrape.com/:

<a href="catalogue/category/books/historical-fiction_4/index.html">
                            
                                Historical Fiction
                            
                        </a>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .product_price > .price_color — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<p class="price_color">£51.77</p>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .product_price > .instock.availability — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<p class="instock availability">
    <i class="icon-ok"></i>
    
        In stock
    
</p>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .product_price > form > button — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<button type="submit" class="btn btn-primary btn-block" data-loading-text="Adding...">Add to basket</button>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > hN > a — 8 pages, 65 instances
Example on https://books.toscrape.com/:

<a href="catalogue/sapiens-a-brief-history-of-humankind_996/index.html" title="Sapiens: A Brief History of Humankind">Sapiens: A Brief History ...</a>

Plus 132 more element groups with the same issue (376 instances). The complete list is in findings.json.

How to fix it

Darken the text or lighten the background until the ratio meets 4.5:1 (3:1 for large text). Check candidate pairs with a contrast checker before applying. A common quick win is replacing light gray body text (#999 and lighter) on white with #595959 or darker. The first affected element on this site matches the selector "li:nth-child(3) > a".

/* Before: #999999 on #ffffff is 2.85:1, fails */
.product-description { color: #999999; background: #ffffff; }

/* After: #595959 on #ffffff is 7:1, passes */
.product-description { color: #595959; background: #ffffff; }

2. Heading levels skip around

Moderate

Rule: heading-order | Best practice | 8 pages, 8 instances

What it is

Heading levels jump (for example h2 straight to h4), breaking the document outline that assistive technology builds from headings.

Who it blocks

Screen reader users navigate by heading level to skim a page the way sighted users visually scan it. Skipped levels make sections appear missing or misplaced.

Where it occurs

https://books.toscrape.com/
https://books.toscrape.com/index.html
https://books.toscrape.com/catalogue/category/books_1/index.html
https://books.toscrape.com/catalogue/category/books/travel_2/index.html
https://books.toscrape.com/catalogue/category/books/mystery_3/index.html
https://books.toscrape.com/catalogue/category/books/historical-fiction_4/index.html
https://books.toscrape.com/catalogue/category/books/sequential-art_5/index.html
https://books.toscrape.com/catalogue/category/books/classics_6/index.html

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > hN — 8 pages, 8 instances
Example on https://books.toscrape.com/:

<h3><a href="catalogue/a-light-in-the-attic_1000/index.html" title="A Light in the Attic">A Light in the ...</a></h3>

How to fix it

Use heading levels to reflect structure, not font size: h1 for the page title, h2 for major sections, h3 for subsections, without skipping levels. Style headings with CSS instead of choosing a tag for its size. The first affected element on this site matches the selector ".col-xs-6.col-lg-3.col-sm-4:nth-child(1) > article > h3".

<!-- Before -->
<h1>Office Chairs</h1>
<h4>Ergonomic models</h4>

<!-- After -->
<h1>Office Chairs</h1>
<h2 class="subheading-style">Ergonomic models</h2>

3. The page is missing a main landmark

Moderate

Rule: landmark-one-main | Best practice | 8 pages, 8 instances

What it is

The page has no main element (or more than one), so assistive technology cannot jump directly to the primary content.

Who it blocks

Screen reader users use the main landmark as the standard shortcut past headers and navigation. Without it, they re-listen to the same boilerplate on every page.

Where it occurs

https://books.toscrape.com/
https://books.toscrape.com/index.html
https://books.toscrape.com/catalogue/category/books_1/index.html
https://books.toscrape.com/catalogue/category/books/travel_2/index.html
https://books.toscrape.com/catalogue/category/books/mystery_3/index.html
https://books.toscrape.com/catalogue/category/books/historical-fiction_4/index.html
https://books.toscrape.com/catalogue/category/books/sequential-art_5/index.html
https://books.toscrape.com/catalogue/category/books/classics_6/index.html

Element: html — 8 pages, 8 instances
Example on https://books.toscrape.com/:

<html lang="en-us" class="no-js">

How to fix it

Wrap the primary content of every page in exactly one main element. The first affected element on this site matches the selector "html".

<!-- Before -->
<div id="content">...</div>

<!-- After -->
<main id="content">...</main>

4. Page content sits outside any landmark region

Moderate

Rule: region | Best practice | 8 pages, 630 instances, 8 distinct element groups

What it is

Some content is not contained in a landmark region (header, nav, main, footer, or an ARIA region), so it is unreachable by landmark navigation.

Who it blocks

Screen reader users who navigate by landmarks to skip between page areas; orphaned content is easy to miss entirely.

Where it occurs

https://books.toscrape.com/
https://books.toscrape.com/index.html
https://books.toscrape.com/catalogue/category/books_1/index.html
https://books.toscrape.com/catalogue/category/books/travel_2/index.html
https://books.toscrape.com/catalogue/category/books/mystery_3/index.html
https://books.toscrape.com/catalogue/category/books/historical-fiction_4/index.html
https://books.toscrape.com/catalogue/category/books/sequential-art_5/index.html
https://books.toscrape.com/catalogue/category/books/classics_6/index.html

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .image_container — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<div class="image_container">

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > hN — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<h3><a href="catalogue/a-light-in-the-attic_1000/index.html" title="A Light in the Attic">A Light in the ...</a></h3>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .product_price > .price_color — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<p class="price_color">£51.77</p>

Element: .col-xs-N.col-lg-N.col-sm-N:nth-child(*) > article > .product_price > .instock.availability — 8 pages, 150 instances
Example on https://books.toscrape.com/:

<p class="instock availability">
    <i class="icon-ok"></i>
    
        In stock
    
</p>

Element: .breadcrumb — 8 pages, 8 instances
Example on https://books.toscrape.com/:

<ul class="breadcrumb">
        <li>
            <a href="index.html">Home</a>
        </li>
        <li class="active">All products</li>
    </ul>

Plus 3 more element groups with the same issue (22 instances). The complete list is in findings.json.

How to fix it

Wrap all page content in the appropriate semantic elements: header, nav, main, aside, footer. Almost everything between the header and footer belongs inside main. The first affected element on this site matches the selector ".col-xs-6.col-lg-3.col-sm-4:nth-child(1) > article > .image_container".

<!-- Before -->
<body>
  <div class="promo">Free shipping this week</div>
  <main>...</main>
</body>

<!-- After -->
<body>
  <header>
    <div class="promo">Free shipping this week</div>
  </header>
  <main>...</main>
</body>

Methodology and scope

Pages were discovered from the site's sitemap where available, otherwise by crawling same-origin links from the start URL, respecting robots.txt. Each page was loaded in a current headless Chromium browser at a 1280x800 desktop viewport and evaluated with axe-core, the most widely used open-source accessibility rules engine, against WCAG 2.x A and AA success criteria. Issues are grouped by type: each barrier type appears once, with the distinct page components it affects nested under it and counts of affected pages and element instances.

Prioritization weights each finding by three factors: whether the underlying issue pattern appears among those most frequently cited in digital-accessibility lawsuits (image alternative text, form labels, link and button names, keyboard accessibility, color contrast, media captions, and document language), the severity assigned by the rules engine, and whether the affected pages are critical to the customer journey (home, product, cart, checkout, and contact pages).

This report is generated by automated testing, which reliably detects many, but not all, accessibility barriers. Automated tools typically identify 30-57% of WCAG issue types. It is not a certification of compliance and does not replace manual testing with assistive technology. Findings are prioritized by the issue patterns most frequently cited in digital-accessibility litigation.

Coverage measurements for automated testing: Deque's analysis of roughly 300,000 findings from real audits attributes 57 percent of issue volume to automated rules (deque.com/automated-accessibility-coverage-report). The UK Government Digital Service's planted-barrier experiment found the best single automated tool detected about 41 percent of 143 known barriers (accessibility.blog.gov.uk, 2017). The barrier types most frequently cited in digital-accessibility litigation fall largely within what automated testing detects reliably, which is why this report prioritizes them.