← Back to summary

https://prod.masshousing.com/about-masshousing/ FAIL

Score: 94/100 • Errors: 1 • Warnings: 2 • Notices: 0
Tests Passed: 29/32 • Response Time: 4042ms
Target: WCAG 2.2 Level AA • Settle Delay: 2000ms • Audit Profile: wcag • Run Profile: desktop
Tags Used: wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22a, wcag22aa
Excluded Rules: none

Errors (1)

target-size serious
All touch targets must be 24px large, or leave sufficient space
Learn more
nodes: 3
target button[aria-label="Go to page 1"]
Fix any of the following: Target has insufficient size (11px by 11px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
HTML snippet
<button type="button" class="mh-carousel-cards__dot is-active" role="tab" aria-label="Go to page 1" aria-selected="true"></button>
target button[aria-label="Go to page 2"]
Fix any of the following: Target has insufficient size (11px by 11px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
HTML snippet
<button type="button" class="mh-carousel-cards__dot" role="tab" aria-label="Go to page 2" aria-selected="false"></button>
target button[aria-label="Go to page 3"]
Fix any of the following: Target has insufficient size (11px by 11px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 14px instead of at least 24px.
HTML snippet
<button type="button" class="mh-carousel-cards__dot" role="tab" aria-label="Go to page 3" aria-selected="false"></button>

Incomplete (manual review) (2)

aria-valid-attr-value critical
ARIA attributes must conform to valid values
Manual review required to confirm this issue.
Learn more
nodes: 2
target button[aria-controls="mh-translation-sign-in-menu"]
Fix all of the following: Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls="mh-translation-sign-in-menu"
HTML snippet
<button type="button" class="mh-translation-bar__..." aria-label="Log In" :aria-expanded="$store.signInMenu.op..." aria-controls="mh-translation-sign-..." aria-haspopup="dialog" @click="$store.translateMenu..." aria-expanded="false">
target button[aria-label="Translate"]
Fix all of the following: Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls="mh-translation-language-menu"
HTML snippet
<button type="button" class="mh-translation-bar__..." aria-label="Translate" :aria-expanded="$store.translateMenu..." aria-controls="mh-translation-langu..." aria-haspopup="listbox" @click="$store.signInMenu.op..." aria-expanded="false">
color-contrast serious
Elements must meet minimum color contrast ratio thresholds
Manual review required to confirm this issue.
Learn more
nodes: 36
target h1
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h1 class="mh-hero__title whitespace-pre-line w-full max-w-[700px]">About MassHousing</h1>
target .mh-section--bg-beige-gradient.mh-section--align-left.mh-section--vpad-normal:nth-child(4) > .mh-section__body > .mh-section__inner > .mh-section__header > .mh-section__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="mh-section__title whitespace-pre-line">Today's Housing Challenges</h2>
target .mh-section--bg-beige-gradient.mh-section--align-left.mh-section--vpad-normal:nth-child(4) > .mh-section__body > .mh-section__inner > .mh-section__header > .mh-section__description.whitespace-pre-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-section__description whitespace-pre-line">The housing challenges facing Massachusetts continue to evolve, as do MassHousing’s responses to them.</p>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(1) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__title
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-icon-card__title">Massachusetts Households are Cost-Burdened </h3>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(1) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__body
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-icon-card__body">
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(1) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__footer.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See MassHousing's Response⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(2) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__title
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-icon-card__title">Housing Vacancy is Chronically Low</h3>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(2) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__body
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-icon-card__body">Demand for housing has far outpaced supply. Decades of slow housing production has resulted in a vacancy rate of just 1.6% in Massachusetts. A healthy housing vacancy rate is 2.6%.</div>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(2) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__footer.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See MassHousing's Response⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(3) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__title
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-icon-card__title">Housing is too Expensive </h3>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(3) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__body
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-icon-card__body">Since 2000, the median home price in Massachusetts has increased 73%. Meanwhile, between 2010 and 2019, low- and moderate-income homebuyers accounted for less than 25% of home purchases.</div>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(3) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__footer.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See MassHousing's Response⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(4) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__title
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-icon-card__title">Our Housing Stock is Old and Inefficient </h3>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(4) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__body
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-icon-card__body">Massachusetts boasts some of the oldest housing in the nation. Roughly two-thirds of residential buildings in the Commonwealth were built before 1980 and have inefficient envelopes and systems, which in turn heightens the impact of unpredictable energy costs.</div>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(4) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__footer.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See MassHousing's Response⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(5) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__title
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-icon-card__title">Communities Have Unique Housing Needs and Opportunities </h3>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(5) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__text > .mh-icon-card__body
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-icon-card__body">Of the roughly 3 million residential structures in Massachusetts, 2.6 million contain 1-4 residential units. Cities and towns need creative solutions to the housing challenges facing their neighborhoods and residents.</div>
target .mh-icon-card.mh-icon-card--resource.mh-icon-card--linked:nth-child(5) > .mh-icon-card__stack > .mh-icon-card__content > .mh-icon-card__footer.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See MassHousing's Response⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-section--bg-primary-red > .mh-section__body > .mh-section__inner > .mh-section__header > .mh-section__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="mh-section__title whitespace-pre-line">Celebrating Our 60th Anniversary</h2>
target .mh-section--bg-primary-red > .mh-section__body > .mh-section__inner > .mh-section__header > .mh-section__description.whitespace-pre-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-section__description whitespace-pre-line">Celebrating 60 years of expanding access to affordable housing across Massachusetts</p>
target .wp-block-heading
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h2 class="wp-block-heading">Quick Links</h2>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(1) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__title.\!text-\[22px\].md\:\!text-\[26px\]
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-simple-card__title font-sans !text-[22px] md:!text-[26px] font-bold leading-tight text-text-heading">Leadership</h3>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(1) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__body.text-\[1\.25rem\].leading-normal
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-simple-card__body text-[1.25rem] font-sans leading-normal text-text-heading">The Members of MassHousing and our senior executives.</div>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(1) > .mh-simple-card__ctas.mt-auto.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				Meet our leadership team⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(2) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__title.\!text-\[22px\].md\:\!text-\[26px\]
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-simple-card__title font-sans !text-[22px] md:!text-[26px] font-bold leading-tight text-text-heading">Careers</h3>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(2) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__body.text-\[1\.25rem\].leading-normal
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-simple-card__body text-[1.25rem] font-sans leading-normal text-text-heading">Join our team of talented professionals.</div>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(2) > .mh-simple-card__ctas.mt-auto.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				View career opportunities⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(3) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__title.\!text-\[22px\].md\:\!text-\[26px\]
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-simple-card__title font-sans !text-[22px] md:!text-[26px] font-bold leading-tight text-text-heading">Financials</h3>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(3) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__body.text-\[1\.25rem\].leading-normal
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-simple-card__body text-[1.25rem] font-sans leading-normal text-text-heading">Annual reports, financial statements and other investor information.</div>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(3) > .mh-simple-card__ctas.mt-auto.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				View financial information⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(4) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__title.\!text-\[22px\].md\:\!text-\[26px\]
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-simple-card__title font-sans !text-[22px] md:!text-[26px] font-bold leading-tight text-text-heading">Information Security</h3>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(4) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__body.text-\[1\.25rem\].leading-normal
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-simple-card__body text-[1.25rem] font-sans leading-normal text-text-heading">Our commitment to safeguarding information in our possession.</div>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(4) > .mh-simple-card__ctas.mt-auto.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				See our information security policy⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(5) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__title.\!text-\[22px\].md\:\!text-\[26px\]
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<h3 class="mh-simple-card__title font-sans !text-[22px] md:!text-[26px] font-bold leading-tight text-text-heading">Public Records Access</h3>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(5) > .mh-simple-card__content.gap-4.flex-col > .mh-simple-card__body.text-\[1\.25rem\].leading-normal
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<div class="mh-simple-card__body text-[1.25rem] font-sans leading-normal text-text-heading">Information made available in accordance with Massachusetts’ Public Records Law.</div>
target .mh-simple-card.mh-simple-card--align-left.mh-simple-card--bg-white:nth-child(5) > .mh-simple-card__ctas.mt-auto.mh-card-ctas > .mh-secondary-link[rel="noopener noreferrer"][target="_blank"] > .mh-secondary-link__inner > .mh-secondary-link__label
Fix any of the following: Element's background color could not be determined due to a pseudo element
HTML snippet
<span class="mh-secondary-link__label">
				View documents⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>