Massachusetts Life Sciences Center - Other Matters

The Massachusetts Life Sciences Center’s Website Contained Certain Accessibility Challenges.

Overview

The Massachusetts Life Sciences Center’s (MLSC’s) website contained the following accessibility challenges.

• The webpage element “Hear from the Heart of the Hub” caused a partial keyboard trap. During testing of Objective 3, it was noted that the element labeled as “popmake-21267” (alternative text name of “Hear from the Heart of the Hub”) would take initial focus when some webpages were loaded and place the focus on a sub-element, which was collapsed and hidden within the “popmake-21267” element. While the user could exit the element by pressing the Close button, the highlight color had poor color contrast (1.434:1) against the background color of the button, which would impact users who navigate sequentially through webpages.
• The button hover-over text color had poor contrast. During testing, it was noted that some buttons had a hover-over text color that would result in a poor color contrast against the background color of the button (2.484:1) when the user interacted with said buttons.
• A table heading was missing the <th> tag.³⁶ During testing, a table had improper formatting by having no designated <th> tags (which designate table header cells) when said table contained clear headers.

If MLSC’s website contains elements that do not have sufficient contrast between the highlight and background colors, then the user experience is negatively impacted by making it difficult to locate relevant information, such as the exit button. As a result of this lack of contrast, a pseudo-keyboard trap is formed. The presence of a keyboard trap means that users who have mobility issues, and therefore rely on keyboard navigation, may not be able to access certain features and content. Without properly labeled tables, users who rely on screen readers may get confused as to which column and row they are in because the screen reader cannot accurately communicate this information without the context proper labels would have provided.

Authoritative Guidance

The Web Accessibility Initiative’s WCAG 2.0 states,

[Success Criterion] 1.3.1 . . . Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. . . .

[Success Criterion] 1.4.1 . . . Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. . . .

[Success Criterion] 2.1.2 . . . If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

Reasons for Issue

MLSC management stated that the previous website vendor it employed had in its statement of work a clause that excluded any regulatory compliance, including specifically Americans with Disabilities Act compliance, when creating and updating MLSC’s website. As a result of this, MLSC’s website was designed with no accessibility requirements in mind. MLSC stated that it ended its work with that vendor upon its review of the statement of work and seeing that Americans with Disabilities Act–regulatory compliance was excluded. MLSC hired a new website vendor, which has been aiding MLSC with improving the accessibility of its website. 

Recommendations

1. MLSC should alter the webpage element “Hear From the Heart of the Hub” (popmake-21267) by either ensuring that the element does not take control when a webpage is loaded or by ensuring that the element is fully expanded when a webpage is loaded so that it is more apparent to users that the focus is set there. Either solution should also implement a different color outline that results in a color contrast of 3:1 or greater.
2. MLSC should alter the button styles on its website by either changing the highlight color, background color, or how the highlight color interacts with the button style, to ensure that a color contrast of 3:1 is achieved for all button styles.
3. MLSC should ensure that tables use proper programmatic formatting so that they can be interpreted by screen readers.

Auditee’s Response

MLSC began working with a new website accessibility vendor in 2024. All pages of the MLSC website have since been brought into compliance with all applicable state and federal accessibility laws and regulations. MLSC’s engagement with the website accessibility vendor is ongoing and includes regular meetings to ensure continued compliance.

MLSC and its vendor have already addressed or are working to address the recommendations set forth in “Other Matters,” including any webpage or table contrast issues.

Auditor’s Reply

Based on its response, MLSC has taken measures to address our concerns regarding this matter. As part of our post-audit review process, we will follow up on this matter in approximately six months.

36.    There are many ways to define a table in HTML. However, the most basic and standard way to define a table is by declaring three elements. The first is <td>, which defines the individual cell for a table. The second is <tr>, which defines all the cells that create a row. The third and last is <th>, which defines a header cell. Other benefits, aside from using proper formatting, include the following: <td> elements, by default, contain text and are left-aligned, while <th> elements, by default, are bolded and centered.

Date published:	June 12, 2025