Search code examples
htmlcsssection508

How can highlighting be made 508 compliant?


How can I make highlighted text in a table 508 compliant? Currently I'm wrapping the text in an em tag and adding an aria label to draw attention to the fact it has a yellow background. Apparently this alternative markup isn't compliant because it's not being read by the screen reader.

<table style="border: solid 1px black;">
    <p>Search results for the term "will"</p>
    <thead>
        <th>first name</th>
        <th>last name</th>
        <th>occupation</th>
    </thead>
    <tbody>
        <tr>
            <td>Joe</td>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em>iams-Harver</td>
            <td>sales clerk</td>
        </tr>
        <tr>
            <td><em style="background-color: yellow; font-style: normal;" aria-label="highlighted search term">Will</em></td>
            <td>Stevens</td>
            <td>truck driver</td>
        </tr>
    </tbody>
</table>

Solution

  • It seems an accessibility issue:

    Section 508 accessibility guidelines

    Some people with low vision often turn off the styles. So remember when you put <em>, the browser sees a

    element represents stress emphasis of its contents. ref

    and the yellow style will not achieve his intention.

    Try <mark>.

    The HTML tag is used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context. ref

    If you want to follow this w3c standard, read this interesting article about possible false positives of 508 compliance