Web accessibility is the practice of designing and building websites and applications so that anyone can perceive, understand, navigate, and operate them, regardless of their abilities, the device they use, or the context they find themselves in. In this first lesson we define the concept precisely, clarify who benefits from it (which is far more people than you might imagine), and set it apart from other terms it is often confused with: usability, inclusive design, and universal design. We also introduce Cursalia, the fictional e-learning platform we will audit and make accessible throughout the entire course. Getting this foundation right is essential: everything we cover later (laws, WCAG, HTML/ARIA techniques, testing) rests on being clear about what we are trying to achieve and for whom.

1. A precise definition of web accessibility
2. Who benefits: disability and the universal benefit (curb-cut effect)
3. Accessibility vs. usability vs. inclusive design vs. universal design
4. The four POUR principles (in passing only)
5. Introducing the running project: Cursalia

The reference definition comes from the Web Accessibility Initiative (WAI) of the W3C, the consortium that standardizes the web:

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, that they can perceive, understand, navigate, and interact with the web, and contribute to it.

It is worth unpacking three ideas from this definition:

• It is not an optional feature; it is a property of the product. A site either is accessible or it isn't (to varying degrees), just as it is fast or slow. It isn't "bolted on at the end": it is built in.
• It covers perceiving + understanding + navigating + interacting + contributing. It isn't enough for the content to be visible; the user must be able to read it with a screen reader, understand it, move through it with the keyboard, and fill in a form to take part.
• It speaks of people with disabilities, but not only. As we will see, the benefit extends to all users.

A useful way to internalize it: accessibility is about removing barriers. Disability, in the social model that the modern web assumes, does not lie solely "within the person"; it arises from the interaction between a functional limitation and a poorly designed environment. A staircase without a ramp does not disable anyone on its own: it disables the person who uses a wheelchair because no alternative was considered. On the web, a button that only works with a mouse click is that ramp-less staircase for someone navigating with a keyboard.

The first group to benefit are people with disabilities, which may be visual (blindness, low vision, color blindness), auditory, motor (difficulty or inability to use the mouse), or cognitive and language-related. In Module 2 we will study these types and the assistive technologies they rely on in detail; here it is enough to remember that we are talking about a very significant share of the population (the WHO estimates that around 15-16% of people live with some disability).

The curb-cut effect is the best metaphor for understanding why accessibility matters to everyone. Curb cuts (those little ramps at street corners) were installed with wheelchairs in mind. But today they are used, and appreciated, by many more people: someone pushing a stroller, a delivery worker with a hand truck, someone with a suitcase, a cyclist, a child on a scooter. What was designed for one specific group ended up improving the experience for the majority.

Exactly the same thing happens on the web:

The conclusion is powerful: accessibility is not a cost for a minority; it is an investment in quality for everyone. We will dig deeper into the "business case" and into temporary and situational circumstances in lesson 01-02.

These four terms are related and are often used as synonyms, but they mean different things. Telling them apart avoids the misunderstandings that are so common within teams.

Key ideas so you don't mix them up:

• Accessibility and usability overlap but are not the same thing. A site can be technically accessible (a screen reader reads everything) and still have poor usability (the form has 40 confusing fields). And the other way around: something very usable with a mouse can be inaccessible with a keyboard. The ideal is "accessible usability": that it be usable also for someone with a disability.
• Inclusive design is the "how" (the process); accessibility is largely the "what" (the outcome and its compliance).
• Universal design is the "ideal": a single solution that doesn't segregate. Avoid the typical separate "accessible version" that is worse maintained.

WCAG organizes all of accessibility around four principles, known by the acronym POUR. Here we only name them so they ring a bell; we will develop them in depth in Module 3:

• Perceivable: information must be perceivable by some sense (e.g., a text alternative for images).
• Operable: the interface must be operable (e.g., with a keyboard, not only with a mouse).
• Understandable: the content and the way it works must be understood.
• Robust: the code must work reliably with different browsers and assistive technologies.

