Accessibility & Multi-Screen Design
Page Structure

Eric Eggert, outline

Accessibility &
Multi-Screen Design Page Structure

Disclaimer
This course is not a W3C course.
Views expressed are my own.
Dies ist kein W3C-Kurs.
Alle Ansichten sind meine Eigenen.

What is Page Structure?

Proper structure …

Why is this important? 1

Why is this important? 2

Why is this important? 3

Overview

Exkurs HTML (Sorry!)

Lingua Franca

Sir Tim Berners-Lee

“Sir Tim Berners-Lee” by Paul Clarke — Own work. Licensed under CC BY-SA 4.0 via Wikimedia Commons.

What is HTML?

Web browsers can read HTML files and render them into visible or audible web pages. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.

Wikipedia

<a href="http://fh-joanneum.at">FH Joanneum</a> Element Start Tag End Tag Attribute Value Content

A Time Line 1

A Time Line 1

A HTML file

<!DOCTYPE html> <!-- document type -->
<html lang="en"> <!-- root element w/ language -->
  <head>
    <meta charset="UTF-8">  <!-- character set -->
    <title>My awesome website</title>  <!-- title -->
  </head>
  <body>
    … <!-- actual content of the page -->
  </body>
</html>

Ende Exkurs HTML

Page Structure

Learn about:

Page Regions

Overall page regions

Page Header

<header>
  <img src="/images/logo.png" alt="SpaceBear Inc.">
</header>

WAI-ARIA Accessible Rich Internet Applications

WAI-ARIA

… defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

WAI-ARIA

… helps to tell the browser what he has to tell the Accessibility APIs of the OS.

Example 1: The <aside> element has a default role of complementary.

Example 2: The <div aria-label="Sidebar" role="complementary"> has an accessible name of Sidebar and a role of complementary.

Page Footer

<footer>
  <p>&copy; 2014 SpaceBears Inc.</p>
</footer>

Navigation 1

Navigation 2

<nav aria-label="Main Navigation">
  …
</nav>
…
<nav aria-labelledby="quicknav-heading">
  <h5 id="quicknav-heading">
      Quick Navigation
  </h5>
  …
</nav>

Main Content

<main>
  <h1>Stellar launch weekend for the SpaceBear 7!</h1>
  …
</main>

Complementary content

<aside>
  <h3>Related Articles</h3>
  …
</aside>

Search tool

<form action="…">
  <div role="search">
    <input type="search" aria-label="Search">
    <button type="submit">Search</button>
  </div>
</form>

In-page regions

Sections

<section>
  <h2>Chapter 2</h2>
  …
</section>

Articles 1

Articles 2

<article>
  <h2>Space Bear Classic</h2>
  …
</article>
<article>
  <h2>Space Bear Extrem</h2>
  …
</article>

Headings

Heading structure in content

<h1>An inside look at the new SpaceBear 8™</h1>
  <h2>Cotton Fur</h2>
  <h2>Sapphire Eyes</h2>
  <h2>Synthetic Felt Paws</h2>

Heading structure to organize sections 1

<h1>SpaceTeddy Inc.</h1>
  <h2>Navigation</h2>
  <h2>Sidebar</h2>
    <h3>More news</h3>
    <h3>What our clients say</h3>
    <h3>Ratings</h3>
  <h2>An inside look at the new SpaceBear 8™</h2>
    <h3>Cotton Fur</h3>
    <h3>Saphire Eyes</h3>
    <h3>Syntetic Felt Paws</h3>
  <h2>Footer</h2>
    <h3>About the company</h3>
    <h3>Our retail stores</h3>

Heading structure to organize sections 2

  <h2>Navigation</h2>
  <h2>Sidebar</h2>
    <h3>More news</h3>
    <h3>What our clients say</h3>
    <h3>Ratings</h3>
<h1>An inside look at the new SpaceBear 8™</h1>
  <h2>Cotton Fur</h2>
  <h2>Saphire Eyes</h2>
  <h2>Syntetic Felt Paws</h2>
  <h2>Footer</h2>
    <h3>About the company</h3>
    <h3>Our retail stores</h3>

Content Structure

<p>

Add rhythm and lightness to content using paragraph element (<p>). Consistent styling of paragraphs improves text readability. Paragraph styling can be altered by applying user stylesheets that adapt for specific needs.

Lists: Unordered

<ul>
  <li>Corn</li>
  <li>Tomatoes</li>
  <li>Beans</li>
  <li>Onions</li>
  <li>Garlic</li>
  &hellip;
</ul>

Lists: Ordered 1

  1. Cook beans for 45 minutes.
  2. Cut vegetables in small cubes.
  3. Sauté onions and garlic.
  4. Deglaze using the tomatoes.
  5. Add corn and beans.

Lists: Ordered 2

<ol>
  <li>Cook beans for 45 minutes.</li>
  <li>Cut vegetables in small cubes.</li>
  <li>Sauté onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
</ol>

Lists: Nested 1

  1. Prepare ingredients
    • Cook beans for 45 minutes.
    • Cut vegetables in small cubes.
  2. Sauté onions and garlic.
  3. Deglaze using the tomatoes.
  4. Add corn and beans.

Lists: Nested 2

<ol>
  <li>Prepare ingredients
    <ul>
      <li>Cook beans for 45 minutes.</li>
      <li>Cut vegetables in small cubes.</li>
    </ul>
  </li>
  <li>Sauté onions and garlic.</li>
  <li>Deglaze using the tomatoes.</li>
  <li>Add corn and beans.</li>
</ol>

Quotes 1

This is a blockquote! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is some text and then there is an inline quote from a famous person.

Quotes 2

<blockquote>
  <p>…</p><p>…</p>
</blockquote>
<p>This is some text and then there is
  <q>an inline quote</q> from a famous person.</p>

Figures 1

Figures associate captions with lists, images, tables, and other content. For example an annual report could reference to a diagram containing the sales volumes of a product. Related content is wrapped in a <figure> element, a <figcaption> element is added to describe the content.

Figures 2

<figure role="group" aria-labelledby="fig-t3-capt">
  <figcaption id="fig-t3-capt">G3: SpaceBear sales volume
  </figcaption>
  <img src="…"
    alt="SpaceBear sales diagram,
         showing the huge success in Q4"
    longdesc="…">
  <a href="…">Long Description</a>
</figure>

Styling

Styling

In-page navigation

In-page navigation

We will talk about navigation on Friday…

fin.