Search code examples
google-search-console

How to make the Google search bar not use "table"


A site I'm working on uses google's programmable search engine.

Google's html uses a <table> tag to encapsulate their search bar.

This creates the following error in Wave accessibility evaluation tool

Alerts

Layout table

What It Means

A layout table is present.

Why It Matters

Layout tables exist merely to position content visually - to create columns, insert spacing, or align content neatly for sighted users. Their content is not at all tabular in nature. Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e., announcing column and row numbers), especially if they contain table header () cells. This introduces significant overhead on screen reader users.

How to Fix It

In almost every case, layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data, provide appropriate header () cells. If the layout table remains, verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role="presentation" to ensure it is not identified as a table to screen reader users.

The Algorithm... in English

A element is present that does not contain any header () cells.

Standards and Guidelines

1.3.1 Info and Relationships (Level A)

1.3.2 Meaningful Sequence (Level A)

...

I made a jsfiddle demonstrating the issue:

https://jsfiddle.net/18zk2tuc/

<script async src="https://cse.google.com/cse.js?cx=517544a62690b41fb">
</script>
<div class="gcse-search"></div>

As the error says, semantically google's search bar is not a table. Is there a way to make google's programmable search engine not use <table> and allow me to use flex or something instead?


Solution

  • You can simply ignore the error message from the Wave tool, because the tables used by Google have the role="presentation" attribute, which removes all semantics from the table element.

    From mdn:

    If presentation or none is applied to a <table> element, the descendant <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements inherit the role and are thus not exposed to assistive technologies. But, elements inside of the <th> and <td> elements, including nested tables, are exposed to assistive technologies.