udacity / ud891

Google and Udacity course on Accessibility.

Udacity Web Accessibility

Hi there! This is the course repo for Udacity Web Accessibility. Contained in this repo are a number of sample exercises to help you improve your accessibility skills.

Important note 🚨

The exercises in this repo are for you to complete on your own time. You do not need to send pull requests to this repo when you complete an exercise. Instead, take a look at the next video in the Udacity course where the solution will be shown and compare that to your answer. Sorry for any confusion! 😇

Running the examples

Most of the examples can just have their index.html dragged into the browser in order to run. Some examples may require running a local server, an easy way to run a local server is with the Web Server for Chrome extension. If you need to run a local server for an example we'll be sure to note this requirement in the example's README as well as in the course instructor notes.

Found a bug?

Please feel free to create an issue if you find anything wrong with the exercises.

ud891's Issues

The intro is missing for Lesson 2 Exercise 14

Hi and thanks for your awesome course!

It seems like something wrong with intro for Lesson 2 Exercise 14 (Implementing Keyboard Event Listeners), it shows just 3 seconds of static picture

"entry not found" in Lesson 2 Exercise 3

If you click on a tab in this exercise, you accidentally get taken to a new page with the content of "entry not found." lesson2-focus/03-managing-focus/index.html#!/lesson2-focus/03-managing-focus/index.html

I believe the issue might be the result of a bad merge or something where the file that corresponds with the tab link is now missing:

Accessibility issues in L3:02

L3:02

Departure and arrival autocomplete entries are not read aloud when navigated with the keyboard.

Furthermore they do not inherit the styling from the parent wrapper div: <div class="wrapper blur">

Wrong closing tags for headings

In Lesson 2, dom-order exercise there are wrong closing tags for h3 headings.

Do you accept PRs?

Mis-titled quiz

The second question on https://classroom.udacity.com/courses/ud891/lessons/8019995517/concepts/83106124892589030923 is incorrectly titled. It should be:

Which temporalities does the impairment concussion fit into? (check all that apply)

opening with atom or brackets

Hi, thanks for posting this course. I'm a new developer and I'm trying to do your exercises. I was unable to get the javascript to work using web server for chrome and editing via inspect (even though I did change both the html and main.js files), so I forked the code and downloaded it to use in atom or brackets. When launching in atom or brackets I can't get the main content to show. I only see the header and navbar. Selecting items in the navbar also do not show the main content. Can you give me any guidance? I was trying to do 03-managing-focus. Thank you!

.

lesson2-focus/02-dom-order does not work on firefox and firefox Dev edition

Hi, thanks for his awesome course. I ran the solution for the lesson specified in the title on both browsers mentioned, but tabbing does not tab through the links. What is the reason for this? It seems weird that focus accessibility does not work on Firefox.

unable to access http://webaim.org/standards/wcag/checklist

with such a heavy focus on the checklist, is it possible to make a summary avaiable directly in the udacity course?

Modal with any links inside can disrupt the order

Unfortunately, the user experience is poor when the modal contains links that appear below the fold. When you trigger the modal, it will give focus to the first link inside, therefore, disregarding the content above the link.

For sighted users, the user is thrown in the middle of the modal instead of the top. For blind users, the user never realizes there is content above the link.

eventListener execute accumulation, lesson2-07

ud891/lesson2-focus/07-modals-and-keyboard-traps/modal.js

Lines 40 to 58 in 8886e33

	function trapTabKey(e) {
	// Check for TAB key press
	if (e.keyCode === 9) {
	// SHIFT + TAB
	if (e.shiftKey) {
	// TAB
	} else {
	}
	}
	// ESCAPE
	if (e.keyCode === 27) {
	}
	}
	}

Possibly missing click handlers, activation of the page router

Please add the following code to activate the router at line 27.

page.start();

ud891/lesson2-focus/03-managing-focus/scripts/main.js

Line 26 in 3a13521

});

Possibly related to #20

There seem to be missing click handlers that connect the links to page.

ud891/lesson2-focus/03-managing-focus/index.html

Lines 39 to 41 in 3a13521

	<a href="what-is-vegemite" data-page="what-is-vegemite" class="mdl-layout__tab is-active">What is Vegemite?</a>
	<a href="recipes" data-page="recipes" class="mdl-layout__tab">Recipes</a>
	<a href="ingredients" data-page="ingredients" class="mdl-layout__tab">Ingredients</a>

NaNNaNNaNNaNNaNNaNNaNNaN Batman!

Lesson 3.6

Microsoft Edge Insider 77.0.230.2

Is it possible to embed ChromeVox lite in our style guide?

Hello, thanks for the awesome accessibility course! 🎉

I didn't know about the existence of ChromeVox Lite and I thought it'd be a great tool to embed in project style guides--that way developers who are unfamiliar with screen readers can at least get some understanding of how a project's affordances are perceived by ATs.

However, a web search for "ChromeVox Lite" doesn't seem to turn up anything useful, aside from links to this repository. Is there an "official" version of ChromeVox Lite anywhere? Or should I just pull the source files out of this repository and embed it the way your exercises do?

Lesson 3.6

The screen reader only says NaN NaN when it gets to the date fields. If you click to a different tab and click back to the flight booking tab, it says departure date first, letting you know which field it's on. The header flashes in the screen reader when tabbing over to it so it appears that it's a priority issue.

The numbers also are only announced when you reach the year. Otherwise it continues to announce NaN NaN.

Lesson 3.12

The code for the live site appears to be different from the current repository. When I change the div to a button on the live site, text appears at the top with the secret word. When I do the same thing for the code I forked and cloned today, a picture appears in the background of a wombat but no secret text is visible.

Lesson 5 part 8: Name That Element! typo

First excercise says:

<button aria-lavbel="Gumnut"> Eucalyptus </button>

but there is a typo in aria-lavbel which should be aria-label

Incorrect Expected Answer for Quiz: Experience a Screen Reader

In Quiz: Experience a Screen Reader, the screen reader clearly states the role of the form element as "Edit text, email entry". However this is marked incorrect, as the expected answer is "Edit text".

This project still alive?

I would like to make a PR, but I don't want to waste my time if no one is maintaining this

Unable to solve quiz with text editor (Lesson 3 - 05)

I have been solving the quizzes through a fork but stumbled a bit while working on lesson3-semantics-built-in/05-writing-semantic-html. When I changed the div to a button, I expected to see the secret word after a page refresh. This didn't work and I realized later (after watching the solution and seeing the JS code) that I could only solve the problem by mutating the element through the console.

I think it would be nice for users to have the option of solving the problem with their own text editors. Any thoughts on this?

...lesson6-styling/02-style-aria-states/solution/main-solution.css net::ERR_FILE_NOT_FOUND

It should be <link rel="stylesheet" href="main.css">.

ud891/lesson6-styling/02-style-aria-states/solution/index.html line 8

Accessibility, stealing focus

04-offscreen-content

Chrome Audis tab has Lighthouse and Accessibility test finds no issue

Lesson 2 - Focus - Quiz.

Hello,

In the quiz instructions it asks to enter

• leaving on 10/12/2017
• returning on 10/23/2017

it's just a slight bit misleading as the date inputs in the form are dd/mm/yyyy - it frustrated me for a few minutes!

Thanks!