Skip to content

Table Has Headers Check Should Ignore Tables with a presentation role #1340

@amberhinds

Description

@amberhinds

Currently, Missing Table headers will get flagged on tables that have a presentation role. Example: https://ce.iowalakes.edu/ce_program/dental-testing/

Screenshot of error in example code below
<table class="contact_card_one" role="presentation">
    <tbody><tr>
        <td width="50%"><div class="imagesize">
	<a href="https://ce.iowalakes.edu/directory/chantel-teeter/" title="Chantel Teeter"><img width="500" height="500" src="https://ce.iowalakes.edu/wp-content/uploads/2022/01/Teeter_Chantel_2024-scaled-1-500x500.jpg" class=" wp-post-image" alt="Chantel Teeter" itemprop="image" decoding="async" loading="lazy" srcset="https://ce.iowalakes.edu/wp-content/uploads/2022/01/Teeter_Chantel_2024-scaled-1-500x500.jpg 500w, https://ce.iowalakes.edu/wp-content/uploads/2022/01/Teeter_Chantel_2024-scaled-1-150x150.jpg 150w" sizes="auto, (max-width: 500px) 100vw, 500px"></a></div>
</td>
<td><div class="fl-post-text" style="">
    <h2 class="fl-post-title"><a href="https://ce.iowalakes.edu/directory/chantel-teeter/" title="Chantel Teeter">Chantel Teeter</a></h2>
<div class="title">
    Director of Allied Health Workforce Education
<br>
    	Emmetsburg Campus<br><br>
    </div>

    <div class="fl-post-meta">
    	712-852-5227 <br>
    cteeter@iowalakes.edu<br>
    
    </div>

    <div class="fl-post-icons">
    	<a href="mailto:cteeter@iowalakes.edu" aria-label="Click to email this contact"><i class="fas fa-envelope" aria-hidden="true"></i></a> 
    	<a href="tel:712-852-5227 " aria-label="Click to call this contact"><i class="fas fa-phone" aria-hidden="true"></i></a> 
     
      
    </div>

    <div class="fl-post-more-link">
    	<a href="https://ce.iowalakes.edu/directory/chantel-teeter/" title="See More">See More</a>
    </div></div>
</td></tr></tbody></table>

Tables with a presentation role are not treated as tables by screen readers; as a result, headers are not necessary. Obviously, it's better not to use tables for layout, but if they are and have been given a presentation role, we probably should not flag missing headers.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions