🗃️U1LA5 Lab: What Do You Hear? Make it Accessible

What can one do to make a website more easily accessible?

Teacher Notes

From a student's perspective, knowing if you're applying accessibility correctly is tricky. From a teacher's perspective, grading it is too, tricky. Students won't be adding any code in this lab. They will instead be making modifications to the HTML and CSS in order to make the website more accessible. For the students, links to the HTML accessibility tools have been provided, but we believe accessibility is best understood with some type of a screen reader validating the adjustments being made. For teachers, an outline of the answer key is provided in the U1LAB5.2-Exemplar folder. This answer key makes it easier to scan through a student's code without having to use a screen reader to check their work.

Students should utilize the Starter Code (repl.it | github) for this project.

Prompt

Beautiful websites can be fun and satisfying for both the creator and the navigator, but what if, as the navigator, you can't see the website. According to the National Federation of the Blind, the NFB, roughly 7.7 million Americans are blind as of 2016. And, about 90% of people use a screen reader because of their disability, according to a small survey done by WebAIM. WebAIM, Web Accessibility In Mind, is a non-profit organization that focusses on providing web accessibility solutions for those with disabilities. Most of the linked resources attached below will bring you to either their webpage or w3schools.

Directions: Today, your task is to modify the websites given to you so that they are "accessible". The steps below will guide you in using the right element tags, and adding descriptive alt text to make for a more accessible page.

1. The names you use for your element tags are very important and useful for someone using a screen reader. Skim through the level_one.html and modify any div that can be a more specific element. For example:

   <div class="h2">Introduction</div>
   <!-- Can be switched to... -->
   <h2>Introduction</h2>

   Then, in the level_one.css change the .h2 class selector into an h2 element selector. You'll need to double check and potentially do the same with any other changes you make in the level_one.html.

2. Next, notice the descriptive alt text written for the first 2 images: "Calm hippo standing in swampland" and "Roaring male lion lying on low cut grass". Skim through the code again, this time looking for and nondescriptive alt text. Change it so that it describes the corresponding image with enough detail that a blind person can get the idea.

3. At the bottom of the page, there are 3 links provided for further reading. The first link is accompanied by text that describes what the reader will find when clicking to that webpage: "hippos' and lions' strengths and weaknesses". The other links may be enticing, but they poorly describe what the reader will see if they were to click. In the level_one.html, change the text so that it is more descriptive. Check out this website for more help on creating descriptive links.

4. On to level 2! Notice on the webpage that there are 3 questions to "The Quickest Personality Quiz". Then, there's a slot for your name and email, and a button to submit the quiz. Input fields, especially ones in a quiz format like this, can be hard to navigate through using a screen reader if done incorrectly. The goal will be using proper element tags and other techniques to connect titles, questions, and labels to their input fields.

5. In the level_two.html, the first question <fieldset class="question" id="q1"> is done properly. It uses <fieldset> to wrap the entire question instead of a div, and <legend> for the question itself instead of <p>. Change the 2nd and 3rd questions so that they fit the same structure. Checkout this resource on fieldset for more examples.

6. In the third question, there is an image that correlates to each radio button. This correlation or connection should be made explicitly in the HTML. Notice that the first selection, the cabin in the snow, is done already. The <label> has an attribute for="cabin", and the corresponding radio <input> above it has an id="cabin":

   <div class="q3-item">
       <input type="radio" id="cabin" name="getaway" value="cabin" />
       <label for="cabin">
           <img src="img/cabin.jpg" alt="A cold snowy mountain with a small cabin in the distance." />
       </label>
   </div>

   Add the for attribute to the other 3 <label> elements in this question matching them to the right ID. Use this resource on text inputs if you need more guidance.

7. The <label> for the email's text input field also needs a for attribute to reference the field.

8. For both the Name and Email text inputs, use the placeholder and autocomplete attributes.

9. For the submit button, change the text to say "Submit Quiz" and make the button accessible using this example on buttons on the WebAIM page.

Culturally Responsive Best Practice

Accessibility is huge and affects so many people looking to use websites. This is another fairly regimented lab, but students should be encouraged to explore additions that would make their site even more user friendly based on what they have learned about accessibility and what they think would best serve those around them.

Extra Help?

There are so many resources out there on accessibility. If you're struggling, do a little Googling or look back at your work from lesson U1LA5.1 to help yourself out!

Extensions

Mild

• Level 3 continues the thread of accessibility through tables, image buttons, and more. Start by including the following in the level_three.html:

  • For the "Submit Option" section, add a for attribute for the label element.

  • Then, for the "Submit Button" section, add an alt attribute and give it a descriptive alt text that would help someone understand the purpose of the image.

Medium

• Name, Birthday, and Email are the 3 text inputs on the page:

  • Name should have autocomplete; include the autocomplete attribute in the <input> element.

  • Birthday should be a required input. Check out this resource on the required attribute for an example.

  • Email should both have an autocomplete and required attribute.

Spicy

• Finally, Use this documentation on creating accessible tables to fix the structure of the first question in the level_three.html. HINT: the <fieldset> and <legend> have been done already. You will start with replacing <div class="full-table"> with <table>.

Reflection Questions:

• What does it mean for a website to be accessible? What are some examples of changes that can be made to get it that way?

• Can you imagine a situation where a company would not want to make their site accessible? What would be the repercussions?

• In what situations might a website need to legally be accessible?