Advanced HTML and CSS

Introduction

At this point in the curriculum you’ve learned incredibly valuable concepts in whichever full stack path you chose, you’ve created some awesome, resume worthy projects, and you should have a better understanding of some HTML and CSS concepts. One could even argue that you may now love working with CSS…?

What you may not have too much an understanding of, though, is the topic of accessibility, often referred to as “a11y” (due to there being 11 letters between the first and last letters). Unfortunately, this is a topic that many people either don’t know much about, or just don’t take into account when developing websites. If you fit into either of those two categories, you may have adopted some habits that aren’t exactly a11y friendly. Before we get into how you can break away from such habits and begin implementing a11y friendly concepts, it’s important to first understand some basic information about web accessibility.

Learning Outcomes

By the end of this lesson, you should be able to:

• Explain what web accessibility is.

What is Web Accessibility?

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities and other circumstantial limitations can use them with as few barriers as possible.

There are different types of disabilities, including (but not limited to) auditory, physical/motor, cognitive, or visual. A disability can be permanent, such as a user who is completely blind or deaf, or it can be temporary, such as a user with a broken arm. Users can have multiple disabilities at any given time. Older users with changing abilities may even have similar conditions as those who have a disability.

Situational limitations are a little different. Using a phone outside on a bright day, browsing a site with one hand while you’re busy doing something else with the other, or living in an area where the internet is slow or the bandwidth is expensive are all examples of situational limitations. These limitations, unlike a disability, occur to users only in specific situations, but are still important to keep in mind when developing a website.

Why Web Accessibility Matters

Let’s first look at a non-web example to gain a little perspective. Imagine being in a multi-story building that has no elevator. For some people, this might only be an annoyance. “Huh, no elevator. I guess I’ll walk up a few flights of stairs, then.” A person that requires a wheelchair, however, would find it impossible, or at the very least much more difficult, to go anywhere beyond the first floor. Even if a person in a wheelchair had someone to lift the wheelchair up each step, it would be a much more difficult process. The point here is that an elevator would have made this building more accessible.

The building is your website, and the elevator is a collection of various accessibility features and tools (…it’s a pretty big elevator). When you develop a website, you’re developing it for users, and you need that website to actually be usable by them. People with disabilities, older people with changing abilities, people who aren’t as tech savvy, and people with some sort of situational limitation are still users, and websites should be as equally usable by them as possible.

One other pretty big reason that accessibility matters is that, depending on the country, there could actually be laws requiring accessibility to be implemented.

Assignment

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

• What is web accessibility?
• Who truly benefits from accessibility features?

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

• The Business Case for Digital Accessibility goes over reasons for implementing accessibility beyond just being more inclusive to more users.
• How People with Disabilities Access Digital Content is a rather long video (a whopping 45 minutes), but it goes over a lot of various assistive technologies and will offer you some more perspective on how users with disabilities may browse the websites you create.
• When we design for disability, we all benefit is a video featuring Elise Roy that furthers the point mentioned in this lesson, that accessibility benefits everyone. While this video is a more general overview that doesn’t revolve around web development specifically, it can still be an eye-opening experience.