7 |
8 | Under the heading that says "Web Server URL(s)" click the first link to preview
9 | the app on your local server.
10 |
11 | Take a look at the `scripts/main.js` file to figure out how the route is updated
12 | and to determine when you would need to step in and manage focus.
13 |
--------------------------------------------------------------------------------
/final-project/README.md:
--------------------------------------------------------------------------------
1 | # Final Project
2 |
3 | It's time to take the skills you've learned in this course and apply them to
4 | a real project. We've gone ahead and created a very fancy looking site but
5 | there are a number of accessibility issues that could be improved. Do your
6 | best to fix as many as you can and if you get stuck or need a hint you can
7 | check out the [answers file](ANSWERS.md) or the [full solution](https://github.com/udacity/ud891/tree/gh-pages/final-project/ecommerce-site/solution).
8 |
9 | Accessibility is one of those things that you can always improve upon so it's
10 | very possible you'll think up additions and solutions that even we didn't
11 | cover in our final version. Have fun with it and see if you can build an
12 | access that you think all of your users will love.
13 |
--------------------------------------------------------------------------------
/lesson5-semantics-aria/19-aria-live/main.css:
--------------------------------------------------------------------------------
1 | .demo {
2 | margin: 50px;
3 | }
4 |
5 | html, body {
6 | margin: 0;
7 | padding: 0;
8 | height: 100%;
9 | font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
10 | }
11 |
12 |
13 | .label {
14 | display: block;
15 | font-size: 14px;
16 | color: #3F51B5;
17 | margin-bottom: 8px;
18 | }
19 |
20 | [role=spinbutton] {
21 | border-radius: 4px;
22 | border: 1px solid #9E9E9E;
23 | font-size: 18px;
24 | padding: 4px;
25 | font-family: inherit;
26 | font-weight: 100;
27 | color: #616161;
28 | display: inline-block;
29 | }
30 |
31 | [role=spinbutton] #number {
32 | padding-top: 1px;
33 | width: 3em;
34 | }
35 |
36 | button {
37 | color: white;
38 | background: #3F51B5;
39 | border: none;
40 | border-radius: 4px;
41 | font-size: 20px;
42 | font-family: inherit;
43 | font-weight: 100;
44 | }
45 |
--------------------------------------------------------------------------------
/lesson3-semantics-built-in/02-chromevox-lite/embed.css:
--------------------------------------------------------------------------------
1 | .hide-unless-focused {
2 | position: absolute;
3 | left: -10000px;
4 | top: -10000px;
5 | }
6 |
7 | .hide-unless-focused:focus {
8 | left: 10px;
9 | top: 10px;
10 | }
11 |
12 | button#enable-cvox {
13 | border: none;
14 | border-radius: 4px;
15 | font-weight: 100;
16 | font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
17 | background-color: #2196F3;
18 | color: white;
19 | z-index: 1000;
20 | padding: 2px 7px;
21 | font-size: 18px;
22 | }
23 |
24 | body[cvox-enabled] button#enable-cvox {
25 | display: none;
26 | }
27 |
28 | div#self-destruct {
29 | position: absolute;
30 | left: -1000px;
31 | top: -1000px;
32 | }
33 |
34 | .blur {
35 | -webkit-filter: blur(10px);
36 | -moz-filter: blur(10px);
37 | -o-filter: blur(10px);
38 | -ms-filter: blur(10px);
39 | filter: blur(10px);
40 | }
41 |
--------------------------------------------------------------------------------
/lesson3-semantics-built-in/16-labelling-input-elements/label.js:
--------------------------------------------------------------------------------
1 | var checkbox = document.querySelector('input#jLetter');
2 | var parent = checkbox.parentElement;
3 | var labelText = parent.textContent.trim();
4 |
5 | function observe(records, self) {
6 | if (!checkbox || !parent) {
7 | console.error('You deleted the element you were supposed to label! Maybe refresh the page and try again...');
8 | return;
9 | }
10 |
11 | if (!checkbox.labels)
12 | return;
13 |
14 | for (var i = 0; i < checkbox.labels.length; i++) {
15 | var label = checkbox.labels[i];
16 | if (label.textContent.trim() != labelText)
17 | continue;
18 |
19 | document.querySelector('.secret').textContent = 'The secret word is: "BILBY"'
20 | document.querySelector('.header').classList.add('success');
21 | }
22 |
23 | }
24 | var observer = new MutationObserver(observe);
25 | observer.observe(parent, { childList: true, subtree: true });
26 |
--------------------------------------------------------------------------------
/lesson2-focus/07-modals-and-keyboard-traps/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Georgia', sans-serif;
3 | }
4 |
5 | .modal {
6 | width: 50%;
7 | border-radius: 4px;
8 | margin-left: auto;
9 | margin-right: auto;
10 | padding: 24px;
11 | background-color: #fff;
12 | z-index: 3; /* places the modal on top of everything */
13 | position: fixed;
14 | top: 25%;
15 | left: 25%;
16 | display: none;
17 | }
18 |
19 | .modal-overlay {
20 | width: 100%;
21 | height: 100%;
22 | z-index: 2; /* places the modalOverlay between the main page and the modal dialog */
23 | background-color: #000;
24 | opacity: 0.5;
25 | position: fixed;
26 | top: 0;
27 | left: 0;
28 | display: none;
29 | margin: 0;
30 | padding: 0;
31 | }
32 |
33 | h1 {
34 | margin-top: 0;
35 | }
36 |
37 | .field {
38 | display: inline-block;
39 | vertical-align: bottom;
40 | }
41 |
42 | label {
43 | display: block;
44 | margin-bottom: 4px;
45 | }
46 |
--------------------------------------------------------------------------------
/lesson3-semantics-built-in/16-labelling-input-elements/solution/label.js:
--------------------------------------------------------------------------------
1 | var checkbox = document.querySelector('input#jLetter');
2 | var parent = checkbox.parentElement;
3 | var labelText = parent.textContent.trim();
4 |
5 | function observe(records, self) {
6 | if (!checkbox || !parent) {
7 | console.error('You deleted the element you were supposed to label! Maybe refresh the page and try again...');
8 | return;
9 | }
10 |
11 | if (!checkbox.labels)
12 | return;
13 |
14 | for (var i = 0; i < checkbox.labels.length; i++) {
15 | var label = checkbox.labels[i];
16 | if (label.textContent.trim() != labelText)
17 | continue;
18 |
19 | document.querySelector('.secret').textContent = 'The secret word is: "BILBY"'
20 | document.querySelector('.header').classList.add('success');
21 | }
22 |
23 | }
24 | var observer = new MutationObserver(observe);
25 | observer.observe(parent, { childList: true, subtree: true });
26 |
--------------------------------------------------------------------------------
/lesson2-focus/07-modals-and-keyboard-traps/solution/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Georgia', sans-serif;
3 | }
4 |
5 | .modal {
6 | width: 50%;
7 | border-radius: 4px;
8 | margin-left: auto;
9 | margin-right: auto;
10 | padding: 24px;
11 | background-color: #fff;
12 | z-index: 3; /* places the modal on top of everything */
13 | position: fixed;
14 | top: 25%;
15 | left: 25%;
16 | display: none;
17 | }
18 |
19 | .modal-overlay {
20 | width: 100%;
21 | height: 100%;
22 | z-index: 2; /* places the modalOverlay between the main page and the modal dialog */
23 | background-color: #000;
24 | opacity: 0.5;
25 | position: fixed;
26 | top: 0;
27 | left: 0;
28 | display: none;
29 | margin: 0;
30 | padding: 0;
31 | }
32 |
33 | h1 {
34 | margin-top: 0;
35 | }
36 |
37 | .field {
38 | display: inline-block;
39 | vertical-align: bottom;
40 | }
41 |
42 | label {
43 | display: block;
44 | margin-bottom: 4px;
45 | }
46 |
--------------------------------------------------------------------------------
/lesson5-semantics-aria/19-aria-live/number.js:
--------------------------------------------------------------------------------
1 | var number = document.querySelector('#number');
2 | function increment() {
3 | var oldValue = number.textContent;
4 | number.textContent = parseInt(oldValue, 10) + 10;
5 | }
6 |
7 | function decrement() {
8 | var oldValue = number.textContent;
9 | number.textContent = parseInt(oldValue, 10) - 10;
10 | }
11 |
12 | document.querySelector('#add').addEventListener('click', increment);
13 | document.querySelector('#subtract').addEventListener('click', decrement);
14 |
15 | var VK_UP = 38;
16 | var VK_DOWN = 40;
17 | var spinbutton = document.querySelector('[role=spinbutton]');
18 | spinbutton.addEventListener('keydown', function(e) {
19 | switch (e.keyCode) {
20 | case VK_UP:
21 | increment();
22 | e.stopPropagation();
23 | e.preventDefault();
24 | break;
25 | case VK_DOWN:
26 | decrement();
27 | e.stopPropagation();
28 | e.preventDefault();
29 | break;
30 | }
31 | });
32 |
--------------------------------------------------------------------------------
/lesson2-focus/05-radio-group/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |