1.4: Web Standards and W3C

1. What Are Web Standards?

Web standards are technical specifications that define how web technologies should work. They ensure that websites work consistently across different browsers and devices.

Why Web Standards Matter

Without standards:

Website works in Chrome ✅
Website broken in Firefox ❌
Website broken on mobile ❌
Website unusable with screen reader ❌

With standards:

Website works everywhere ✅
Consistent user experience ✅
Accessible to all users ✅
Future-proof code ✅

Core Web Standards

1. HTML - Structure and content
2. CSS - Presentation and styling
3. JavaScript - Behavior and interactivity
4. HTTP - Communication protocol
5. DOM - Document object model
6. Accessibility - WCAG guidelines

2. W3C (World Wide Web Consortium)

What is W3C?

The W3C is the main international standards organization for the World Wide Web.

Founded: 1994 Founder: Tim Berners-Lee (inventor of the Web) Mission: "Lead the Web to its full potential"

W3C's Role

• Develops standards (HTML, CSS, etc.)
• Provides guidelines for web development
• Promotes accessibility (WCAG)
• Ensures interoperability across browsers
• Publishes specifications for web technologies

W3C Standards Process

1. Working Draft (WD) ← Initial proposal
         ↓
2. Candidate Recommendation (CR) ← Testing phase
         ↓
3. Proposed Recommendation (PR) ← Final review
         ↓
4. W3C Recommendation (REC) ← Official standard

Other Standards Bodies

• WHATWG - HTML Living Standard
• ECMA International - JavaScript (ECMAScript)
• IETF - Internet protocols (HTTP, TLS)
• Unicode Consortium - Character encoding

3. Browser Compatibility

The Browser Landscape

Major Browsers (2025):

• Chrome - 65% market share (Chromium/Blink)
• Safari - 20% market share (WebKit)
• Edge - 5% market share (Chromium/Blink)
• Firefox - 3% market share (Gecko)
• Others - 7% (Opera, Brave, etc.)

Browser Engines

Same engine → Usually similar behavior Different engines → May have differences

Compatibility Issues

Common Problems:

1. Feature Support

   // Not all browsers support optional chaining (older browsers)
   const name = user?.profile?.name  // May fail in IE11
   

2. CSS Differences

   /* Different rendering in older browsers */
   display: grid;  /* Not supported in IE10 */
   

3. Vendor Prefixes

   /* Need prefixes for some CSS features */
   -webkit-transform: rotate(45deg);  /* Safari, Chrome */
   -moz-transform: rotate(45deg);     /* Firefox */
   -ms-transform: rotate(45deg);      /* IE */
   transform: rotate(45deg);          /* Standard */
   

Checking Browser Support

