Skip to content

Commit

Permalink
Merge pull request #3295 from w3c/patrickhlauke-issue3291-2.4.6-under…
Browse files Browse the repository at this point in the history 
…standing

Tweak 2.4.6 Headings and Labels understanding
  • Loading branch information
@alastc
alastc authored Aug 30, 2023
2 parents 795a9bc + b390f0d commit cd9a7de
Showing 1 changed file with 29 additions and 56 deletions.
85 changes: 29 additions & 56 deletions understanding/20/headings-and-labels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,13 @@
<h1>Understanding Headings and Labels</h1>

<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Objective</dt><dd>A page's content is described in headings and labels</dd>
<dt>Author task</dt><dd>Provide descriptive headings and labels</dd>

</dl>

</section>

<h2>In brief</h2>
<dl>
<dt>Objective</dt><dd>A page's content is described in headings and labels</dd>
<dt>Author task</dt><dd>Provide descriptive headings and labels</dd>
</dl>
</section>

<section id="intent">
<h2>Intent of Headings and Labels</h2>

Expand All @@ -35,7 +33,7 @@ <h2>Intent of Headings and Labels</h2>
<p>This Success Criterion does not require headings or labels. This Success Criterion
requires that if headings or labels are provided, they be descriptive. This Success Criterion also
does not require that content acting as a heading or label be correctly marked up or
identified - this aspect is covered separately by
identified – this aspect is covered separately by
<a href="info-and-relationships">1.3.1: Info and Relationships</a>. It is possible for content
to pass this Success Criterion (providing descriptive content that acts as headings or labels) while failing
Success Criterion 1.3.1 (if the headings or labels aren't correctly marked up/identified). Conversely,
Expand All @@ -45,8 +43,8 @@ <h2>Intent of Headings and Labels</h2>
</p>
<p>Further, in the case of labels, this Success Criterion does not take into consideration whether or not
alternative methods of providing an accessible name for form controls and inputs has been
used - this aspect is covered separately by <a href="name-role-value">4.1.2: Name, Role and Value</a>. It is possible
for controls and inputs to have an appropriate accessible name (e.g. using <code>aria-label="..."</code>)
used – this aspect is covered separately by <a href="name-role-value">4.1.2: Name, Role and Value</a>. It is possible
for controls and inputs to have an appropriate accessible name (e.g. using <code>aria-label="…"</code>)
and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the label is not
sufficiently clear or descriptive).
</p>
Expand All @@ -58,21 +56,16 @@ <h2>Intent of Headings and Labels</h2>
<h2>Benefits of Headings and Labels</h2>

<ul>

<li>Descriptive headings are especially helpful for users who have disabilities that make
reading slow and for people with limited short-term memory. These people benefit when
section titles make it possible to predict what each section contains.
</li>

section titles make it possible to predict what each section contains.</li>
<li>Form input controls with labels that clearly describe the content that is expected to be
entered helps users know how to successfully complete the form.</li>

<li>When headings and labels are also correctly marked up and identified in accordance with
<a href="info-and-relationships">1.3.1: Info and Relationships</a>, this Success Criterion
helps people who use screen readers by ensuring that labels and headings are meaningful when
read out of context, for example, in an automatically generated list of headings/table of contents,
or when jumping from heading to heading within a page.</li>

helps people who use screen readers by ensuring that labels and headings are clearer when
presented in a different format – for example, in an automatically generated list of
headings, a table of contents, or when jumping from heading to heading within a page.</li>
</ul>

</section>
Expand All @@ -85,78 +78,59 @@ <h2>Examples of Headings and Labels</h2>
<dd>The home page of a news site lists the headlines for the top stories of the hour.
Under each heading are the first 35 words of the story and a link to the full article.
Each headline gives a clear idea of the article's subject.</dd>

<dt>A guide on how to write well</dt>
<dd>A guide on writing contains the following section titles: How To Write Well, Cut
Out Useless Words, Identify Unnecessary Words, etc. The section headings are clear
and concise and the structure of the information is reflected in the structure of
the headings.</dd>
<dd>A guide on writing contains the following section titles: <q>How To Write Well</q>,
<q>Cut Out Useless Words</q>, <q>Identify Unnecessary Words</q>, and so on.
The section headings are clear and concise and the structure of the information is
reflected in the structure of the headings.</dd>
<dt>Consistent headings in different articles</dt>
<dd>A Web site contains papers from a conference. Submissions to the conference are required
to have the following organization: Summary, Introduction, [other sections unique
to this article], Conclusion, Author Biography, Glossary, and Bibliography. The title
of each Web page clearly identifies the article it contains, creating a useful balance
to have the following organization: <q>Summary</q>, <q>Introduction</q>, [other sections unique
to this article], <q>Conclusion</q>, <q>Author Biography</q>, <q>Glossary</q>, and <q>Bibliography</q>.
The title of each Web page clearly identifies the article it contains, creating a useful balance
between the uniqueness of the articles and the consistency of the section headings.</dd>
<dt>A form asking the name of the user</dt>
<dd>A form asks the name of the user. It consists of two input fields to ask for the first
and last name. The first field is labeled "First name", the second is labeled "Last
name".</dd>
<dt>A form asking for the name of the user</dt>
<dd>A form asks for the name of the user. It consists of two input fields to ask for the first
and last name. The first field is labeled <q>First name</q>, the second is labeled <q>Last name</q>.</dd>
</dl>

</section>

<section id="resources">
<h2>Resources for Headings and Labels</h2>



<ul>

<li>

<a href="https://www.nngroup.com/articles/how-users-read-on-the-web/">How Users Read on the Web</a> A study showing that most users scan Web pages rather than reading them word by word.
</li>

<li>

<a href="https://www.nngroup.com/articles/applying-writing-guidelines-web-pages/">Applying Writing Guidelines to Web Pages</a> A report on the effects of making Web sites concise, easy to scan, and objective.

</li>

</ul>

</section>

<section id="techniques">
<h2>Techniques for Headings and Labels</h2>


<section id="sufficient">
<h3>Sufficient Techniques for Headings and Labels</h3>


<ul>

<ol>
<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G130" class="general">Providing descriptive headings</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G131" class="general">Providing descriptive labels</a>

</li>
</ul>
</ol>


<div class="note">

<p>
Headings and labels must be programmatically determined, per
<a href="info-and-relationships" class="guideline">Success Criterion 1.3.1

</a>.
<a href="info-and-relationships" class="guideline">Success Criterion 1.3.1</a>.
</p>

</div>
Expand All @@ -171,7 +145,6 @@ <h3>Additional Techniques (Advisory) for Headings and Labels</h3>
<section id="failure">
<h3>Failures for Headings and Labels</h3>


</section>

</section>
Expand Down

0 comments on commit cd9a7de

Please sign in to comment.