Accessibility Checker plugin

<!-- Using paragraphs styled as headings -->
<p style="font-size: 24px; font-weight: bold;">This looks like a heading</p>

<!-- Using div as heading -->
<div class="heading">Another pseudo heading</div>

<!-- Styled paragraph with heading class -->
<p class="h2">Not a real heading</p>

<!-- Proper heading tags -->
<h1>Main page title</h1>

<h2>Section heading</h2>

<!-- Styled heading for design purposes -->
<h3 class="custom-style">Subsection heading</h3>

<!-- Skipping from h1 to h3 -->
<h1>Main title</h1>
<h3>Subsection</h3>

<!-- Skipping from h2 to h4 -->
<h2>Section</h2>
<h4>Sub-subsection</h4>

<!-- Improper nesting -->
<h3>Higher level</h3>
<h2>Lower level</h2>

<!-- Proper sequential headings -->
<h1>Main title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

<!-- Multiple h2 sections -->
<h1>Main title</h1>
<h2>First section</h2>
<h3>Subsection</h3>
<h2>Second section</h2>
<h3>Another subsection</h3>

<!-- Multiple elements with same ID -->
<div id="section1">First section</div>
<div id="section1">Second section</div>

<!-- Duplicate IDs in different elements -->
<button id="submit">Submit</button>
<input id="submit" type="submit" value="Send">

<!-- Form fields with same ID -->
<label for="name">First name:</label>
<input id="name" type="text">
<label for="name">Last name:</label>
<input id="name" type="text">

<!-- Unique IDs for sections -->
<div id="section1">First section</div>
<div id="section2">Second section</div>

<!-- Unique IDs for form controls -->
<button id="submit-button">Submit</button>
<input id="submit-input" type="submit" value="Send">

<!-- Form fields with unique IDs -->
<label for="firstname">First name:</label>
<input id="firstname" type="text">
<label for="lastname">Last name:</label>
<input id="lastname" type="text">

<!-- Mixed signals: has alt text but marked as decorative -->
<img src="logo.jpg" alt="Company Logo" role="presentation">

<!-- Incomplete: no accessibility information -->
<img src="chart.jpg">

<!-- Conflicting: decorative intent with aria-label -->
<img src="icon.jpg" role="presentation" aria-label="Icon">

<!-- Conflicting: empty alt with aria-label -->
<img src="decoration.jpg" alt="" aria-label="Decoration">

<!-- Conflicting: decorative with title (interferes with intent) -->
<img src="spacer.gif" role="presentation" title="Spacer">

<!-- Invalid: empty role -->
<img src="photo.jpg" alt="Description" role="">

<!-- When decorative not allowed (if a11ychecker_allow_decorative_images = false) -->
<img src="spacer.gif" alt="" role="presentation">

<!-- Informative image with meaningful alt text -->
<img src="logo.jpg" alt="Company Logo">

<!-- Decorative image with empty alt -->
<img src="divider.png" alt="">

<!-- Decorative image with role only -->
<img src="spacer.gif" role="presentation">

<!-- Decorative image with both (redundant but valid) -->
<img src="pattern.jpg" alt="" role="presentation">

<!-- Informative image with supporting aria-describedby -->
<img src="chart.png"
     alt="Sales performance chart"
     aria-describedby="chart-desc">
<p id="chart-desc">Detailed breakdown of Q3 sales performance...</p>

<!-- No alt attribute at all -->
<img src="chart.jpg">

<!-- No alt attribute (even with aria-label) -->
<img src="icon.jpg" aria-label="Settings">

<!-- No alt attribute (but has aria-labelledby) -->
<img src="chart.jpg" aria-labelledby="chart-caption">

<!-- No alt attribute (but has title) -->
<img src="button.jpg" title="Submit">

<!-- Basic alt attribute usage -->
<img src="product.jpg" alt="Red coffee mug">

<!-- Decorative image with empty alt -->
<img src="separator.png" alt="" role="presentation">

<!-- Alt with supporting aria-describedby -->
<img src="chart.png"
     alt="Sales performance chart"
     aria-describedby="chart-desc">
<p id="chart-desc">Detailed breakdown of Q3 sales performance...</p>

<!-- Alt with matching title for tooltip -->
<img src="icon.png"
     alt="Settings"
     title="Settings">

<!-- Alt text matches filename -->
<img src="sunset.jpg" alt="sunset.jpg">

<!-- Alt text matches filename without extension -->
<img src="photo.png" alt="photo">

<!-- Generic filename used as alt -->
<img src="DSC_0123.jpg" alt="DSC_0123.jpg">

<!-- Filename with path used as alt -->
<img src="/images/team/john-smith.png" alt="john-smith.png">

<!-- Descriptive alt text instead of filename -->
<img src="sunset.jpg" alt="Vibrant orange sunset over ocean waves">

<!-- Meaningful description instead of generic name -->
<img src="photo.png" alt="Team celebrating product launch">

<!-- Descriptive text instead of camera filename -->
<img src="DSC_0123.jpg" alt="Students collaborating in the library">

<!-- Meaningful description for a team member -->
<img src="/images/team/john-smith.png" alt="John Smith, Senior Developer">

<img src="office-photo.jpg"
     alt="Our modern office space features an open floor plan with collaborative workstations, standing desks, and multiple meeting rooms. The space is brightly lit with natural light from floor-to-ceiling windows, and includes a fully stocked kitchen area, relaxation zone with comfortable seating, and a game room with ping pong tables and video games for employee breaks.">

