3

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>
jEremyB
  • 1,736
  • 12
  • 15

3 Answers3

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
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

Lan
  • 709
  • 1
  • 8
  • 16
  • 1
    I believe this answer is correct - unfortunately the tester still failed it. He's stating that unless the screen reader actually reads it out loud then it's non compliant. As an aside, do you know of a way to force a screen reader (ie JAWS) to read something out loud? This would be necessary if the user had no vision and not just low vision. – jEremyB Nov 05 '13 at 20:20
  • Which 508 guideline you are referring to? Note that 508 guidelines are quite distinct from W3C recommendations (though they share some principles with them, especially WCAG). – Jukka K. Korpela Nov 05 '13 at 21:22
  • 1
    This does not answer the question. Surely using `mark` instead of `em` *reduces* accessibility, since it is less widely supported. And it is definitely not meant to be a general element for highlighting. Moreover, this has no apparent connection to 508 rules. – Jukka K. Korpela Nov 05 '13 at 21:23
  • The intent of , as given in the ref, is to "represent a run of text in one document marked or highlighted". The other reference led me to 508 rule (c). The answer does require some reading but all the right info is there. The fact that mark will highlight text without using css was an improvement on using . The mark is less widely supported, but it works for the browsers I need to support. – jEremyB Nov 06 '13 at 03:11
0

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!

Lauren
  • 1