For now, just hold on to the acronym. We will look at the structure of WCAG in lesson 01-04, and each principle, with its criteria and techniques, in Module 3.

Throughout the course we will work on a continuous case study: Cursalia, a fictional e-learning platform (an online campus). It is an ideal example because it concentrates almost all real accessibility challenges: multimedia content, forms, dynamic interactions, and a lot of text.

We will gradually audit and make accessible these key surfaces, which will reappear in the examples and exercises of every module:

• Landing page and course catalog: cards with images (text alternatives, structure).
• Course detail page: titles, descriptions, and heading hierarchy.
• Video-lesson player: captions and transcript.
• Enrollment/registration form: labels, errors, and accessible validation.
• Interactive quizzes: focus, keyboard, and feedback.
• Catalog dropdown filter: an accessible custom widget.
• Student progress bar: state communicated to assistive technologies.
• Cursalia brand palette: sufficient color contrast.
• Forums/comments: user-generated content.
• Student dashboard as an SPA: navigation and announcements of dynamic changes.

In this introductory module we will use these surfaces only to illustrate concepts. Let's look at a first tiny example, a catalog card, to nail down the idea of a "barrier":

Don't worry about mastering alt now (we will cover it thoroughly in Module 5): the goal is that you recognize the difference between an interface with a barrier and one without a barrier. That "eye" is the first thing an accessibility professional develops.

• "Accessibility is only for blind people." False. It covers visual, auditory, motor, and cognitive disabilities, and it benefits everyone through the curb-cut effect.
• "We'll fix it at the end of the project." The most expensive mistake. Reworking an interface to make it accessible costs far more than designing it well from the start (inclusive design).
• Confusing accessibility with usability. Passing an automated tool does not guarantee that the site is usable by a person with a disability. They are complementary things.
• Creating a separate "accessible version." It tends to fall out of date and be of lower quality; it segregates instead of including. Aim for universal design: a single solution for everyone.
• Tip: start looking at any website by asking yourself, "Could I use this without seeing the screen? Without a mouse? Without hearing?" That habit is more valuable than memorizing rules.

Exercise 1. Explain the curb-cut effect in your own words and give an example different from the ones in the lesson, applied to Cursalia.

Exercise 2. Classify each statement as referring to accessibility, usability, inclusive design, or universal design:

1. "We redesigned the menu so it's found on the first try."
2. "The player works just as well with a keyboard as with a mouse, with no separate version."
3. "We invited a blind user and an older user to the tests starting in sprint 1."
4. "We added text alternatives to all catalog images for screen readers."

Exercise 3. Look at this Cursalia catalog card and identify at least one potential barrier (without resolving it yet):

Solution 1. The curb-cut effect describes how an improvement designed for a group with a disability ends up benefiting many more people. Example in Cursalia: the transcripts of the video lessons are created with deaf people in mind, but they also let any student search for a concept by text within the video or review the material without headphones in the library.

Solution 2.

1. Usability. 2. Universal design. 3. Inclusive design. 4. Accessibility.

Solution 3. Potential barriers: (a) the click is on a <div> with onclick, not an <a>/<button>, so it cannot be reached or activated with the keyboard (motor barrier); (b) the <img> has no alt, making it invisible to screen readers (visual barrier); (c) there is no indication that the element is interactive for assistive technologies. The concrete solutions will come in Modules 4 and 5; here it was enough to detect the barriers.

In this lesson we have defined web accessibility as the removal of barriers so that anyone can perceive, understand, navigate, and interact with the web. We have seen that it benefits both people with disabilities and, through the curb-cut effect, everyone else, and we have distinguished accessibility, usability, inclusive design, and universal design. We have named the POUR principles (developed in Module 3) and introduced Cursalia, the project that will accompany us throughout the course.

Now that we know what accessibility is, the natural next question is why we should invest in it. In the next lesson, "The Importance of Web Accessibility," we will look at the ethical dimension, the business case (market, SEO, brand), legal risk, and the real cost of inaccessibility.