💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 1: HTML & CSS: Good vs Bad Design

U1LA5 Lab: What Do You Hear? Make it Accessible

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

PreviousU1LA5.1: Creating Accessible WebsitesNextU1LA6.1: Working with CSS Frameworks - Bulma

Last updated 1 year ago

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 . 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 ( | ) 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 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, 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 .

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 .

  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 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 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 attributes.

  9. For the submit button, change the text to say "Submit Quiz" and make the button accessible using 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.

    • Email should both have an autocomplete and required attribute.

Spicy

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?

Birthday should be a required input. Check out this for an example.

Finally, Use this 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>.

🗃️
U1LAB5.2-Exemplar folder
repl.it
github
the National Federation of the Blind
WebAIM
w3schools
help on creating descriptive links
this resource on fieldset
resource on text inputs
placeholder and autocomplete
this example on buttons
resource on the required attribute
documentation on creating accessible tables