Clear-Cut Accessibility Benchmarks

Page Scan Results:

HPTC Career Programs

https://www.hptc.edu/career-programs Scanned Sep. 17, 2023 at 9:03 PM

Known Issues - These "violations" have been flagged as problematic by Axe, our accessibility scanner. Axe's "no false positives" philosophy means that if it's shown here, it's likely a problem to someone.

Known Issues Summary

Frames must have an accessible name: 1

Known Issues on This Page

Frames must have an accessible name

serious

Ensures <iframe> and <frame> elements have an accessible name. Axe Reference

Rule type: WCAG 2.0 A, WCAG SC 4.1.2, Old Section 508, EN-301-549, EN-9.4.1.2

```
<iframe src="https://www.youtube.com/embed/WjMkTZWuwd4?wmode=opaque&amp;enablejsapi=1" height="480" width="854" scrolling="no" frameborder="0" allowfullscreen="" id="yui_3_17_2_1_1694984582529_81" data-gtm-yt-inspected-6="true"></iframe>
```
Element selector:
#yui_3_17_2_1_1694984582529_81
Failing checks (At least one of these should pass)
- Element has no title attribute
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element's default semantics were not overridden with role="none" or role="presentation"

Needs Review - These "incomplete" issues may be problematic, but couldn't be completely tested automatically. They should be reviewed by a real person.

Needs Review Summary

Elements must meet minimum color contrast ratio thresholds: 9

Needs Review on This Page

Elements must meet minimum color contrast ratio thresholds

serious

Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. Axe Reference

Rule type: WCAG 2.0 AA, WCAG SC 1.4.3, EN-301-549, EN-9.1.4.3, ACT

<a class="header-nav-folder-title preScale scaleIn" href="/about" tabindex="-1" data-animation-role="header-element" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0117647s;">
About
</a>

Element selector:

.header-nav-folder-title.scaleIn[href$="about"]

Failing checks (At least one of these should pass)

Element's background color could not be determined because it is overlapped by another element

<a class="header-nav-folder-title preScale scaleIn" href="/information-for-students" tabindex="-1" data-animation-role="header-element" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0176471s;">
Information for Students
</a>

Element selector:

.header-nav-folder-title.scaleIn[href$="information-for-students"]

Failing checks (At least one of these should pass)

Element's background color could not be determined because it is overlapped by another element

<a href="/career-programs" data-animation-role="header-element" aria-current="page" class="preScale scaleIn" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0235294s;">
Career Programs
</a>

Element selector:

.scaleIn[href$="career-programs"][aria-current="page"]

Failing checks (At least one of these should pass)

Element's background color could not be determined because it is overlapped by another element

```
<a href="/short-term-programs" data-animation-role="header-element" class="preScale scaleIn" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0294118s;">
Short Term Programs
</a>
```
Element selector:
.scaleIn[href$="short-term-programs"][data-animation-role="header-element"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it is overlapped by another element

<a class="header-nav-folder-title preScale scaleIn" href="/business-industry" tabindex="-1" data-animation-role="header-element" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0352941s;">
Business &amp; Industry
</a>

Element selector:

.header-nav-folder-title.scaleIn[href$="business-industry"]

Failing checks (At least one of these should pass)

Element's background color could not be determined because it is overlapped by another element

<a class="header-nav-folder-title preScale scaleIn" href="/contact-us" tabindex="-1" data-animation-role="header-element" style="transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.0411765s;">
Contact Us
</a>

Element selector:

.header-nav-folder-title.scaleIn[href$="contact-us"]

Failing checks (At least one of these should pass)

Element's background color could not be determined because it is overlapped by another element

```
<span class="sqsrte-text-color--darkAccent">HPTC Career Programs</span>
```
Element selector:
.sqsrte-text-color--darkAccent
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it is overlapped by another element
```
<strong>Start your future at HPTC.</strong>
```
Element selector:
strong
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it is overlapped by another element
```
<a href="https://hptc.axstudent.com#/categories" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element" data-initialized="true">
```
Element selector:
.sqs-block-button-element--large
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it is overlapped by another element