Page Scan Results:

Heartland Baptist Bible College

Ensures links have discernible text. Axe Reference

1. <a href="https://twitter.com/hbbc_okc" target="_blank">
   <i class="fab fa-twitter"></i><span class="sr">Twitter</span>
   </a>

   Element selector:

   li:nth-child(1) > a[href$="hbbc_okc"][target="_blank"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

2. <a href="https://www.facebook.com/HeartlandBaptistBibleCollege/" target="_blank">
   <i class="fab fa-facebook"></i> 
   <span class="sr">Facebook</span>
   </a>

   Element selector:

   .social-icons > li:nth-child(2) > a[target="_blank"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

3. <a href="http://instagram.com/hbbc_okc" target="_blank">
   <i class="fab fa-instagram"></i>
   <span class="sr">Instagram</span>
   </a>

   Element selector:

   li:nth-child(3) > a[href$="hbbc_okc"][target="_blank"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

4. <a href="https://www.youtube.com/c/HeartlandBaptistBibleCollege" target="_blank">
   <i class="fab fa-youtube"></i>
   <span class="sr">YouTube</span>
   </a>

   Element selector:

   li:nth-child(4) > a[target="_blank"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

5. <a href="#" class="navicon">
   <span class="navicon-bar"></span>
   <span class="navicon-bar"></span>
   <span class="navicon-bar"></span>
   </a>

   Element selector:

   .header-lower > .navicon[href="#"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

6. <a href="#" class="navicon float-right">
   <span class="navicon-bar"></span>
   <span class="navicon-bar"></span>
   <span class="navicon-bar"></span>
   </a>

   Element selector:

   .navicon.float-right[href="#"]
   Failing checks (At least one of these should pass)

   • Element does not have text that is visible to screen readers
   • 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 has no title attribute
   Failing checks (All of these should pass)

   • Element is in tab order and does not have accessible text

Ensures <img> elements have alternate text or a role of none or presentation. Axe Reference

1. <img src="https://heartlandbaptist.edu/wp-content/themes/heartland-bbc/images/logo@mobile.png">

   Element selector:

   .logo-mobile > a[href$="heartlandbaptist.edu/"] > img
   Failing checks (At least one of these should pass)

   • Element does not have an alt 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

2. <img src="https://heartlandbaptist.edu/wp-content/themes/heartland-bbc/images/campus.svg">

   Element selector:

   a[href$="visit-campus/"] > .col-img > img
   Failing checks (At least one of these should pass)

   • Element does not have an alt 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

3. <img src="https://heartlandbaptist.edu/wp-content/themes/heartland-bbc/images/email.svg">

   Element selector:

   a[href$="email-us/"] > .col-img > img
   Failing checks (At least one of these should pass)

   • Element does not have an alt 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

4. <img src="https://heartlandbaptist.edu/wp-content/themes/heartland-bbc/images/phone.svg">

   Element selector:

   .wrapper[href$="contact-us/"] > .col-img > img
   Failing checks (At least one of these should pass)

   • Element does not have an alt 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

5. <img src="https://heartlandbaptist.edu/wp-content/themes/heartland-bbc/images/apply.svg">

   Element selector:

   a[href$="apply-now/"] > .col-img > img
   Failing checks (At least one of these should pass)

   • Element does not have an alt 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

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

1. <a href="https://heartlandbaptist.edu/events/alumni-homecoming-week-4/">Alumni Homecoming Week 2023</a>

   Element selector:

   .em-item.em-event:nth-child(1) > .em-item-info > .em-item-name > a
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 2.88 (foreground color: #b68632, background color: #f1f1f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 .index-section-4

2. <a href="https://heartlandbaptist.edu/events/church-planting-conference-2024/">Church Planting Conference 2024</a>

   Element selector:

   .em-item.em-event:nth-child(2) > .em-item-info > .em-item-name > a
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 2.88 (foreground color: #b68632, background color: #f1f1f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 .index-section-4

3. <a href="https://heartlandbaptist.edu/events/college-days-2024/">College Days 2024</a>

   Element selector:

   .em-item.em-event:nth-child(3) > .em-item-info > .em-item-name > a
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 2.88 (foreground color: #b68632, background color: #f1f1f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 .index-section-4

4. <a href="https://heartlandbaptist.edu/events/graduation-preaching-conference-2024/">Graduation Preaching Conference 2024</a>

   Element selector:

   .em-item.em-event:nth-child(4) > .em-item-info > .em-item-name > a
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 2.88 (foreground color: #b68632, background color: #f1f1f2, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 .index-section-4

Ensures buttons have discernible text. Axe Reference

1. <button class="icon icon-search-mobile float-left"></button>

   Element selector:

   .icon-search-mobile
   Failing checks (At least one of these should pass)

   • Element does not have inner text that is visible to screen readers
   • 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 has no title attribute
   • Element's default semantics were not overridden with role="none" or role="presentation"

Ensures <li> elements are used semantically. Axe Reference

1. <li class="all-events-link"><a href="https://heartlandbaptist.edu/events-2/" title="view all">view all</a></li>

   Element selector:

   .all-events-link
   Failing checks (At least one of these should pass)

   • List item does not have a <ul>, <ol> parent element

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

1. <a href="https://heartlandbaptist.edu/" title="Heartland Baptist Bible College" alt="Heartland Baptist Bible College">

   Element selector:

   .logo-mobile > a[href$="heartlandbaptist.edu/"]
   Failing checks (At least one of these should pass)

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

2. <a class="btn btn-default" href="/pastors-ministries/support-hbbc">Give Now</a>

   Element selector:

   .search-wrap > .btn-default.btn:nth-child(1)
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a background gradient .search-wrap > .btn-default.btn:nth-child(1)

3. <a class="btn btn-default" href="/future-students/apply-now">Apply Now</a>

   Element selector:

   .search-wrap > .btn-default.btn[href$="apply-now"]
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a background gradient .search-wrap > .btn-default.btn[href$="apply-now"]

4. <input type="submit" id="searchsubmit" value="Search">

   Element selector:

   .search-block > .searchform[role="search"][action="https://heartlandbaptist.edu/"] > div > input[value="Search"][type="submit"]
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a background image .search-block > .searchform[role="search"][action="https://heartlandbaptist.edu/"] > div > input[value="Search"][type="submit"]

5. <a href="https://heartlandbaptist.edu/future-students/">Future Students</a>

   Element selector:

   #menu-item-6821 > a
   Failing checks (At least one of these should pass)

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

6. <a href="https://heartlandbaptist.edu/parents-guests/">Parents &amp; Guests</a>

   Element selector:

   #menu-item-6822 > a
   Failing checks (At least one of these should pass)

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

7. <a href="https://heartlandbaptist.edu/pastors-ministries/">Pastors &amp; Ministries</a>

   Element selector:

   #menu-item-6823 > a
   Failing checks (At least one of these should pass)

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

8. <a href="https://heartlandbaptist.edu/current-students/">Current Students</a>

   Element selector:

   #menu-item-6824 > a
   Failing checks (At least one of these should pass)

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

9. <a href="https://heartlandbaptist.edu/alumni/">Alumni</a>

   Element selector:

   #menu-item-6825 > a
   Failing checks (At least one of these should pass)

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

10. <h2>Welcome to Heartland Baptist Bible College</h2>

    Element selector:

    .hero-text > h2
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .hero-text .page-hero

11. <a href="/future-students/">Future<br> Students</a>

    Element selector:

    h4 > a[href$="future-students/"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .col-1.col.col-lg-2 > .col-heading

12. <p>Find excellence in ministry training.</p>

    Element selector:

    #text-4 > .textwidget > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .wrapper-1

13. <a href="/parents-guests/">Parents &amp;<br> Guests</a>

    Element selector:

    h4 > a[href$="parents-guests/"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .col-2.col.col-lg-2 > .col-heading

14. <p>Find a home away from home.</p>

    Element selector:

    #text-5 > .textwidget > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .wrapper-2

15. <a href="/pastors-ministries/">Pastors &amp; Ministries</a>

    Element selector:

    h4 > a[href$="pastors-ministries/"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .col-3.col.col-lg-2 > .col-heading

16. <p>Find local church resources and training.</p>

    Element selector:

    #text-6 > .textwidget > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .wrapper-3

17. <a href="/current-students/">Current Students</a>

    Element selector:

    h4 > a[href$="current-students/"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .col-4.col.col-lg-2 > .col-heading

18. <p>Find resources for current students.</p>

    Element selector:

    #text-7 > .textwidget > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because it partially overlaps other elements

19. <a href="/alumni/">Alumni</a>

    Element selector:

    h4 > a[href$="alumni/"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .col-5.col.col-lg-2 > .col-heading

20. <p>Find how to stay involved after graduation.</p>

    Element selector:

    #text-8 > .textwidget > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because it partially overlaps other elements

21. <h2 class="section-title">What Makes Heartland Unique?</h2>

    Element selector:

    .container:nth-child(2) > .section-title
    Failing checks (At least one of these should pass)

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

22. <h2 class="widget-title">It’s worth reading.</h2>

    Element selector:

    #text-9 > .widget-title
    Failing checks (At least one of these should pass)

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

23. <a href="future-students/about/distinctives/" class="btn btn-default">Learn More <span class="icon icon-arrow"></span></a>

    Element selector:

    .container:nth-child(2) > .btn-default.btn
    Failing checks (At least one of these should pass)

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

24. <h2 class="section-title">Blog</h2>

    Element selector:

    .index-section-2 > .container > .section-title
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .index-section-2

25. <a href="/blog" class="btn btn-default">Read now <span class="icon icon-arrow"></span></a>

    Element selector:

    a[href$="blog"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="blog"]

26. <span class="day">09</span>

    Element selector:

    .em-item.em-event:nth-child(1) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .day
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(1) > .em-item-image.has-placeholder > .em-item-image-placeholder

27. <span class="month">Oct</span>

    Element selector:

    .em-item.em-event:nth-child(1) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .month
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(1) > .em-item-image.has-placeholder > .em-item-image-placeholder

28. <span class="day">16</span>

    Element selector:

    .em-item.em-event:nth-child(2) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .day
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(2) > .em-item-image.has-placeholder > .em-item-image-placeholder

29. <span class="month">Jan</span>

    Element selector:

    .em-item.em-event:nth-child(2) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .month
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(2) > .em-item-image.has-placeholder > .em-item-image-placeholder

30. <span class="day">20</span>

    Element selector:

    .em-item.em-event:nth-child(3) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .day
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(3) > .em-item-image.has-placeholder > .em-item-image-placeholder

31. <span class="month">Mar</span>

    Element selector:

    .em-item.em-event:nth-child(3) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .month
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(3) > .em-item-image.has-placeholder > .em-item-image-placeholder

32. <span class="day">13</span>

    Element selector:

    .em-item.em-event:nth-child(4) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .day
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(4) > .em-item-image.has-placeholder > .em-item-image-placeholder

33. <span class="month">May</span>

    Element selector:

    .em-item.em-event:nth-child(4) > .em-item-image.has-placeholder > .em-item-image-placeholder > .date > .month
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .em-item.em-event:nth-child(4) > .em-item-image.has-placeholder > .em-item-image-placeholder

34. <a href="https://heartlandbaptist.edu/events-2/" title="view all">view all</a>

    Element selector:

    a[title="view all"]
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[title="view all"]

35. <h2 class="section-title">Connect With Us</h2>

    Element selector:

    .connect-section > .container > .section-title
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .connect-section

36. <h6>Visit The Campus</h6>

    Element selector:

    a[href$="visit-campus/"] > h6
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="visit-campus/"]

37. <h6>Email Us</h6>

    Element selector:

    a[href$="email-us/"] > h6
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="email-us/"]

38. <h6>Call Us</h6>

    Element selector:

    .wrapper[href$="contact-us/"] > h6
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .wrapper[href$="contact-us/"]

39. <h6>Social Media</h6>

    Element selector:

    .col-4.col.col-lg-2 > .wrapper > h6
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .connect-section > .container > .row > .col-4.col.col-lg-2 > .wrapper

40. <a href="https://twitter.com/hbbc_okc" class="icon icon-twitter-white">Twitter</a>

    Element selector:

    .icon-twitter-white
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .icon-twitter-white

41. <a href="https://www.facebook.com/HeartlandBaptistBibleCollege/" class="icon icon-facebook-white">Facebook</a>

    Element selector:

    .icon-facebook-white
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .icon-facebook-white

42. <a href="http://instagram.com/hbbc_okc" class="icon icon-instagram-white">Instagram</a>

    Element selector:

    .icon-instagram-white
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background image .icon-instagram-white

43. <h6>Apply Now</h6>

    Element selector:

    a[href$="apply-now/"] > h6
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="apply-now/"]

44. <div class="Prompt__PromptText">Hi there, have a question? Text us here.</div>

    Element selector:

    chat-widget,.Prompt__PromptText
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because it partially overlaps other elements

Ensures every id attribute value used in ARIA and in labels is unique. Axe Reference

1. <input type="text" value="" name="s" id="s" placeholder="Search">

   Element selector:

   input[placeholder="Search"]
   Failing checks (At least one of these should pass)

   • Document has multiple elements referenced with ARIA with the same id attribute: s .mobile-search > .searchform[role="search"][action="https://heartlandbaptist.edu/"] > div > input[name="s"][type="text"][value=""]