accessibility-testbed/images.php at main · andywestley/accessibility-testbed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
$pageTitle = 'Images';

include 'includes/header.php';
?>


    <h1>Image Accessibility Issues</h1>

    <h2>1.1.1 Non-text Content - Missing Alt Text</h2>
    <!-- Missing alt attribute entirely -->
    <img src="https://placehold.co/200x200" />
    <img src="https://placehold.co/201x200" />
    <img src="https://placehold.co/202x200" />
    <img src="https://placehold.co/203x200" />
    <img src="https://placehold.co/204x200" /> <!-- 5 missing alts -->

    <h2>1.1.1 Non-text Content - More Bad Alt Text</h2>
    <img src="https://placehold.co/300x300/jpg" alt="photo.jpg" />
    <img src="https://placehold.co/301x300/png" alt="image.png" />
    <img src="https://placehold.co/302x300" alt="picture" />
    <img src="https://placehold.co/303x300" alt="graphic" />
    <img src="https://placehold.co/304x300" alt="bullet point" />

    <h2>1.1.1 Non-text Content - Bad Alt Text</h2>
    <!-- file name as alt -->
    <img src="https://placehold.co/200x200/png" alt="image.png" />

    <!-- "image of" redundancy -->
    <img src="https://placehold.co/200x200" alt="Image of a placeholder" />

    <h2>1.1.1 Non-text Content - Decorative Image with Alt</h2>
    <!-- Decorative image should have empty alt, but has description -->
    <img src="https://placehold.co/10x10" alt="Spacer" />

    <h2>1.1.1 Non-text Content - Complex Image without Description</h2>
    <!-- Chart placeholder without long description -->
    <img src="https://placehold.co/400x300?text=Complex+Chart" alt="Bar chart showing Q1 growth" />
    <p>The chart above shows data.</p>

    <h2>1.1.1 Non-text Content - Image Map Missing Alt</h2>
    <img src="https://placehold.co/300x100" usemap="#examplemap" alt="Map" />
    <map name="examplemap">
        <area shape="rect" coords="0,0,100,100" href="#" /> <!-- Missing alt -->
    </map>

<?php include 'includes/footer.php'; ?>