Page Scan Results:

Sustainability

https://www.ou.edu/sustainability Scanned Sep. 17, 2023 at 8:38 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

<li> elements must be contained in a <ul> or <ol>: 10
<ul> and <ol> must only directly contain <li>, <script> or <template> elements: 2
Elements must only use permitted ARIA attributes: 1
Elements must meet minimum color contrast ratio thresholds: 1
Images must have alternate text: 1

Known Issues on This Page

<li> elements must be contained in a <ul> or <ol>

serious

Ensures <li> elements are used semantically. Axe Reference

Rule type: WCAG 2.0 A, WCAG SC 1.3.1, EN-301-549, EN-9.1.3.1

```
<li><a href="/marcomm/accessstatement.html">Accessibility</a></li>
```
Element selector:
.first > li:nth-child(1)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="http://www.ou.edu/sustainability.html">Sustainability</a></li>
```
Element selector:
.first > li:nth-child(2)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="http://ouhsc.edu/hipaa/">HIPAA</a></li>
```
Element selector:
.first > li:nth-child(3)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="http://hr.ou.edu/jobs/">OU Job Search</a></li>
```
Element selector:
.first > li:nth-child(4)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="https://ou.edu/accreditation">Accreditation</a></li>
```
Element selector:
.first > li:nth-child(5)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="/resources/policies.html">Policies</a></li>
```
Element selector:
.last > li:nth-child(1)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="/resources/legal-notices.html">Legal Notices</a></li>
```
Element selector:
.last > li:nth-child(2)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="/marcomm/copyright.html">Copyright</a></li>
```
Element selector:
.last > li:nth-child(3)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="/resources/colleges-and-departments.html">Resources &amp; Offices</a></li>
```
Element selector:
.last > li:nth-child(4)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element
```
<li><a href="https://ouregents.ethicspoint.com">OU Report It!</a></li>
```
Element selector:
.last > li:nth-child(5)
Failing checks (At least one of these should pass)
- List item does not have a <ul>, <ol> parent element

<ul> and <ol> must only directly contain <li>, <script> or <template> elements

serious

Ensures that lists are structured correctly. Axe Reference

Rule type: WCAG 2.0 A, WCAG SC 1.3.1, EN-301-549, EN-9.1.3.1

```
<ol class="carousel-indicators" aria-label="featured stories">
```
Element selector:
ol
Failing checks (All of these should pass)
- List element has direct children that are not allowed: [role=presentation] li[data-slide-to="0"] li[data-slide-to="1"] li[data-slide-to="2"]
```
<ul class="2columns unstyled">
```
Element selector:
.\32 columns
Failing checks (All of these should pass)
- List element has direct children that are not allowed: div, br .first .last .\32 columns > br

Elements must only use permitted ARIA attributes

serious

Ensures ARIA attributes are not prohibited for an element's role. Axe Reference

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