Can I Use (https://caniuse.com)

Example: Search "CSS Grid"

✅ Chrome 57+    (March 2017)
✅ Firefox 52+   (March 2017)
✅ Safari 10.1+  (March 2017)
✅ Edge 16+      (October 2017)
❌ IE 11         (Not supported)

4. Progressive Enhancement

The Strategy

Start with a basic experience that works everywhere, then enhance for modern browsers.

Level 1: Basic HTML (works everywhere)
    ↓
Level 2: + CSS (enhanced visual design)
    ↓
Level 3: + JavaScript (interactive features)
    ↓
Level 4: + Modern APIs (advanced features)

Example: Form Enhancement

Level 1: Basic HTML Form

<form method="POST" action="/submit">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

✅ Works without CSS or JavaScript

Level 2: + CSS Styling

form {
  max-width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
}
input {
  width: 100%;
  padding: 10px;
}

✅ Looks better, still functions without it

Level 3: + JavaScript Validation

form.addEventListener('submit', (e) => {
  if (!email.value.includes('@')) {
    e.preventDefault()
    alert('Please enter a valid email')
  }
})

✅ Enhanced UX, falls back to HTML5 validation

Level 4: + Modern Features

// Use Fetch API for AJAX submission (if supported)
if ('fetch' in window) {
  // Enhanced AJAX submission
} else {
  // Falls back to standard form submission
}

Feature Detection

Don't assume browsers support features:

// ❌ Bad: Assuming feature exists
localStorage.setItem('key', 'value')

Do check before using:

// ✅ Good: Check if feature exists
if ('localStorage' in window) {
  localStorage.setItem('key', 'value')
} else {
  // Fallback: use cookies or ignore
}

Modernizr Library (feature detection):

if (Modernizr.flexbox) {
  // Use Flexbox
} else {
  // Use floats or other layout method
}

5. Code Validation

Why Validate?

• Catch errors early
• Ensure browser compatibility
• Improve SEO
• Better accessibility
• Professional code quality

HTML Validation

W3C Markup Validation Servicehttps://validator.w3.org/

Common HTML Errors:

<!-- ❌ Unclosed tag -->
<p>Hello
<p>World</p>

<!-- ✅ Properly closed -->
<p>Hello</p>
<p>World</p>

<!-- ❌ Missing alt attribute -->
<img src="photo.jpg">

<!-- ✅ With alt text -->
<img src="photo.jpg" alt="Description">

<!-- ❌ Incorrect nesting -->
<p><div>Content</div></p>

<!-- ✅ Correct nesting -->
<div><p>Content</p></div>

CSS Validation

W3C CSS Validation Servicehttps://jigsaw.w3.org/css-validator/

Common CSS Errors:

/* ❌ Missing semicolon */
color: red
background: blue;

/* ✅ Proper syntax */
color: red;
background: blue;

/* ❌ Invalid property value */
display: flexbox;  /* Should be 'flex' */

/* ✅ Correct value */
display: flex;

Browser DevTools Validation

Modern browsers show warnings:

Console warnings:
⚠️ <img> element missing alt attribute
⚠️ Unknown CSS property: -webkit-appearance
ℹ️ Cookie will be rejected (SameSite attribute missing)

6. Web Accessibility (WCAG)

What is Accessibility?

Web accessibility means websites are usable by everyone, including people with disabilities.

Types of Disabilities

1. Visual - Blind, low vision, color blind
2. Auditory - Deaf, hard of hearing
3. Motor - Limited hand movement, tremors
4. Cognitive - Dyslexia, ADHD, autism

WCAG (Web Content Accessibility Guidelines)

Four Principles (POUR):

1. Perceivable - Content must be perceivable
   • Text alternatives for images
   • Captions for videos
   • Content distinguishable (color contrast)
2. Operable - UI must be operable
   • Keyboard accessible
   • Enough time to read
   • No seizure-inducing content
3. Understandable - Content must be understandable
   • Readable text
   • Predictable behavior
   • Input assistance
4. Robust - Compatible with assistive technologies
   • Valid HTML
   • Works with screen readers

WCAG Conformance Levels

• Level A - Minimum (basic accessibility)
• Level AA - Mid-range (recommended)
• Level AAA - Highest (optimal)

Most organizations aim for Level AA.

Accessibility Best Practices

1. Semantic HTML

<!-- ❌ Non-semantic -->
<div class="heading">Title</div>
<div class="navigation">...</div>

<!-- ✅ Semantic -->
<h1>Title</h1>
<nav>...</nav>

2. Alt Text for Images

<!-- ❌ Missing alt -->
<img src="logo.png">

<!-- ✅ Descriptive alt -->
<img src="logo.png" alt="Company Logo">

<!-- ✅ Decorative image (empty alt) -->
<img src="decoration.png" alt="">

3. Keyboard Navigation

<!-- ❌ Not keyboard accessible -->
<div onclick="doSomething()">Click me</div>

<!-- ✅ Keyboard accessible -->
<button onclick="doSomething()">Click me</button>

4. Color Contrast

/* ❌ Poor contrast (light gray on white) */
color: #ccc;
background: #fff;

/* ✅ Good contrast (dark text on white) */
color: #333;
background: #fff;

5. Form Labels

<!-- ❌ No label -->
<input type="text" placeholder="Name">

<!-- ✅ Proper label -->
<label for="name">Name</label>
<input type="text" id="name">

6. ARIA Attributes

<!-- Enhanced accessibility -->
<button aria-label="Close dialog">X</button>
<nav aria-label="Main navigation">...</nav>
<div role="alert" aria-live="polite">Message sent!</div>

Testing Accessibility

Tools:

• Lighthouse (Chrome DevTools)
• axe DevTools (browser extension)
• WAVE (Web Accessibility Evaluation Tool)
• Screen readers (NVDA, JAWS, VoiceOver)

Manual Tests:

1. Navigate using only keyboard (Tab key)
2. Check color contrast
3. Resize text to 200%
4. Use screen reader
5. Turn off CSS and check structure

7. Practical Exercises

Exercise 1.4.1: Validate HTML

1. Create an HTML file with intentional errors:

<!DOCTYPE html>
<html>
<head>
  <title>Test Page
</head>
<body>
  <h1>Welcome
  <p>This is a <div>paragraph</div></p>
  <img src="test.jpg">
</body>
</html>

2. Validate at https://validator.w3.org/
3. Fix all errors
4. Re-validate until clean

Exercise 1.4.2: Check Browser Compatibility

1. Go to https://caniuse.com
2. Search for these features:
   • CSS Grid
   • Flexbox
   • Fetch API
   • LocalStorage
   • CSS Variables
3. Note which browsers support each feature

Exercise 1.4.3: Test Accessibility

1. Open any website
2. Run Lighthouse audit (Performance → Accessibility)
3. Note the score and issues
4. Try navigating with keyboard only (Tab key)
5. Can you access all interactive elements?

Exercise 1.4.4: Progressive Enhancement

Create a button with progressive enhancement:

<!-- Level 1: Works without JS -->
<a href="/page2.html" class="button">Next Page</a>

<!-- Level 2: + CSS -->
<style>
.button {
  display: inline-block;
  padding: 10px 20px;
  background: blue;
  color: white;
  text-decoration: none;
}
</style>

<!-- Level 3: + JS Enhancement -->
<script>
document.querySelector('.button').addEventListener('click', (e) => {
  // Enhanced: Load content via AJAX
  if ('fetch' in window) {
    e.preventDefault()
    loadContentAjax()
  }
  // Falls back to normal link if JS fails
})
</script>

8. Knowledge Check

Question 1: What does W3C stand for?

Question 2: What are the four WCAG principles (POUR)?

Question 3: What is progressive enhancement?

Question 4: Why is semantic HTML important for accessibility?

Question 5: What's the minimum WCAG level most organizations aim for?

9. Key Takeaways

✅ Web standards ensure consistency across browsers and devices ✅ W3C is the main standards organization for the Web ✅ Browser compatibility varies - always check caniuse.com ✅ Progressive enhancement ensures basic functionality for all ✅ Feature detection is better than browser detection ✅ Validation catches errors and improves code quality ✅ WCAG provides accessibility guidelines (aim for Level AA) ✅ Semantic HTML is crucial for accessibility ✅ Testing with real users and assistive technologies is important

10. Further Resources

Standards & Specifications:

• W3C Standards
• WHATWG HTML Living Standard
• MDN Web Docs

Compatibility:

• Can I Use
• MDN Browser Compatibility Data

Validation:

• W3C HTML Validator
• W3C CSS Validator

Accessibility:

• WCAG Guidelines
• WebAIM
• A11y Project

Next Steps

Great work! You now understand web standards, browser compatibility, and accessibility fundamentals.

In Lesson 1.5: Setting Up Your Development Environment, you'll learn to configure VS Code, set up a local server, and use essential development tools.