Accessibility Basics

Learn essential accessibility principles to make Alex's portfolio usable by everyone, including people with disabilities

Web accessibility means building websites that work for everyone. Including people who are blind, deaf, have motor difficulties, or use assistive technologies. Around 15% of the world's population has some form of disability. That's over one billion people who might struggle to use websites that aren't built with accessibility in mind. Think of accessibility like building ramps alongside stairs. The stairs work fine for most people, but the ramp ensures everyone can get where they need to go. Good accessibility doesn't just help disabled users — it makes websites better for everyone. Alex's portfolio needs to work for all visitors, regardless of their abilities. A visitor might be using a screen reader to hear the content, navigating with only a keyboard, or have difficulty distinguishing colors. Let's explore the fundamental principles.

The Four Principles of Accessibility

Web accessibility follows four core principles, known as POUR. Every decision you make should consider these guidelines:

Semantic HTML Foundation

The most important accessibility feature costs nothing and requires no extra code — using HTML elements for their intended purpose. Screen readers and other assistive technologies rely on proper HTML structure to understand your content. When you use <h1> for headings instead of <div class="big-text">, screen readers can jump between headings. When you use <button> instead of styled divs, keyboard users can activate them with the space bar or Enter key.

Images and Alternative Text

Every image needs alternative text that describes its content or purpose. Screen readers announce this text instead of showing the image. But not all images need the same type of description. Informative images convey information that's not available in surrounding text. Decorative images are purely visual and should have empty alt text. Functional images like buttons or icons need alt text describing their action.

Color and Contrast

Color alone should never be the only way to convey information. Some users are colorblind, others use high-contrast modes that remove colors entirely. Always provide additional visual cues beyond color. Text contrast ratios determine readability. Normal text needs a 4.5:1 ratio against its background. Large text (18px+ or 14px+ bold) needs 3:1. White text on a medium gray background often fails these requirements. Alex's portfolio should use multiple visual cues to communicate status or categories. Instead of just changing colors, combine color with icons, text labels, or patterns.

Keyboard Navigation

Many users navigate websites without a mouse — using keyboards, switch devices, or voice commands. Every interactive element must be reachable and usable via keyboard. The Tab key moves forward through focusable elements, Shift+Tab moves backward. Focus indicators show which element currently has keyboard focus. Browsers provide default focus styles, but many developers remove them for aesthetic reasons. Always replace removed focus styles with custom alternatives. Interactive elements should appear in logical tab order. A user tabbing through Alex's portfolio should encounter the navigation links, then main content buttons, then footer links. Skip links let keyboard users jump to main content without tabbing through every navigation item.

Form Accessibility

Forms create the biggest accessibility barriers when done wrong, but become incredibly usable when done right. Every form control needs a proper label that describes its purpose. Error messages should be clearly associated with their inputs and explain how to fix problems. Label elements explicitly connect descriptive text to form inputs. Screen readers announce labels when focus moves to their associated controls. Placeholder text disappears when typing begins and has poor color contrast, so never rely on it for essential instructions. The for attribute connects each label to its input using the input's id. Required fields are marked both visually (in the label) and programmatically (with the required attribute). Form inputs use appropriate types like email for better mobile keyboards and validation.

Testing Your Accessibility

Accessibility testing doesn't require expensive tools. Start with built-in browser features and simple manual tests. These catch most common issues before users encounter them. Browser developer tools include accessibility audits that scan for common issues. Chrome DevTools highlights elements with insufficient contrast, missing alt text, or keyboard navigation problems. But automated tools only catch about 30% of accessibility issues — manual testing with real users provides the complete picture. Real accessibility happens when you build with inclusive principles from the start, not when you retrofit existing code. Alex's portfolio should welcome every visitor, regardless of how they browse the web.

Quiz