Fundamental of Web Content structure

Web Accessibility Lesson 2

Let’s get started!

Lesson 2

Headings and subheadings
Importance of title In web page
Semantic HTML
Title and purpose of links
Make content understandable
abbreviation

It’s all about content

Headings and

Sub-headings

Headings

SC 2.4.6 Headings and Labels (AA)
SC 2.4.10 Section Headings (AAA)

When h1 is missing

Reader 1

Reader 2

Using hgroup

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>

Using hgroup

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

<hgroup>
    <h1>Calculus I</h1>
    <h2>Fundamentals</h2>
</hgroup>

The <hgroup> element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away.
However, given that a key purpose of the <hgroup> element is to affect how headings are displayed by the outline algorithm defined in the HTML specification—but the HTML outline algorithm is not implemented in any browsers—then the <hgroup> semantics are in practice only theoretical.
So the HTML5 (W3C) specification provides advice on how to mark up Subheadings, subtitles, alternative titles and taglines without using <hgroup>.

Exercise Time

Try to inspect a website and see if the headings follows h1 to h6 rule.

{h/}

HeadingsMap

https://addons.mozilla.org/en-US/firefox/addon/headingsmap/

Importance of Title

Success Criterion 2.4.2 Page Titled (A)

Where are titles used?

Exercise Time

Try to find a website that title does not change across pages.

Semantic HTML

Which version of HTML?

Semantic HTML

HTML5

Semantic HTML

section
div
span
table
caption
thead
tbody

html
head
body
header
nav
main
article
aside
footer

ul
ol
dl
strong
em
b
i
a

Shortest Valid HTML5

<!doctype html>
<html lang=en>
<title>Saving money, saving bytes</title>

Minimal Valid HTML5

<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>Saving money, saving bytes</title>
<h1>A Demo</h1>
<p>More content goes here.</p>

Tags omission in HTML5

https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission

<head>

</head>

<body>

</body>

</html>

</li>

</dt>

</dd>

</p>

</option>

</tr>

</td>

</th>

Tags omission in HTML5

<!doctype html>
<html lang=en>
<title>A demo on tabular data</title>
<h1>A demo on tabular data</h1>
<table>
  <caption>Some fake data to demonstrate tabular data</caption>
  <thead>
    <tr> <th>Date           <th>Visitors    <th>Customers
  <tbody>
    <tr> <td>2020-09-01     <td>23          <td>12
    <tr> <td>2020-09-02     <td>34          <td>16
    <tr> <td>2020-09-03     <td>56          <td>19
    <tr> <td>2020-09-04     <td>14          <td>3
</table>

Defining Language

zh-Hant-HK

<html lang=en>

<!doctype html>
<html lang=en>
<title>A demo on html lang</title>

Exercise Time

Try to find a local website that has good/bad semantic structure.

Exercise Time

Try to find a local website that defines the lang correctly.

Purpose of Links

SC 2.4.4 Link purpose in context (A)

SC 2.4.9 Link purpose (link text only) (AAA)

2.4.4 (A)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

2.4.9 (AAA)

A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Link Purpose (Link Only)

Link Purpose (In Context)

Example

2. To download the PDF, please click here.

3. You may download the annual report in PDF format.

1. Download

Example

2. To download the PDF, please click here.

3. You may download the annual report in PDF format.

1. Download

Yes, it is about writing. Content is about writing and communication.

Observation Exercise

In your daily web browsing, do you often see links without enough description?

Make Content Understandable

Information Architecture
Meaningful Sequence
Consistent Navigation
Consistent Identification

UI Flow

<div class="row">
  <div class="small-6 columns">
    <h2>About</h2>
  </div>
  <div class="small-6 columns">
    <h2>Teams</h2>
  </div>
  <div class="small-6 columns">
    This is the content for about section
  </div>
  <div class="small-6 columns">
    This is the teams members.
  </div>
</div>

Bad flow

UI Flow

<main class="row">
  <section class="small-6 columns">
    <h2>About</h2>
    <p>This is the content for about section</p>
  </section>
  <section class="small-6 columns">
    <h2>Teams</h2>
    <p>This is the teams members.</p>
  </section>  
</main>

Good flow

Content Priority

Bad one: Layout > Content Priority

Content Priority

Good one: Using Flexbox order

Exercise Time

Find a website that provide good/bad content priority

Abbreviation and Unusual words

(AAA)

Abbr. Example

The WAI (Web Accessibility Initiative) demonstrates the W3C commitment to accessibility.

https://www.w3.org/WAI/WCAG21/Techniques/general/G97.html

Abbr. Example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<p>
  You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.
</p>

Abbr. Example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>

More Abbr. Examples

https://www.w3.org/WAI/WCAG21/Techniques/html/H28

Lesson 2

Headings and subheadings
Importance of title In web page
Semantic HTML
Title and purpose of links
Make content understandable
abbreviation

It’s all about content and structure