How can highlighting be made 508 compliant?

Question

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>

Answer 1

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

Answer 2

The table is 508 compliant as it is now. Section 508 rules mean, when considering web pages and web applications, a set of 16 rules in § 1194.22 of Section 508. None of the rules prohibits, for example, the use of markup that screen readers do not recognize. In fact, they may recognize em, but that’s irrelevant when considering conformance.

Rule (c) says: “Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.” You are using background color for em, but that’s OK, because the information that some words are somehow emphasized is in the markup, in the use of the em element. Whether some software actually recognizes that markup and conveys its meaning cannot be a criterion for conforming to a law that says nothing about that matter.

By setting font-style to normal, you override the common default rendering of em (italic typeface). This means that when color settings are disabled (e.g., via a user style sheet that makes everything black on white, to meet the needs of an individual), the em element appears as normal text. This can be characterized as violating the spirit of rule (b). But in conformance, it is the letter that matters, and the information is in the markup.

Answer 3

In a project I worked on recently, we wanted to visually distinguish between old data and newly updated data. We ended up using bold red text to "highlight" the edits that had been made. Since you cannot relay information to the user in only color or styling, we added "hidden" text in front of the form control if it was edited (done in the code behind using label visibility). We used CSS to "hide" this text offscreen for visual users.

When a user disables CSS, they no longer get the red bold text but the hidden text now appears. The hidden text is also read by a screen reader.

Example: Field edited by submitter First Name:

We have also used icons to alert a user to a change and added informative alt text like "First name field edited by submitter."

Hope that helps!