← Back to summary

https://prod.masshousing.com/create-and-preserve-housing/ PASS

Score: 100/100 • Errors: 0 • Warnings: 2 • Notices: 0
Tests Passed: 29/31 • Response Time: 4063ms
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

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: 3
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">
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0
Fix all of the following: ARIA attribute element ID does not exist on the page: aria-labelledby="mh-tabs-tab-block_a0fdab52b94eb6662b01d386ec2e9f8a-0"
HTML snippet
<div class="mh-tabs__panel" role="tabpanel" id="mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0" aria-labelledby="mh-tabs-tab-block_a0fdab52b94eb6662b01d386ec2e9f8a-0" x-show="activeIndex === 0">
color-contrast serious
Elements must meet minimum color contrast ratio thresholds
Manual review required to confirm this issue.
Learn more
nodes: 35
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]">Create and Preserve Housing</h1>
target .mh-section--bg-beige-gradient > .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">How Can We Help You?</h2>
target .mh-section--bg-beige-gradient > .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">Whether you're building or preserving deeply affordable or mixed-income rental or for-sale housing, you've come to the right place.</p>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-heading
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="mh-tabs__panel-heading whitespace-pre-line">Financing New Rental Housing</h3>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-text > p:nth-child(1)
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p>Construction, permanent, bridge, and conduit financing for developers of new market-driven rental housing in Massachusetts. Learn more about financing for new rental housing.&nbsp;<a href="#">Learn more about financing for new rental housing</a></p>
target p:nth-child(1) > a[href="#"]
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<a href="#">Learn more about financing for new rental housing</a>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-text > p:nth-child(3)
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-text > p:nth-child(3) > strong
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<strong>Featured programs</strong>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-text > p:nth-child(3) > a:nth-child(2)
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<a href="https://live-mass-housing.pantheonsite.io/create-and-preserve-housing/finance-homeownership/ahtf/">Affordable Housing Trust Fund</a>
target #mh-tabs-panel-block_a0fdab52b94eb6662b01d386ec2e9f8a-0 > .mh-tabs__panel-body > .mh-tabs__panel-text > p:nth-child(3) > a:nth-child(3)
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<a href="https://live-mass-housing.pantheonsite.io/create-and-preserve-housing/finance-homeownership/bild/">BILD</a>
target p:nth-child(3) > a:nth-child(4)
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<a href="https://live-mass-housing.pantheonsite.io/create-and-preserve-housing/finance-homeownership/workforce-housing/">Workforce Housing Initiative</a>
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 article: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">Developer Library</h3>
target article: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">Forms, documents and other resources to help you research, apply for and obtain multifamily financing from MassHousing. Visit the Document Library.</div>
target article:nth-child(1) > .mh-simple-card__ctas.mh-card-ctas.mt-auto > .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">
				Visit the Developer Library⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target article: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">Rental Business Portal</h3>
target article: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">A secure, online portal for MassHousing’s multifamily partners.</div>
target article:nth-child(2) > .mh-simple-card__ctas.mh-card-ctas.mt-auto > .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">
				Visit the Rental Business Portal.⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target article: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">Grant Programs</h3>
target article: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">Grant opportunities to support the local housing initiatives of municipalities, community organizations and housing providers. View grant opportunities.</div>
target article:nth-child(3) > .mh-simple-card__ctas.mh-card-ctas.mt-auto > .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 Grant Opportunities⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target article: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">Planning and Technical Assistance</h3>
target article: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">Grants, technical assistance and other support to help communities meet local housing goals. </div>
target article:nth-child(4) > .mh-simple-card__ctas.mh-card-ctas.mt-auto > .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 planning and technical assistance programs⁠<span class="mh-secondary-link__tail"><span class="mh-secondary-link__icon notranslate" aria-hidden="true" translate="no"></span></span>			</span>
target #mh-highlights-heading-block_9f4e75983722c4467992af4c506c7209
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h2 id="mh-highlights-heading-block_9f4e75983722c4467992af4c506c7209" class="mh-highlights-section__title">What We've Financed</h2>
target .mh-highlights-section__card-wrap:nth-child(1) > .mh-teaser-card--large.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="mh-teaser-card__title">Evan Dupree</h3>
target .mh-highlights-section__card-wrap:nth-child(1) > .mh-teaser-card--large.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__program-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-teaser-card__program-line">Homeownership, Operation Welcome Home</p>
target .mh-highlights-section__card-wrap:nth-child(2) > .mh-teaser-card--small.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="mh-teaser-card__title">Glenda’s Homebuying Story</h3>
target .mh-highlights-section__card-wrap:nth-child(2) > .mh-teaser-card--small.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__program-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-teaser-card__program-line">Down Payment Assistance, Homeownership</p>
target .mh-highlights-section__card-wrap:nth-child(1) > .mh-teaser-card--small.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="mh-teaser-card__title">Western Mass. Homeowner Looks to ESHLP for Home Energy Improvements</h3>
target .mh-highlights-section__card-wrap:nth-child(1) > .mh-teaser-card--small.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__program-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-teaser-card__program-line">Homeownership, Mass. Community Climate Bank</p>
target .mh-highlights-section__card-wrap:nth-child(2) > .mh-teaser-card--large.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__title
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<h3 class="mh-teaser-card__title">Renter Success Story: Nayomi Dowman</h3>
target .mh-highlights-section__card-wrap:nth-child(2) > .mh-teaser-card--large.mh-teaser-card.mh-teaser-card--featured > .mh-teaser-card__media-stack > .mh-teaser-card__overlay > .mh-teaser-card__program-line
Fix any of the following: Element's background color could not be determined due to a background gradient
HTML snippet
<p class="mh-teaser-card__program-line">Multifamily, Renter Stories</p>
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">Questions?</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">To learn more about our financing programs and to discuss your housing project, contact MassHousing today!</p>