diff --git a/slides/02-Developers/02-images.html.md b/slides/02-Developers/02-images.html.md
index e316936..ee30644 100755
--- a/slides/02-Developers/02-images.html.md
+++ b/slides/02-Developers/02-images.html.md
@@ -17,7 +17,7 @@ layout_data:
src="./images/inline-image.png"
/>
- - title: Inaccessible Inline Image exercise
+ - title: Inaccessible Inline Image Exercise
description: |
This is an image without alt text. Turn on VoiceOver and listen to how it is read. Add an `alt`
attribute "Facebook logo" to this image to make it accessible and test it again with VoiceOver.
@@ -34,10 +34,10 @@ layout_data:
"It doesn't look like you added an alt to your image."
);
---
-Screen readers interact with text on the screen. So, to convey the meaning of
+Screen readers interact with text on the screen. So, to convey the meaning of
an image to screen reader users,
we put an accessible text label in the HTML. If an image is decorative, we can hide it from screen
-reader users by giving it an empty label (`alt=""`). After the completing the
-exercise below, you can learn a lot more about writing good alt text for images
-by checking out [WebAIM's resource on the
+reader users by giving it an empty label (`alt=""`). After the completing the
+exercise below, you can learn a lot more about writing good alt text for images
+by checking out [WebAIM's resource on the
topic](http://webaim.org/techniques/alttext/).
diff --git a/slides/02-Developers/03-keyboard.html.md b/slides/02-Developers/03-keyboard.html.md
index 3237e37..491f3f2 100755
--- a/slides/02-Developers/03-keyboard.html.md
+++ b/slides/02-Developers/03-keyboard.html.md
@@ -27,7 +27,7 @@ layout_data:
Submit
- - title: Unsemantic Button exercise
+ - title: Unsemantic Button Exercise
description: |
The button below is constructed using an unsemantic div. The easiest way to
make this semantic is to use a real button or input tag. Here is another way. In the
@@ -57,12 +57,12 @@ layout_data:
);
---
-Make all interactive elements work with a keyboard. For example, make sure a
+Make all interactive elements work with a keyboard. For example, make sure a
button that you activate
with a click is also in the keyboard tab sequence and that pressing enter or space
-activates it. Set the `tabindex` attribute to `0` to include an element in the
-browser's keyboard tab sequence. If you want an element out of sequence, set
-its `tabindex` to `-1` and use JavaScript to control its focus and tab
-sequence, and related keyboard events. We do not recommend using `tabindex`
-values greater than `0` even though browsers support them. Note that HTML links
+activates it. Set the `tabindex` attribute to `0` to include an element in the
+browser's keyboard tab sequence. If you want an element out of sequence, set
+its `tabindex` to `-1` and use JavaScript to control its focus and tab
+sequence, and related keyboard events. We do not recommend using `tabindex`
+values greater than `0` even though browsers support them. Note that HTML links
and input elements have an implied `tabindex` of `0`.
diff --git a/slides/02-Developers/04-labels.html.md b/slides/02-Developers/04-labels.html.md
index 70192c3..e55e548 100755
--- a/slides/02-Developers/04-labels.html.md
+++ b/slides/02-Developers/04-labels.html.md
@@ -94,7 +94,7 @@ layout_data:
Note: This date will be recorded.
- - title: Inaccessible Button exercise
+ - title: Inaccessible Button Exercise
description: |
Add an `aria-label` to the button below and label it 'search' to
make it accessible.
@@ -112,7 +112,7 @@ layout_data:
);
- - title: Inaccessible Interactive Elements exercise
+ - title: Inaccessible Interactive Elements Exercise
description: |
Add an `aria-labelledby` to the input field below and point it to the `id` of the prompt span.
Also, add an `aria-describedby` to the input field and point it to the description below to
@@ -140,7 +140,7 @@ layout_data:
"It doesn't look like you added an aria-describedby to the input field"
);
---
-Accessible labels are necessary to make several other types of elements
+Accessible labels are necessary to make several other types of elements
understandable,
such as inputs, widgets, and ARIA landmark regions.
Accessible labels that create a delightful experience are:
@@ -149,4 +149,3 @@ Accessible labels that create a delightful experience are:
2. Meaningful -- accurately convey the purpose of the element.
There are many ways to label an interactive element such as a button or an input field, which you will see below. You can check the results of adding the various label types by testing in your screen reader too!
-
diff --git a/slides/02-Developers/05-list.html.md b/slides/02-Developers/05-list.html.md
index 5b42897..c51e56b 100755
--- a/slides/02-Developers/05-list.html.md
+++ b/slides/02-Developers/05-list.html.md
@@ -50,7 +50,7 @@ layout_data:
Sun
- - title: Unsemantic List exercise
+ - title: Unsemantic List Exercise
description: |
Update the example below so that the items are expressed as a list. The easiest way to
make this semantic is to use a list tag. If that is not
@@ -74,7 +74,6 @@ layout_data:
"Wrap the items in an 'li' element or in a 'span' OR 'div' with the role 'listitem'."
);
---
-Semantic lists help screen readers understand the type of the element and the
+Semantic lists help screen readers understand the type of the element and the
number of items in the element, and provide
easier navigation via list commands specific to screen readers.
-
diff --git a/slides/02-Developers/06-dialog.html.md b/slides/02-Developers/06-dialog.html.md
index 96458dc..a890e9d 100755
--- a/slides/02-Developers/06-dialog.html.md
+++ b/slides/02-Developers/06-dialog.html.md
@@ -106,7 +106,7 @@ layout_data:
- - title: Unsemantic Dialog exercise
+ - title: Unsemantic Dialog Exercise
description: |
The dialog below is unsemantic:
@@ -173,5 +173,5 @@ layout_data:
);
---
-Dialogs are a little bit trickier to make accessible, but with a few key
+Dialogs are a little bit trickier to make accessible, but with a few key
principles, they can be made keyboard navigable and usable with screen readers.
diff --git a/slides/02-Developers/07-tables.html.md b/slides/02-Developers/07-tables.html.md
index 33cfcb8..552f86e 100755
--- a/slides/02-Developers/07-tables.html.md
+++ b/slides/02-Developers/07-tables.html.md
@@ -82,7 +82,7 @@ layout_data:
- - title: Unsemantic Table exercise
+ - title: Unsemantic Table Exercise
description: |
If the information is tabular, using CSS to create the appearance of a table makes the information
almost impossible for a screen reader user to understand and use. Convert the following tabular data
@@ -131,4 +131,3 @@ layout_data:
Tables help screen readers process information presented in a tabular format.
When information is presented using table markup, screen reader users can
read down columns and across rows, and even hear column and row headings as they do so.
-
diff --git a/slides/02-Developers/08-menu.html.md b/slides/02-Developers/08-menu.html.md
index 41cd5a8..945d14c 100755
--- a/slides/02-Developers/08-menu.html.md
+++ b/slides/02-Developers/08-menu.html.md
@@ -111,7 +111,7 @@ layout_data:
- - title: Inaccessible Menu exercise
+ - title: Inaccessible Menu Exercise
description: |
Update the example below to include the necessary markup for making
this menu accessible. You should address the following issues.
@@ -211,6 +211,5 @@ layout_data:
);
---
-Menus, like dialogs, rely on a few key principles to render them usable with
+Menus, like dialogs, rely on a few key principles to render them usable with
the keyboard or screen reader.
-