```
<div class="carousel-image" aria-label="Image">
<img src="/content/dam/sustainability/Images/feature/sustainability-3.jpg">
</div>
```
Element selector:
.active.item.webcomm-carousel-item > .carousel-image[aria-label="Image"]
Failing checks (All of these should pass)
- aria-label attribute cannot be used on a div with no valid role attribute.

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 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.5 (foreground color: #bfbfbf, background color: #e8e8e8, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1 .cc-btn

Images must have alternate text

critical

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

Rule type: WCAG 2.0 A, WCAG SC 1.1.1, Old Section 508, EN-301-549, EN-9.1.1.1, ACT

```
<img src="/content/dam/sustainability/Images/feature/sustainability-3.jpg">
```
Element selector:
.active.item.webcomm-carousel-item > .carousel-image[aria-label="Image"] > 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"

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: 35
Links must be distinguishable without relying on color: 1

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

```
<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

<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's background color could not be determined because it's partially obscured by another element .cc-window ul > li:nth-child(4) > a

```
<a href="/sustainability.html">Home</a>
```
Element selector:
li:nth-child(1) > a[href$="sustainability.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/campus-efforts.html">Campus Efforts</a>
```
Element selector:
#main_navigation > ul > li:nth-child(2) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/sustainability-map.html">Sustainability Map</a>
```
Element selector:
#main_navigation > ul > li:nth-child(3) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/academics-and-research.html">Academics and Research</a>
```
Element selector:
ul > li:nth-child(4) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/ecc.html">Environmental Concerns Committee</a>
```
Element selector:
a[href$="ecc.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/get-involved.html">Get Involved</a>
```
Element selector:
li:nth-child(6) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a href="/sustainability/contact-us.html">Contact Us</a>
```
Element selector:
li:nth-child(7) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<span>Make Your Commitment Today</span>
```
Element selector:
.bootstrap-c0.span6.parsys_column > .text.parbase.section > div > .well > p:nth-child(3) > .ou-btn > span
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<h3 class="h3update">Environmental Excellence</h3>
```
Element selector:
.bootstrap-c1.span6.parsys_column > .text.parbase.section > div > .well > h3
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<p>
```
Element selector:
.bootstrap-c1.span6.parsys_column > .text.parbase.section > div > .well > p:nth-child(2)
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it partially overlaps other elements
```
<span>More Information</span>
```
Element selector:
.bootstrap-c1.span6.parsys_column > .text.parbase.section > div > .well > p:nth-child(3) > .ou-btn > span
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<span>EPA’s Green Power Partnership</span>
```
Element selector:
.bootstrap-c0.parsys_column.span4 > .text.parbase.section > div > .well > p:nth-child(3) > .ou-btn > span
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<span>Green Guide</span>
```
Element selector:
.bootstrap-c1.parsys_column.span4 > .text.parbase.section > div > .well > p:nth-child(3) > .ou-btn > span
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<h3 class="h3update">Bicycle Friendly University</h3>
```
Element selector:
.bootstrap-c2 > .text.parbase.section > div > .well > h3
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<p>
```
Element selector:
.bootstrap-c2 > .text.parbase.section > div > .well > p:nth-child(2)
Failing checks (At least one of these should pass)
- Element's background color could not be determined because it partially overlaps other elements
```
<a href="http://www.bikeleague.org/university">Bicycle Friendly University Programs.</a>
```
Element selector:
p:nth-child(2) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<a class="ou-btn" href="http://www.ou.edu/bike">ou.edu/bike</a>
```
Element selector:
a[href$="bike"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a pseudo element #main > .container-fluid
```
<div class="footeraddress"><a href="/sustainability.html">Office of Sustainability</a><br>660 Parrington Oval<br>
Norman, OK 73019</div>
```
Element selector:
.footeraddress
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/sustainability.html">Office of Sustainability</a>
```
Element selector:
.footeraddress > a[href$="sustainability.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/marcomm/accessstatement.html">Accessibility</a>
```
Element selector:
a[href$="accessstatement.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="http://www.ou.edu/sustainability.html">Sustainability</a>
```
Element selector:
.first > li:nth-child(2) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="http://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 due to a background image #footer
```
<a href="http://hr.ou.edu/jobs/">OU Job Search</a>
```
Element selector:
a[href$="jobs/"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="https://ou.edu/accreditation">Accreditation</a>
```
Element selector:
a[href$="accreditation"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/resources/policies.html">Policies</a>
```
Element selector:
a[href$="policies.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/resources/legal-notices.html">Legal Notices</a>
```
Element selector:
a[href$="legal-notices.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/marcomm/copyright.html">Copyright</a>
```
Element selector:
a[href$="copyright.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="/resources/colleges-and-departments.html">Resources &amp; Offices</a>
```
Element selector:
.last > li:nth-child(4) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="https://ouregents.ethicspoint.com">OU Report It!</a>
```
Element selector:
.last > li:nth-child(5) > a
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<p class="byline">Sustainability Social Media</p>
```
Element selector:
.byline
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer

<div class="footerBottom span12">
<div><div>

</div>


</div>
Updated 6/2/2023 by <a href="/sustainability.html">Office of Sustainability</a>: <a href="mailto:sustainability@ou.edu">sustainability@ou.edu</a>
</div>

Element selector:

.footerBottom

Failing checks (At least one of these should pass)

Element's background color could not be determined due to a background image #footer

```
<a href="/sustainability.html">Office of Sustainability</a>
```
Element selector:
.footerBottom > a[href$="sustainability.html"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer
```
<a href="mailto:sustainability@ou.edu">sustainability@ou.edu</a>
```
Element selector:
a[href="mailto:sustainability@ou.edu"]
Failing checks (At least one of these should pass)
- Element's background color could not be determined due to a background image #footer

Links must be distinguishable without relying on color

serious

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

Rule type: WCAG 2.0 A, WCAG SC 1.4.1, EN-301-549, EN-9.1.4.1

```
<a href="http://www.bikeleague.org/university">Bicycle Friendly University Programs.</a>
```
Element selector:
p:nth-child(2) > a
Failing checks (At least one of these should pass)
- Element's foreground contrast ratio could not be determined .bootstrap-c2 > .text.parbase.section > div > .well > p:nth-child(2)

Page Scan Results: Sustainability

Known Issues Summary

Known Issues on This Page

<li> elements must be contained in a <ul> or <ol>

<ul> and <ol> must only directly contain <li>, <script> or <template> elements

Elements must only use permitted ARIA attributes

Elements must meet minimum color contrast ratio thresholds

Images must have alternate text

Needs Review Summary

Needs Review on This Page

Elements must meet minimum color contrast ratio thresholds

Links must be distinguishable without relying on color

Page Scan Results:

Sustainability