Skip to content

Commit 4bbaa4b

Browse files
clpetersonucfclpetersonucf
authored
Merge pull request #1624 from clpetersonucf/issue/1587-accessibility-statement
Accessibility statement (and a few post-Dark Mode style fixes too)
2 parents 22bb7bb + 8cc5f2f commit 4bbaa4b

File tree

8 files changed

+155
-39
lines changed

8 files changed

+155
-39
lines changed

‎src/components/help-accessibility.jsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React from 'react';
2+
3+
const HelpAccessibility = () => {
4+
5+
return (
6+
<>
7+
<section className='full-width'>
8+
<h2>Our Commitment to Accessibility</h2>
9+
<p>
10+
The UCF Center for Distributed Learning is committed to ensuring federal and institutional accessibility standards are met or exceeded with Materia
11+
and its ecosystem of widgets. As a product of UCF, Materia is obligated to adhere to UCF's <a href="https://policies.ucf.edu/documents/2-006.pdf" target="_blank">Digital Accessibility Policy.</a>
12+
</p>
13+
14+
<h3>Accessibility Standards and Compliance</h3>
15+
<p>
16+
Materia widgets are often highly interactive, gamified experiences that exceed the characteristics of traditional web documents.
17+
While we strive to ensure adherence to WCAG 2.0 AA standards wherever possible, certain widgets may not be fully capable of supporting those standards.
18+
Widgets are proactively labeled based on their level of support for two major elements of WCAG 2.0 AA standards compliance: keyboard navigation and screen reader support.
19+
20+
Materia and its widgets strive to adhere to the following accessibility guidelines:
21+
</p>
22+
<ul>
23+
<li>Web Content Accessibility Guidelines (WCAG) 2.0 Level AA</li>
24+
<li>Section 508 of the Rehabilitation Act</li>
25+
<li>Americans with Disabilities Act (ADA) digital accessibility requirements</li>
26+
</ul>
27+
</section>
28+
<section className='half-width'>
29+
<h3>Web Application Accessibility Features</h3>
30+
<ul>
31+
<li>Keyboard navigation support</li>
32+
<li>Screen reader compatibility</li>
33+
<li>Alternative text for images and graphics</li>
34+
<li>Consistent and predictable navigation</li>
35+
<li>Form input error identification and correction guidance</li>
36+
</ul>
37+
<h3>Supported Assistive Technologies</h3>
38+
<ul>
39+
<li>Screen readers (NVDA, JAWS, VoiceOver)</li>
40+
<li>Screen magnification tools</li>
41+
<li>Alternative input devices</li>
42+
<li>Speech-to-text and text-to-speech technologies</li>
43+
</ul>
44+
</section>
45+
<section className='half-width'>
46+
<h3>Widget Accessibility Specifications</h3>
47+
<ul>
48+
<li>Fully navigable using keyboard controls*</li>
49+
<li>Compatible with major assistive technologies*</li>
50+
<li>Clear and consistent interactive elements</li>
51+
<li>Semantic HTML structure</li>
52+
<li>Reasonable cognitive load for educational interactions</li>
53+
</ul>
54+
<span className='italic'>*Support may vary by widget. Refer to the accessibility description of each widget in the Widget Catalog.</span>
55+
<h3>Ongoing Accessibility Efforts</h3>
56+
<ul>
57+
<li>Regular accessibility testing</li>
58+
<li>Accessible design validation of new widgets as they are developed</li>
59+
<li>User feedback collection for continuous improvement</li>
60+
<li>Commitment to rapid remediation of identified accessibility barriers</li>
61+
</ul>
62+
</section>
63+
<section className='full-width'>
64+
<h3>Reporting Accessibility Issues</h3>
65+
<p>If you encounter any accessibility barriers or have suggestions for improvement, please contact us:</p>
66+
<dl>
67+
<dt>Email:</dt>
68+
<dd>ACCESSIBILITY EMAIL HERE</dd>
69+
<dt>Online:</dt>
70+
<dd>ACCESSIBILITY BARRIER REPORTING LINK</dd>
71+
</dl>
72+
<h3>Legal Compliance and Disclaimer</h3>
73+
<p>The UCF Center for Distributed Learning is dedicated to meeting or exceeding applicable accessibility standards. While we continuously work to improve our digital tools and services, we acknowledge that perfect accessibility is an ongoing journey.</p>
74+
</section>
75+
</>
76+
)
77+
}
78+
79+
export default HelpAccessibility

