Exercises 1

1.Specify what the acronym WAI-ARIA stands for.

Answer:

Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA)

2. Describe why making web sites accessible is a good practice

Answer:

It’s a good thing because it shows that as a company that you understand the needs of others and that you see them as valuable customers. Also it just makes sense to appeal to more people.

Exercises 2

1.Create a page that makes use of the following landmark roles: banner,complementary, contentinfo, main, and navigation.

Answer:

See the Pen ARIA Landmark Roles by oscar (@nopity) on CodePen.

2.Create a customized check-box using a <span> element and add an event listener that listens for clicks and toggles the aria-selected attribute.

Answer:

See the Pen Span ARIA checkbox by oscar (@nopity) on CodePen.

3.Make the customized check-box keyboard accessible so that it can be toggled using the space bar.

Answer:

See the Pen Span ARIA checkbox by oscar (@nopity) on CodePen.

Exercises 3

1.Visit the NU (XHTML) validator and validate the custom checkbox that you created earlier.

Answer:

came back valid

2.List five ARIA properties and describe the roles they can be used with and their purpose.

Answer:

• aria-dropeffect used for drag and drop applications
• aria-controls specifies the element that this element controls consider it like id with radio buttons and labels
• aria-autocomplete added to inputs to tell user that element has autocomplete capabilites
• aria-atomic used to combine a group of elements to display a message if all our left empty
• aria-flowto allows author to change the flow of document such as with which order to jump with with tabs when filling out a form

3.List three ARIA states and describe when they should be used.

Answer:

• aria-checked

Use when a checkbox or radio button has been selected

• aria-busy

Use on element where content is loading

• aria-grabbed Use on drap and drop elements shows that element is being grabbed