Page Scan Results:

The University of Oklahoma

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

1. <a aria-label="learn more about cookies" role="button" tabindex="0" class="cc-link" href="https://www.ou.edu/marcomm/web-policies/privacypolicy" rel="noopener noreferrer nofollow" target="_blank">Learn more</a>

   Element selector:

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

   • Element has insufficient color contrast of 1.07 (foreground color: #d7d7d7, background color: #d0d0d0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 .cc-window body

2. <a aria-label="dismiss cookie message" role="button" tabindex="0" class="cc-btn cc-dismiss">Close</a>

   Element selector:

   .cc-btn
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 1.54 (foreground color: #c5c5c5, background color: #f2f2f2, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1 .cc-btn

3. <div class="j-twitter-display-name">Univ. of Oklahoma</div>

   Element selector:

   li[data-id="474291335"] > .j-poster > a[target="_blank"]:nth-child(1) > .j-twitter-poster > .j-twitter-display-name
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1 li[data-id="474291335"] body

4. <a href="https://twitter.com/GibbsSooner" target="_blank">@GibbsSooner</a>

   Element selector:

   li[data-id="474291335"] > .j-text > .j-message > p > a[target="_blank"]:nth-child(1)
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1 li[data-id="474291335"] body

5. <time class="j-date j-twitter-date" datetime="2023-09-06T08:00:01.000-07:00">6 Sep 2023</time>

   Element selector:

   time[datetime="2023-09-06T08:00:01.000-07:00"]
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1 li[data-id="474291335"] body

6. <div class="j-twitter-display-name">Univ. of Oklahoma</div>

   Element selector:

   li[data-id="474258900"] > .j-poster > a[target="_blank"]:nth-child(1) > .j-twitter-poster > .j-twitter-display-name
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 1.48 (foreground color: #d4d4d4, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1 li[data-id="474258900"] body

7. <time class="j-date j-twitter-date" datetime="2023-09-05T11:00:22.000-07:00">5 Sep 2023</time>

   Element selector:

   time[datetime="2023-09-05T11:00:22.000-07:00"]
   Failing checks (At least one of these should pass)

   • Element has insufficient color contrast of 1.48 (foreground color: #d4d4d4, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1 li[data-id="474258900"] body

Ensures <li> elements are used semantically. Axe Reference

1. <li class="feed-item j-twitter j-twitter-bg image-post uofoklahoma j-sticky is-not-youTube" data-id="474291335" data-source="twitter" style="margin-bottom: 35px; zoom: 1; opacity: 0.603956;">

   Element selector:

   li[data-id="474291335"]
   Failing checks (At least one of these should pass)

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

2. <li class="feed-item j-twitter j-twitter-bg j-gallery uofoklahoma j-sticky is-not-youTube" data-id="474177819" data-source="twitter" style="margin-bottom: 35px; zoom: 1;">

   Element selector:

   li[data-id="474177819"]
   Failing checks (At least one of these should pass)

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

3. <li class="feed-item j-twitter j-twitter-bg image-post uofoklahoma j-sticky is-not-youTube" data-id="474258900" data-source="twitter" style="margin-bottom: 35px; zoom: 1; opacity: 0.218958;">

   Element selector:

   li[data-id="474258900"]
   Failing checks (At least one of these should pass)

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

4. <li class="feed-item j-twitter j-twitter-bg j-video uofoklahoma j-sticky is-not-youTube" data-id="474093127" data-source="twitter" style="margin-bottom: 35px; zoom: 1;">

   Element selector:

   .j-video
   Failing checks (At least one of these should pass)

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

5. <li class="feed-item j-twitter j-twitter-bg image-post uofoklahoma j-sticky is-not-youTube" data-id="474254546" data-source="twitter" style="margin-bottom: 35px; zoom: 1; opacity: 0;">

   Element selector:

   li[data-id="474254546"]
   Failing checks (At least one of these should pass)

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

6. <li class="feed-item j-twitter j-twitter-bg j-gallery uofoklahoma j-sticky is-not-youTube" data-id="474098668" data-source="twitter" style="margin-bottom: 35px; zoom: 1;">

   Element selector:

   li[data-id="474098668"]
   Failing checks (At least one of these should pass)

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

Ensures links have discernible text. Axe Reference

1. <a href="https://ou.edu">

   Element selector:

   .cmp-rd-header__logo-container > a[href$="ou.edu"]
   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="http://www.facebook.com/uofoklahoma"><i class="rd-btn__icon fa-brands fa-facebook"></i></a>

   Element selector:

   .rd-followus__header > div:nth-child(2) > a:nth-child(1)
   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="https://twitter.com/uofoklahoma"><i class="rd-btn__icon fa-brands fa-twitter"></i></a>

   Element selector:

   .rd-followus__header > div:nth-child(2) > a:nth-child(2)
   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.instagram.com/uofoklahoma/"><i class="rd-btn__icon fa-brands fa-instagram"></i></a>

   Element selector:

   .rd-followus__header > div:nth-child(2) > a:nth-child(3)
   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="https://www.youtube.com/universityofoklahoma"><i class="rd-btn__icon fa-brands fa-youtube"></i></a>

   Element selector:

   div:nth-child(2) > a:nth-child(4)
   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 that lists are structured correctly. Axe Reference

1. <ul class="juicer-feed j-initialized j-modern j-desktop modern colored-icons loaded" data-columns="3" data-feed-id="universityofoklahoma" data-gutter="35" data-per="6'" data-pages="1" data-origin="embed-code">

   Element selector:

   .juicer-feed
   Failing checks (All of these should pass)

   • List element has direct children that are not allowed: div, a .juicer-custom-styles .j-stacker-wrapper #clearst1pA :root

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

1. <span id="cookieconsent:desc" class="cc-message">

   Element selector:

   #cookieconsent\:desc
   Failing checks (At least one of these should pass)

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

2. <a class="skipnav" href="#startcontent" style="font: 0/0 a; text-shadow: none; color: transparent; position:absolute;height:1px;width:1px;">Skip Navigation</a>

   Element selector:

   .skipnav
   Failing checks (At least one of these should pass)

   • Element has a 1:1 contrast ratio with the background header

3. <h1 class="rd-title title h1 text-white">THERE’S ONLY <span class="rd-title--highlight">ONE</span></h1>

   Element selector:

   .rd-hero__content > h1
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a pseudo element .rd-hero

4. <span class="rd-title--highlight">ONE</span>

   Element selector:

   .rd-title--highlight
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a pseudo element .rd-hero

5. <h2 class="rd-slideshow__caption__title title text-light text-uppercase" data-cmp-hook-slideshow="captionTitle">ENDLESS POSSIBILITIES</h2>

   Element selector:

   .rd-slideshow__caption__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

6. <p class="rd-slideshow__caption__subtitle text-light" data-cmp-hook-slideshow="captionDescription">When you merge tremendous effort with humility, then infuse that with a healthy dose of resilience, the potential to make an impact is limitless.</p>

   Element selector:

   .rd-slideshow__caption__subtitle
   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. <span class="rd-link-icon__text text-white">Read More</span>

   Element selector:

   .rd-link-icon[href$="ouresearch"] > .rd-link-icon__text.text-white
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a pseudo element .responsivegrid.section:nth-child(8) > .section-image.rd-section

8. <span class="rd-link-icon__text text-white">Read More</span>

   Element selector:

   .rd-link-icon[href$="campuslife"] > .rd-link-icon__text.text-white
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a pseudo element .section-image.overflow-hidden.rd-section

9. <h4 class="rd-teaser__title">Norman</h4>

   Element selector:

   .rd-teaser[href$="about"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__title
   Failing checks (At least one of these should pass)

   • Element's background color could not be determined due to a background gradient .rd-teaser[href$="about"] > .rd-teaser__overlay

10. <p>The University of Oklahoma in Norman is the flagship university and research institution for the state of Oklahoma.</p>

    Element selector:

    .rd-teaser[href$="about"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__description > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .rd-teaser[href$="about"] > .rd-teaser__overlay

11. <h4 class="rd-teaser__title">Tulsa</h4>

    Element selector:

    a[href$="tulsa"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__title
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="tulsa"] > .rd-teaser__overlay

12. <p>The University of Oklahoma-Tulsa offers a wide range of 30+ undergraduate, Master’s, and Doctorate level degrees.</p>

    Element selector:

    a[href$="tulsa"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__description > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="tulsa"] > .rd-teaser__overlay

13. <h4 class="rd-teaser__title">Health Sciences Center</h4>

    Element selector:

    a[href$="ouhsc.edu"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__title
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="ouhsc.edu"] > .rd-teaser__overlay

14. <p>The University of Oklahoma’s Health Sciences Center boasts one of the few comprehensive academic campuses in the nation.</p>

    Element selector:

    a[href$="ouhsc.edu"] > .rd-teaser__content > .rd-teaser__interaction > .rd-teaser__description > p
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient a[href$="ouhsc.edu"] > .rd-teaser__overlay

15. <h2 class="rd-title title h1 text-white text-uppercase">Oklahoma</h2>

    Element selector:

    .text-white.text-uppercase
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because element contains an image node .rd-mask__vector--mobile

16. <p class="freight-text caption-bigger">

    Element selector:

    .freight-text.caption-bigger
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because element contains an image node .rd-mask__vector--mobile

17. <span>VISIT NORMAN</span>

    Element selector:

    a[href$="visitnorman.com"] > span
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because element contains an image node .rd-mask__vector--mobile

18. <span>EXPLORE OKC</span>

    Element selector:

    a[href$="visitokc.com"] > span
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because element contains an image node .rd-mask__vector--mobile

19. <span>EXPLORE TULSA</span>

    Element selector:

    a[href$="visittulsa.com"] > span
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined because element contains an image node .rd-mask__vector--mobile

20. <address class="col small">
    <a href="/content/web"> The University of Oklahoma </a>
    <br>
    660 Parrington Oval,<br>
    Norman, OK 73019-0390<br>
    (405) 325-0311
    </address>

    Element selector:

    address
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient address .footer

21. <a href="/content/web"> The University of Oklahoma </a>

    Element selector:

    address > a[href$="web"]
    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. <div class="footerBottom col-md-12 col-sm-12 border-top my-2 p-2 small">

    Element selector:

    .footerBottom
    Failing checks (At least one of these should pass)

    • Element's background color could not be determined due to a background gradient .footerBottom .footer

23. <a class="nav-link text-capitalize" href="https://www.ou.edu/marcomm/accessstatement">Accessibility</a>

    Element selector:

    .nav-item:nth-child(1) > .nav-link.text-capitalize
    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. <a class="nav-link text-capitalize" href="https://www.ou.edu/sustainability">Sustainability</a>

    Element selector:

    .nav-item:nth-child(2) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

25. <a class="nav-link text-capitalize" href="https://apps.ouhsc.edu/hipaa/">HIPAA</a>

    Element selector:

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

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

26. <a class="nav-link text-capitalize" href="https://jobs.ou.edu/">OU Job Search</a>

    Element selector:

    a[href$="jobs.ou.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

27. <a class="nav-link text-capitalize" href="https://www.ou.edu/web/landing/policy">Policies</a>

    Element selector:

    .nav-item:nth-child(5) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

28. <a class="nav-link text-capitalize" href="https://www.ou.edu/web/landing/legalnotices">Legal Notices</a>

    Element selector:

    .nav-item:nth-child(6) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

29. <a class="nav-link text-capitalize" href="https://www.ou.edu/marcomm/copyright">Copyright</a>

    Element selector:

    .nav-item:nth-child(7) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

30. <a class="nav-link text-capitalize" href="https://www.ou.edu/web/resources_offices">Resources and Offices</a>

    Element selector:

    .nav-item:nth-child(8) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

31. <a class="nav-link text-capitalize" href="https://ouregents.ethicspoint.com/">OU Report It!</a>

    Element selector:

    .nav-item:nth-child(9) > .nav-link.text-capitalize
    Failing checks (At least one of these should pass)

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

32. <a href="/content/web">The University of Oklahoma</a>

    Element selector:

    .footerBottom > a[href$="web"]
    Failing checks (At least one of these should pass)

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

33. <a href="mailto:marcomm@ou.edu">marcomm@ou.edu</a>

    Element selector:

    a[href$="mailto:marcomm@ou.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

Ensures <video> elements have captions. Axe Reference

1. <video class="rd-hero__vid" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" preload="preload">
   <source type="video/mp4" src="https://ou.edu/content/dam/theres-only-one/Longform_Web.mp4">
   <!-- 30Sec_Web.mp4" -->
   
   </video>

   Element selector:

   .rd-hero__vid
   Failing checks (All of these should pass)

   • Check that captions is available for the element

2. <video class="rd-mask__vid" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" preload="preload">
   <source src="https://www.ou.edu/content/dam/theres-only-one/oklahoma-web-video-coloring-book-edition.mp4" type="video/mp4">
   
   </video>

   Element selector:

   .rd-mask__vid
   Failing checks (All of these should pass)

   • Check that captions is available for the element

Ensure links are distinguished from surrounding text in a way that does not rely on color. Axe Reference

1. <a href="/content/news/articles/2023/september/ou-board-of-regents-approves-college-of-nursing-renovations-academic-appointments-and-more">
   
   <h3>OU Board of Regents Approves College of Nursing Renovations, Academic Appointments and More</h3>
   
   
   </a>

   Element selector:

   .card-text > a
   Failing checks (At least one of these should pass)

   • Element's contrast ratio could not be determined because of element overlap .card-text