<img src="chart.png"
     alt="Bar graph showing monthly sales data for the past year, with blue bars representing domestic sales and red bars representing international sales, demonstrating a steady increase in both markets with particular growth in Q3 and Q4, reaching peak sales in December.">

<img src="office-photo.jpg"
     alt="Modern open-plan office with collaborative spaces"
     aria-describedby="office-details">
<p id="office-details">Our office features collaborative workstations, standing desks, and meeting rooms, complemented by natural lighting, a kitchen area, and recreational spaces including a game room.</p>

<img src="chart.png"
     alt="Monthly sales growth chart for domestic and international markets"
     aria-describedby="chart-details">
<p id="chart-details">The bar graph shows steady growth in both domestic (blue) and international (red) sales throughout the year, with significant increases in Q3 and Q4, peaking in December.</p>

<!-- Table without caption -->
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget A</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Using text outside the table -->
<p>Product Pricing Table</p>
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <!-- ... table content ... -->
</table>

<!-- Simple table with caption -->
<table>
    <caption>Product Pricing</caption>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget A</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Table with detailed caption -->
<table>
    <caption>2023 Quarterly Sales by Region (in thousands USD)</caption>
    <tr>
        <th>Region</th>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
    </tr>
    <!-- ... table content ... -->
</table>

<!-- Complex table without summary -->
<table>
    <caption>Employee Performance Review Scores</caption>
    <tr>
        <th rowspan="2">Department</th>
        <th colspan="2">Q1 2023</th>
        <th colspan="2">Q2 2023</th>
    </tr>
    <tr>
        <th>Average</th>
        <th>Range</th>
        <th>Average</th>
        <th>Range</th>
    </tr>
    <!-- ... table content ... -->
</table>

<!-- Summary that just repeats caption -->
<table summary="Employee Performance Review Scores">
    <caption>Employee Performance Review Scores</caption>
    <!-- ... table content ... -->
</table>

<!-- Complex table with descriptive summary -->
<table summary="Performance scores arranged by department. Each department has average scores and score ranges for Q1 and Q2 2023. Read across for quarterly comparisons or down for departmental comparisons.">
    <caption>Employee Performance Review Scores</caption>
    <tr>
        <th rowspan="2">Department</th>
        <th colspan="2">Q1 2023</th>
        <th colspan="2">Q2 2023</th>
    </tr>
    <tr>
        <th>Average</th>
        <th>Range</th>
        <th>Average</th>
        <th>Range</th>
    </tr>
    <!-- ... table content ... -->
</table>

<!-- Table with navigation instructions -->
<table summary="Monthly sales data in a matrix format. Rows represent products, columns represent months. Subtotals are provided at the bottom of each quarter.">
    <caption>2023 Product Sales by Month</caption>
    <!-- ... table content ... -->
</table>

<!-- HTML4: Identical caption and summary -->
<table summary="Quarterly Sales Report 2023">
    <caption>Quarterly Sales Report 2023</caption>
    <!-- ... table content ... -->
</table>

<!-- HTML4: Summary that doesn't add value -->
<table summary="This table shows sales data">
    <caption>Quarterly Sales Report 2023</caption>
    <!-- ... table content ... -->
</table>

<!-- HTML5: Caption that doesn't explain structure -->
<table>
    <caption>Sales Data 2023</caption>
    <!-- ... complex table content ... -->
</table>

<!-- HTML4: Complementary caption and summary -->
<table summary="Sales data is organized by product category (rows) and quarter (columns). Each cell contains both revenue and units sold. Totals are provided in the last row.">
    <caption>2023 Quarterly Sales by Product Category</caption>
    <!-- ... table content ... -->
</table>

<!-- HTML5: Comprehensive caption with both what and how -->
<table>
    <caption>
        2023 Quarterly Sales by Product Category
        (Data organized with product categories in rows and quarters in columns.
        Each cell shows revenue and units sold, with totals in the bottom row)
    </caption>
    <!-- ... table content ... -->
</table>

<!-- Table with direct content -->
<table>
    Content without rows or cells
</table>

<!-- Table with only divs -->
<table>
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 2, Cell 1</div>
    <div>Row 2, Cell 2</div>
</table>

<!-- Table with paragraphs -->
<table>
    <p>Header 1</p>
    <p>Header 2</p>
    <p>Data 1</p>
    <p>Data 2</p>
</table>

<!-- Simple table with proper markup -->
<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

<!-- Table with headers and data cells -->
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

<!-- Table with thead and tbody -->
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

<!-- Table without headers -->
<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>Widget</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Headers using regular cells -->
<table>
    <tr>
        <td><strong>Name</strong></td>
        <td><strong>Position</strong></td>
    </tr>
    <tr>
        <td>John Smith</td>
        <td>Developer</td>
    </tr>
</table>

<!-- Simple table with column headers -->
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget</td>
        <td>$10.00</td>
    </tr>
</table>

<!-- Table with row and column headers -->
<table>
    <tr>
        <th scope="col">Quarter</th>
        <th scope="col">Revenue</th>
        <th scope="col">Growth</th>
    </tr>
    <tr>
        <th scope="row">Q1</th>
        <td>$10,000</td>
        <td>5%</td>
    </tr>
    <tr>
        <th scope="row">Q2</th>
        <td>$15,000</td>
        <td>50%</td>
    </tr>
</table>

<!-- Complex table with multiple header levels -->
<table>
    <thead>
        <tr>
            <th rowspan="2">Product</th>
            <th colspan="2">2023</th>
            <th colspan="2">2024</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q1</th>
            <th>Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Widget A</th>
            <td>100</td>
            <td>150</td>
            <td>200</td>
            <td>250</td>
        </tr>
    </tbody>
</table>