Home → Grade 6 → Web Accessibility: Making Websites for Everyone

Web Accessibility: Making Websites for Everyone

📚 AI & Machine Learning⏱️ 15 min read🎓 Grade 6

📋 Before You Start

To get the most from this chapter, you should be comfortable with: foundational concepts in computer science, basic problem-solving skills

Have you ever tried using a website on your phone while driving? It's hard! Now imagine being completely blind and trying to use the same website. Impossible! Web accessibility is designing websites so everyone can use them: people with visual impairments, hearing loss, motor disabilities, and cognitive disabilities. In India, millions are blind, deaf, or have mobility issues. Accessible websites open the internet to them. It's both ethical and a legal requirement in many countries. WCAG (Web Content Accessibility Guidelines) are international standards for accessibility. They have three levels: A (basic), AA (recommended), and AAA (enhanced). Most target level AA. Key principles: 1. Perceivable: Everyone must perceive the content. Text must be readable. Images need descriptions for blind users. 2. Operable: Everyone must navigate the website. Keyboard navigation (for users who can't use a mouse) must work. 3. Understandable: Content must be clear. Simple language helps those with cognitive disabilities. 4. Robust: The website must work with assistive technologies like screen readers. Screen readers are software that reads webpage content aloud. They're essential for blind users. A screen reader says: "Heading, Products. Paragraph, Browse our collection of phones. Button, Add to Cart." If you write good HTML with proper structure, screen readers work well. Issues for blind users: 1. Images without descriptions. A beautiful product photo means nothing to a blind user. Add alt text: ` Samsung Galaxy S21, 6.2-inch display, blue color

Samsung Galaxy S21, 6.2-inch display, blue color

`. The screen reader reads this, and the user understands the image. 2. Links with vague text. "Click here" doesn't tell the user where the link goes. Better: "View our privacy policy" or "Download the user manual." Screen reader users rely on link text. 3. No keyboard navigation. Some users can't use a mouse (motor disability or keyboard preference). Websites must be fully navigable with keyboard: Tab to move between buttons, Enter to click, Arrow keys to select options. 4. Complex page structure. A screen reader should announce headings, lists, and sections clearly. Use proper HTML: `

`, `

`. Don't use styling to fake headings. For hearing-impaired users: 1. Videos need captions (text of all dialogue and sounds). "[Door opens]" helps users know there was a door sound. 2. Audio content needs transcripts. A podcast should be transcribed so deaf users can read it. 3. Don't rely on sound alone. A notification sound isn't enough; show a visual notification too. For motor-impaired users: 1. Buttons must be large enough (at least 44x44 pixels). Tiny buttons are hard to click for those with tremors. 2. Keyboard navigation must work. Some users can't use a mouse. 3. Avoid rapid animations that require precise timing. A game where you must click within 100ms is inaccessible. For cognitive disabilities: 1. Simple language. Medical jargon confuses everyone, not just people with cognitive disabilities. 2. Consistent navigation. If the menu is on the left on one page, don't put it on the right on another. 3. Clear error messages. "Error: Invalid input" is vague. Better: "Error: Email format incorrect. Please enter your email like example@gmail.com." Color contrast is critical. Black text (strong contrast) is readable. Light gray text on white background isn't. WCAG requires a contrast ratio of at least 4.5:1 for normal text. Don't communicate by color alone. A graph showing profit in green and loss in red is useless for color-blind users. Add labels: "Profit (green bars)" and "Loss (red bars)." Or use patterns: profit = solid bars, loss = striped bars. HTML semantic structure: ```html

Website Title

Article Title

Content...

``` This structure helps screen readers understand the page. Using `
` instead of `
` tells screen readers "this is navigation." Using `
` for main content helps users skip navigation and jump to content. Form accessibility: ```html Email: ``` The `
` associates text with the input. When a screen reader reads the label, users know what the input is for. Required inputs should be marked. Testing for accessibility: 1. Keyboard-only test: Navigate your website using only keyboard. No mouse. Can you access everything? 2. Screen reader test: Use a screen reader (NVDA is free). Does it read content correctly? 3. Automated tools: Tools like axe, Lighthouse, and WAVE detect many issues automatically. In India, accessibility is becoming important. RailTel, Flipkart, and government websites are improving accessibility. As a developer, creating accessible websites is your responsibility. Accessibility benefits everyone: Large text (for accessibility) helps aging parents read your site. Captions (for accessibility) help in noisy cafes. Simple language (for accessibility) helps non-native speakers. Accessibility makes websites better for everyone! Accessibility isn't a feature; it's a right. Every person deserves to access information and services online, regardless of ability.

🧪 Try This!

Quick Check: Name 3 variables that could store information about your school

Apply It: Write a simple program that stores your name, age, and favorite subject in variables, then prints them

Challenge: Create a program that stores 5 pieces of information and performs calculations with them

📝 Key Takeaways

✅ This topic is fundamental to understanding how data and computation work

✅ Mastering these concepts opens doors to more advanced topics

✅ Practice and experimentation are key to deep understanding

Thinking Like a Computer Scientist
Before we dive into Web Accessibility: Making Websites for Everyone, let me tell you something important. The most valuable skill in computer science is not memorising facts or typing fast. It is a way of THINKING. Computer scientists look at big, messy, confusing problems and break them down into small, simple steps. They find patterns. They test ideas. They are not afraid of making mistakes because every mistake teaches them something.
Right now, India has the second-largest number of internet users in the world — over 900 million people! And the companies building the apps and services these people use need millions more computer scientists. Many of them will be people your age, learning these concepts right now. This chapter on web accessibility: making websites for everyone is one more step on that journey.
Building a Web Page Step by Step
Let us build a simple web page together. Think of HTML as the skeleton (structure), CSS as the skin and clothes (appearance), and JavaScript as the muscles (behaviour).
<!DOCTYPE html> <html> <head> <title>My India Page</title> <style> body { font-family: Arial; background: #f0f8ff; } .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 20px; } h1 { color: #FF6600; } button { background: #25D366; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div class="card"> <h1>Welcome to My Page!</h1> <p id="message">Click the button to see magic</p> <button onclick="changePage()">Click Me!</button> </div> <script> function changePage() { document.getElementById('message').textContent = 'Namaste! You just used JavaScript! 🎉'; } </script> </body> </html>
This single file demonstrates all three web technologies working together. The HTML creates the structure (heading, paragraph, button), the CSS inside the <style> tag makes it look beautiful (rounded cards, colours, shadows), and the JavaScript inside the <script> tag makes the button actually DO something. When you click the button, JavaScript finds the paragraph by its ID and changes its text. This is exactly how real websites like Flipkart and Zomato work — just with thousands more lines of code!
Did You Know?
🍕 Swiggy and Zomato process millions of orders per day. Every time you order food on Swiggy or Zomato, a complex system springs into action: your order is received, stored in a database, matched with a restaurant, tracked in real-time, and delivered. The engineering behind this would have seemed like science fiction 15 years ago. Two Indian apps, built by Indian engineers, feeding millions of Indians every day.
💳 India Stack — the world's most advanced digital infrastructure. Aadhaar (biometric ID for 1.4 billion people), UPI (instant digital payments), and ONDC (open network for e-commerce) are part of the India Stack. This is not Western technology adapted for India — this is Indian innovation that the world is trying to copy. The software engineers who built this started exactly where you are.
🎬 Netflix uses algorithms developed in India. Recommendation algorithms that suggest which movie you should watch next? Many Netflix engineers are based in Bangalore and Hyderabad. When you see "Recommended for You" on any streaming platform, there is a good chance an Indian engineer designed that algorithm.
📱 India is the world's largest developer of mobile apps. The most downloaded apps globally are built by Indian companies: WhatsApp (used by billions), Hike (messaging), and many others. Indian startup founders are launching companies in AI, biotech, and space technology. Your peers are already building the future.
The UPI Revolution as a CS Case Study
Before UPI, sending money meant NEFT forms, IFSC codes, 24-hour waits, and fees. UPI abstracted all that complexity behind a simple VPA (Virtual Payment Address like name@upi). This is the power of abstraction — hiding complex implementation behind a simple interface. Under the hood, UPI uses encryption (security), API calls (networking), database transactions (data management), and load balancing (distributed systems). Every CS concept you learn shows up somewhere in UPI's architecture.
How It Works — The Process Explained
Let us walk through the process of web accessibility: making websites for everyone in a way that shows how engineers think about problems:
Step 1: Define the Problem Clearly
Engineers always start here. What exactly needs to happen? What are the inputs? What should the output be? What could go wrong? In our case, with web accessibility: making websites for everyone, we need to understand: what data are we working with? What transformations need to happen? What are the constraints?
Step 2: Design the Approach
Before writing any code or building anything, engineers draw diagrams. They sketch out: how will data flow? What are the main stages? Where are the bottlenecks? This is like an architect drawing blueprints before constructing a building.
Step 3: Implement the Core Logic
Now we translate the design into actual code or systems. Each component handles its specific responsibility. For web accessibility: making websites for everyone, this might involve: data structures (how to organize information), algorithms (step-by-step procedures), and error handling (what happens if something goes wrong).
Step 4: Test and Verify
Engineers test their work obsessively. They try normal cases, edge cases, and intentionally broken cases. They measure performance: is it fast enough? Does it use too much memory? Are there bugs? This testing phase often takes as long as the implementation phase.
Step 5: Deploy and Monitor
Once tested, the system goes live. But engineers do not stop there. They monitor it 24/7: How many requests per second? Is there any lag? Are users happy? If problems appear, engineers can quickly fix them without stopping the entire system.
Variables, Loops, and Making Decisions
Programs become powerful when they can remember things, repeat actions, and make choices. These three abilities — variables, loops, and conditionals — are the building blocks of ALL software:
# VARIABLES — the computer's memory name = "Priya" # Stores text (string) age = 12 # Stores a whole number (integer) height = 4.8 # Stores a decimal (float) likes_cricket = True # Stores True or False (boolean) # CONDITIONALS — making decisions if age >= 13: print(f"{name} is a teenager!") elif age >= 6: print(f"{name} is in school!") else: print(f"{name} is very young!") # LOOPS — repeating actions print(" Counting to 10:") for number in range(1, 11): if number % 2 == 0: print(f" {number} is EVEN") else: print(f" {number} is odd") # REAL-WORLD EXAMPLE: Calculate your cricket batting average scores = [45, 72, 0, 88, 23, 105, 34] total = sum(scores) innings = len(scores) average = total / innings print(f" Batting average: {average:.1f} runs per innings")
Notice how the code reads almost like English? That is Python's superpower — it was designed to be readable. The indentation (spacing) is not just for looks; Python REQUIRES it to know which code belongs inside an if block or a for loop. In India, Python is now taught from Class 6 in many CBSE schools as part of the NEP 2020 curriculum.
Real Story from India
Priya Orders Food Using UPI
Priya is a college student in Mumbai. It is 9 PM, she is hungry but broke until her salary arrives in 2 days. She opens Zomato, orders from her favorite restaurant, and pays using Google Pay (which uses UPI). The restaurant receives the order instantly. A delivery driver gets assigned. The restaurant cooks the food. Fifteen minutes later, it arrives at Priya's door still hot.
Behind this simple 15-minute experience is extraordinary engineering. The order was received by Zomato's servers, stored in databases, checked for inventory, forwarded to the restaurant's system, assigned to a driver using optimization algorithms, tracked in real-time, and processed through payment systems handling billions of rupees daily.
UPI (Unified Payments Interface) was built by NPCI (National Payments Corporation of India) — an organization founded by Indian banks. It handles more transactions per second than all Western payment systems combined. The software engineers who built UPI, Zomato, and Google Pay started where you are: learning computer science fundamentals.
India's startup ecosystem (Swiggy, Zomato, Flipkart, Razorpay) has created millions of jobs and changed how millions of Indians live. The engineers behind these companies earn ₹20-100+ LPA and solve problems affecting 1.4 billion people. This is the kind of impact computer science can have.
Inside the Tech Industry
Let me give you a glimpse of how web accessibility: making websites for everyone is applied in production systems at India's top tech companies. At Flipkart, during Big Billion Days, the system handles over 15,000 orders per SECOND. Every one of those orders involves inventory checks, payment processing, fraud detection, warehouse assignment, and delivery scheduling — all happening simultaneously in under 2 seconds. The engineering behind this is extraordinary.
At Razorpay, which processes payments for hundreds of thousands of businesses, the system must handle concurrent transactions while ensuring exactly-once processing (you cannot charge someone's card twice!). This requires distributed consensus algorithms, idempotency keys, and sophisticated error handling. When you see "Payment Successful" on your screen, dozens of systems have communicated, verified, and recorded the transaction in milliseconds.
Zomato's recommendation engine analyses your past orders, location, time of day, weather, and even what people similar to you are ordering to suggest restaurants. This involves machine learning models trained on billions of data points, real-time inference systems, and A/B testing frameworks that compare different recommendation strategies. The "For You" section on your Zomato app is the result of some seriously sophisticated computer science.
Even India's public infrastructure uses these concepts. IRCTC's Tatkal booking system handles millions of simultaneous users at 10 AM, requiring load balancing, queue management, and optimistic locking to prevent overbooking. The Delhi Metro's automated signalling system uses real-time algorithms to maintain safe distances between trains. Traffic management systems in cities like Bangalore and Pune use computer vision to analyse traffic density and optimise signal timings.
Quick Knowledge Check ✓
Challenge yourself with these questions:
Question 1: What are the main steps involved in web accessibility: making websites for everyone? Can you list them in order?
Answer: Check the "How It Works" section above. If you can recite the steps from memory, excellent!
Question 2: Why is web accessibility: making websites for everyone important in the context of Indian technology companies like Flipkart or UPI?
Answer: These companies rely on web accessibility: making websites for everyone to serve millions of users simultaneously and ensure reliability.
Question 3: If you were designing a system using web accessibility: making websites for everyone, what challenges would you need to solve?
Answer: Performance, reliability, maintainability, security — check these against what you learned in this chapter.
Key Vocabulary
Here are important terms from this chapter that you should know:
CSS: The language that makes websites look beautiful with colours and layouts
JavaScript: The language that makes websites interactive and dynamic
Server: A powerful computer that stores and serves websites to users
API: Application Programming Interface — how different software systems talk to each other
Database: An organised collection of data stored electronically
🔬 Experiment: Measure Algorithm Speed
Here is a practical experiment: write two Python programs — one that uses a list and one that uses a dictionary — to check if a word exists in a collection of 10,000 words. Time both programs. You will discover that the dictionary version is dramatically faster (O(1) vs O(n)). Now try it with 100,000 words, then 1,000,000. Watch how the difference grows exponentially. This single experiment will teach you more about data structures than reading a textbook chapter.
Connecting the Dots
Web Accessibility: Making Websites for Everyone does not exist in isolation — it connects to everything else in computer science. The concepts you learned here will show up again and again: in web development, in AI, in app building, in cybersecurity. Computer science is like a giant jigsaw puzzle, and each chapter you complete adds another piece. Some day, you will step back and see the complete picture — and it will be beautiful.
India is producing the next generation of global tech leaders. Students from IITs, NITs, IIIT Hyderabad, and BITS Pilani are founding companies, leading engineering teams at Google and Microsoft, and solving problems that affect billions of people. Your journey through these chapters is the same journey they started on. Keep building, keep experimenting, and most importantly, keep enjoying the process.
Crafted for Class 4–6 • AI & Machine Learning • Aligned with NEP 2020 & CBSE Curriculum
← Data Cleaning and Pandas: Preparing Data for Analysis Progressive Web Apps: Websites That Work Like Apps →
More in Grade 6
Logic and Boolean Thinking Introduction to Python: Hello, World!How Computers Store Pictures, Music, and Video Cybersecurity: Protecting Your Digital Life Machine Learning: Teaching Computers to See Patterns Neural Networks: How Computers Learn Like Brains Linux Command Line: Talking to Your Computer AI Ethics: Using AI Responsibly Web Scraping: Extracting Information from Websites Game Development: Creating Digital Worlds JavaScript Variables and Data Types JavaScript Functions and Events Debugging JavaScript: Console and Errors SQL Basics: Querying a Database APIs: How Apps Talk to Each Other Supervised vs Unsupervised Learning Natural Language Processing: How Computers Read Computer Vision: How Computers See AI and Climate Change: Green Technology Building Your First Website: Capstone Project Introduction to Python Variables How Neural Networks Learn Ethical AI - Who Decides?How Chandrayaan Used AI Chatbots - How They Talk Computer Vision Basics How Swiggy Routes Deliveries Data Privacy Laws in India Building a Quiz App Career Paths in Technology Understanding Arrays: Organizing Data Like a Locker Making Things Move: CSS Animations and Transitions Making Websites Work on All Screens: Responsive Design Python Dictionaries: Finding Information by Key Regular Expressions: Finding Patterns in Text Sorting Algorithms: Arranging Data in Order (Visualized)Graph Theory: Connections and Networks Inside Your Computer: How the CPU Works Operating Systems and Processes: Managing Your Computer How Computers Talk: Networking and TCP/IP Cloud Computing and AWS Basics: Computers in the Sky Docker and Containerization: Packaging Applications Version Control and Git: Tracking Code Changes Testing and Quality Assurance: Making Software Reliable Object-Oriented Programming: Organizing Code with Objects Event-Driven Programming: Responding to User Actions Data Cleaning and Pandas: Preparing Data for Analysis Progressive Web Apps: Websites That Work Like Apps Internet of Things: Sensors, Pi, and Connected Devices Advanced HTML5 - Semantic Structure HTML Forms and Input HTML Canvas Basics HTML Audio and Video Complete CSS Mastery CSS Flexbox CSS Grid Layout CSS Animations CSS Transitions Advanced Responsive Design CSS Media Queries Mobile CSS Best Practices Advanced JavaScript Fundamentals Advanced Functions and Scope Objects and Arrays Array Methods Object-Oriented Programming Intro Prototypes and Inheritance Callbacks and Promises Async and Await Fetch API and Making Requests Working with JSON Local Storage and Session Storage Building Web Applications Single Page Applications Introduction to React (or Vue)Components and Props State Management Handling Events in React Advanced Python Programming Object-Oriented Python Classes and Objects Inheritance and Polymorphism Exception Handling File Operations Working with Libraries Regular Expressions Web Scraping Basics Introduction to Flask Creating Web Applications with Python Database Integration with Python API Development Basics Introduction to Git and GitHub Version Control Concepts Branches and Merging Collaboration with Git Advanced Database Concepts Relational Databases NoSQL Databases Database Optimization Indexing and Queries Advanced Networking TCP/IP Protocols Network Security Firewalls and Proxies VPNs and Encryption Cybersecurity Deep Dive Authentication and Authorization SQL Injection and Prevention Cross-Site Scripting (XSS)CSRF Protection Digital Citizenship Advanced Online Reputation Management Cyberbullying Prevention Digital Wellness Social Media Literacy Misinformation and Fact-Checking Indian Technology Ecosystem Indian Startups Government Digital Initiatives

📱 Share on WhatsApp

Web Accessibility: Making Websites for Everyone

📋 Before You Start

`, `

Article Title