‎src/components/help-page.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ import Header from './header'
44
import HelpHome from './help-home'
55
import HelpForStudents from './help-for-students'
66
import HelpForInstructors from './help-for-instructors'
7+
import HelpAccessibility from './help-accessibility'
78

89
import './help-page.scss';
910

1011
const HelpPage = () => {
1112

12-
const [page, setPage] = useState(window.location.hash.match(/#(home|students|instructors){1}$/)?.[1])
13+
const [page, setPage] = useState(window.location.hash.match(/#(home|students|instructors|accessibility){1}$/)?.[1])
1314

1415
const listenToHashChange = () => {
15-
const match = window.location.hash.match(/#(home|students|instructors){1}$/)
16+
const match = window.location.hash.match(/#(home|students|instructors|accessibility){1}$/)
1617
if (match != null && match[1] != null) setPage(match[1])
1718
else setPage('home')
1819
}
@@ -33,6 +34,10 @@ const HelpPage = () => {
3334
case 'instructors':
3435
helpContentRender = <HelpForInstructors />
3536
break
37+
case 'accessibility':
38+
console.log('accessibility yes')
39+
helpContentRender = <HelpAccessibility />
40+
break
3641
default:
3742
helpContentRender = <HelpHome />
3843
}
@@ -49,6 +54,7 @@ const HelpPage = () => {
4954
<li><a href='#home'>Help Home</a></li>
5055
<li><a href='#students'>For Students</a></li>
5156
<li><a href='#instructors'>For Instructors</a></li>
57+
<li><a href='#accessibility'>Accessibility</a></li>
5258
</ul>
5359
</nav>
5460
<main>

‎src/components/help-page.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,19 @@
100100
font-size: 20px;
101101
}
102102

103+
ul {
104+
margin: 0.5em 0;
105+
padding-left: 1em;
106+
107+
li {
108+
line-height: 1.4em;
109+
}
110+
}
111+
112+
p {
113+
line-height: 1.4em;
114+
}
115+
103116
h3 {
104117
margin: 30px 0 0 0;
105118

‎src/components/homepage.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
.spotlight {
44

5+
font-weight: 400;
6+
57
.main_container {
68
position: relative;
79
// width: 100vw;
@@ -145,7 +147,7 @@
145147
margin: 0 auto;
146148
}
147149
div {
148-
font-weight: 300;
150+
font-weight: 400;
149151
font-size: 14px;
150152
color: #000;
151153

@@ -264,6 +266,7 @@
264266
line-height: 150%;
265267
font-weight: 300;
266268
font-size: 16px;
269+
font-weight: 400;
267270
text-align: center;
268271

269272
&.copyright {

‎src/components/my-widgets-export.jsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,18 @@ const MyWidgetsExport = ({onClose, inst, scores}) => {
107107

108108
const semesterOptionElements = scores.map((val, index) => (
109109
<li key={index}>
110-
<input type='checkbox'
111-
id={val.id}
112-
className='semester'
113-
name={val.id}
114-
disabled={scores.length === 1}
115-
checked={state.semesterOptions[index] || false} // makes sure it will never be null
116-
onChange={() => {semesterCheck(index)}}></input>
117-
<label htmlFor={val.id}>{val.year + ' ' + val.term}</label>
110+
<label className='checkbox-wrapper' htmlFor={val.id}>
111+
<input type='checkbox'
112+
id={val.id}
113+
className='semester'
114+
name={val.id}
115+
disabled={scores.length === 1}
116+
checked={state.semesterOptions[index] || false} // makes sure it will never be null
117+
onChange={() => {semesterCheck(index)}}></input>
118+
<span className='custom-checkbox'></span>
119+
{val.year + ' ' + val.term}
120+
</label>
121+
118122
</li>
119123
))
120124

@@ -172,11 +176,15 @@ const MyWidgetsExport = ({onClose, inst, scores}) => {
172176
</p>
173177
<ul>
174178
<li className={`${scores.length > 1 ? 'active' : ''}`}>
175-
<input type='checkbox'
176-
id='checkall'
177-
checked={state.checkAll}
178-
onChange={checkAllVals}/>
179-
<label htmlFor='checkall'> - Check all</label>
179+
<label className='checkbox-wrapper' htmlFor='checkall'>
180+
<input type='checkbox'
181+
id='checkall'
182+
checked={state.checkAll}
183+
onChange={checkAllVals}/>
184+
<span className='custom-checkbox'></span>
185+
- Check all
186+
</label>
187+
180188
</li>
181189
{ semesterOptionElements }
182190
</ul>

‎src/components/my-widgets-export.scss‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,18 @@
2222
}
2323

2424
.semester-btn {
25-
color: white;
26-
font-size: 0.9em;
2725
min-width: 75px;
28-
text-align: center;
29-
background-color: #f1824c;
3026
padding: 10px;
3127
margin-left: auto;
3228
cursor: pointer;
3329

30+
text-align: center;
31+
color: #fff;
32+
font-size: 0.9em;
33+
font-weight: 400;
34+
35+
background-color: #f1824c;
36+
3437
&:hover {
3538
text-decoration: underline;
3639
}
@@ -48,6 +51,7 @@
4851
display: flex;
4952
flex-direction: column;
5053
padding: 0 10px;
54+
font-weight: 400;
5155

5256
h3 {
5357
margin: 0 0 15px 0;
@@ -206,6 +210,7 @@
206210

207211
label {
208212
cursor: pointer;
213+
font-weight: 400;
209214
}
210215
}
211216

‎src/components/my-widgets-page.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -776,7 +776,7 @@
776776
.link {
777777
cursor: pointer;
778778
// color: #1778af;
779-
color: #91c8fc;
779+
color: #0093e7;
780780
// text-decoration: underline;
781781
font-weight: 400;
782782

@@ -786,11 +786,11 @@
786786
}
787787

788788
.play_link {
789-
width: 100%;
789+
width: calc(100% - 1em);
790790
margin: 0;
791791
height: 1.5em;
792792
font-size: 1.1em;
793-
padding-left: 3px;
793+
padding: 0.25em;
794794
cursor: text;
795795

796796
&::-ms-clear {
@@ -858,8 +858,8 @@
858858
margin: 0 10px;
859859
padding: 0 0 2px 0;
860860

861-
border-bottom: 1px #61a4e2 solid;
862-
color: #61a4e2;
861+
border-bottom: 1px #0093e7 solid;
862+
color: #0093e7;
863863

864864
font-size: 14px;
865865
font-weight: 700;
@@ -1175,16 +1175,16 @@
11751175
}
11761176

11771177
.link {
1178-
color: #61a4e2;
1178+
color: $color-link-dark;
11791179
}
11801180

11811181
.play_link {
11821182
background-color: $color-input-box-bg-dark;
11831183
border: solid 1px $color-input-box-border-dark;
1184-
color: #d8d8d8;
1184+
color: #fff;
11851185

11861186
&:disabled {
1187-
color: #ababab;
1187+
color: $gray;
11881188
}
11891189
}
11901190

@@ -1205,8 +1205,8 @@
12051205
}
12061206

12071207
div.link {
1208-
border-bottom: 1px #61a4e2 solid;
1209-
color: #61a4e2;
1208+
border-bottom: 1px $color-link-dark solid;
1209+
color: $color-link-dark;
12101210
}
12111211

12121212
// Shown when there are no widgets

‎src/components/my-widgets-scores.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -499,17 +499,20 @@
499499
}
500500

501501
.show-older-scores-button {
502-
border-radius: 2px;
503-
background: #f3f3f3;
504-
border: 1px solid #dbdbdb;
505502
display: inline-block;
506-
padding: 4px 10px 4px 10px;
507-
font-size: 10pt;
508-
text-decoration: underline;
509503
width: 654px;
510-
text-align: center;
511504
margin-top: 1em;
505+
padding: 4px 10px 4px 10px;
506+
507+
border-bottom: 1px solid #dbdbdb;
508+
509+
background: none;
510+
511+
font-size: 10pt;
512512
font-weight: bold;
513+
text-decoration: underline;
514+
text-align: center;
515+
513516
cursor: pointer;
514517

515518
&.hide {
@@ -873,8 +876,7 @@
873876
}
874877

875878
.show-older-scores-button {
876-
background: #4c4e58;
877-
border: 1px solid #181920;
879+
border-bottom: 1px solid $extremely-dark-gray;
878880
}
879881

880882
table.storage_table {

0 commit comments

Comments
 (0)