WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Gauvreau, Jennifer (CGI Federal)
Date: May 17, 2016 9:39AM

Hi Andrew,

The problem Brandon described below is related to a known bug when the <caption> element is visually hidden off-screen with CSS. The bug is filed with NVDA (http://community.nvda-project.org/ticket/3813) and Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id™5888 and https://bugzilla.mozilla.org/show_bug.cgi?id01795) but the origin of the problem lies with Firefox and based on the Bugzilla bugs it hasn't been resolved yet.

As a workaround, move the "u-visually-hidden" class you're using to visually hide the caption out of the <caption> element and instead put it on a <span> element nested inside of the <caption>.

For example:
<table class="live-travel-board__table" aria-labelledby="LiveTravelBoadTitle">
<caption class="live-travel-board__caption">
<span class="u-visually-hidden">Live departures for
<span class="live-travel-board__title-station">Birmingham New Street</span>
</span>
</caption>
<thead class="live-travel-board__header">
<tr>...

Jennifer Gauvreau, CUA
Director, Consulting Services
Human Factors Practice
CGI
12601 Fair Lakes Circle, Fairfax, VA 22033
T: 703-227-6167
M: 571-606-4973
<EMAIL REMOVED>
CONFIDENTIALITY NOTICE: Proprietary/Confidential Information belonging to CGI Group Inc. and its affiliates may be contained in this message. If you are not a recipient indicated or intended in this message (or responsible for delivery of this message to such person), or you think for any reason that this message may have been addressed to you in error, you may not use or copy or deliver this message to anyone else. In such case, you should destroy this message and are asked to notify the sender by reply e-mail.