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
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
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
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
<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
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.
Abbr. Example
<p>
You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.
</p>
Abbr. Example
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>More Abbr. Examples
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
Web Accessibility Lesson 2
By makzan
