CSS Positioning, Flexbox, and Grid Layout, Accessibility

Janyl Jumadinova

February 8, 2025

CSS Layout Techniques

• CSS Positioning
• Flexbox
• Grid Layout

Positioning Methods in CSS

• Static: Default positioning
• Relative: Positioned relative to its normal position
• Absolute: Positioned relative to the nearest positioned ancestor
• Fixed: Stays in place even when scrolling

CSS Positioning - Example

Modify the position of elements with relative, absolute, and fixed values:

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

Flexbox Basics

Main axis vs. Cross axis

• justify-content: Align items along the main axis
• align-items: Align items along the cross axis

Flex properties: flex-grow, flex-shrink, flex-basis

Flexbox - Example Layout

Creating responsive layouts with Flexbox

.container {
  display: flex;
  justify-content: center;  // Centers items horizontally
  align-items: center;      // Centers items vertically
}

.item {
  flex: 1;                 // Makes items grow equally
}

Grid Layout vs Flexbox

• Grid: Use for two-dimensional layouts (rows and columns)
• Flexbox: Use for one-dimensional layouts (row or column)

Defining rows and columns:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Grid Layout - Example

Using grid-template-rows, grid-template-columns, and grid-gap:

.container {
  display: grid;
  grid-template-rows: 200px 1fr;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

Responsive Grid Layouts

Use media queries to adjust layouts dynamically:

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Why Accessibility Matters

• Accessibility ensures people with disabilities, can use the web.
• Benefits everyone, not just disabled users:
  • Captions help in noisy environments.
  • High contrast improves readability for all.
• Examples:
  • Low Contrast: Light gray text on a white background.
    
  • Accessible Contrast: Dark text on a light background.

WCAG Guidelines - Key Standards

Web Content Accessibility Guidelines (WCAG) Principles

1. Perceivable - users must be able to see/hear content.
   • Example: Provide alt text for images.
     
   • <img src="chart.png" alt="Bar chart showing revenue increase from 2020 to 2024">

Web Content Accessibility Guidelines (WCAG) Principles

2. Operable - site must work without a mouse.
   • Example: Users navigate menus with Tab/Enter.
     
   • <a href="contact.html" tabindex="0">Contact Us</a>

   • button:focus {
       outline: 2px solid blue;
     }

•   <a href="#main-content" class="skip-link">Skip to Main Content</a>

Web Content Accessibility Guidelines (WCAG) Principles

3. Understandable - content should be easy to read.
   • Example: Use clear labels, avoid jargon.

   <label for="email">Enter your email:</label>
   <input type="email" id="email" placeholder="you@example.com">

4. Robust - Content should work across different browsers, devices, and assistive technologies.
   • Example: Use semantic HTML elements so screen readers and future technologies can interpret content correctly.
     

   <button type="submit">Submit</button>

Running an Accessibility Audit

• Tools:
  • 🛠 Lighthouse (Chrome DevTools)
  • 🔍 WAVE (Browser extension)
• How to Run Lighthouse:
  1. Open Chrome DevTools (Right-click -> Inspect -> Lighthouse tab).
  2. Run an Accessibility audit.
  3. Identify errors and warnings (e.g., missing alt text).
• Use WAVE for a visual check of accessibility issues.

Contrast

• Users with color blindness or low vision need high-contrast text.
• WCAG recommends at least 4.5:1 contrast ratio for text.

Can use WebAIM’s Contrast Checker to check contrast ratios.