Question

我工作的公司最近委托外部网页设计/开发机构重新开发他们的网站。该机构提供的HTML不按顺序使用标题和/或完全错过某些标题级别。

我创建了以下模型来说明：

产品页面：
产品搜索结果：

当一位同事向公司提出此问题时，他们表示这是可以接受的，因为只需要在标准内容页面的主要内容区域中按顺序使用标题来构建文本。

我的理解是，出于可访问性原因，应使用标题将结构应用于整个网页。因此，公司在上述模型中使用标题的方式是不正确的。

在这方面有专业知识的人是否可以回复帮助提供这种情况的清晰度？

以下是搜索结果页的相关HTML。

<main class="inner">

    <div class="content-container-del">

        <aside class="content-aside col-xs-16 col-md-4">

            <div class="accordion-small-container">
                <h5>Refine by:</h5>

                <dl class="accordion--small">
                    <dt class="js-accordion-dt active">Level</dt>
                    <dd class="js-accordion-dd active">

                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox" class="checkbox" value="check" name="checkboxes" type="checkbox">
                                <label for="checkbox">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_3" class="checkbox" value="check_3" name="checkboxes" type="checkbox">
                                <label for="checkbox_3">Checkbox</label>
                            </div>

                        </div>
                    </dd>

                    <dt class="js-accordion-dt">Subject</dt>
                    <dd style="display: none;" class="js-accordion-dd">
                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_5" class="checkbox" value="check_5" name="checkboxes" type="checkbox">
                                <label for="checkbox_5">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_4" class="checkbox" value="check_4" name="checkboxes" type="checkbox">
                                <label for="checkbox_4">Checkbox</label>
                            </div>
                        </div>
                    </dd>
                </dl>

                <button type="button" class="btn-arrow">Apply Filters</button>
            </div>

        </aside>

        <article class="col-xs-16 col-md-12">
            <div class="general-search-header purple">
                <h3 class="general-search-header__title">Product Search</h3>

                <div class="search-box--general-search">
                    <label class="hidden" aria-hidden="true" for="search-box__input-text">Search:</label>
                    <input id="search-box__input-text" class="search-box__input-text" placeholder="Search term..." type="text">

                    <div class="search-box__label icon-search">
                        <input aria-hidden="true" id="search-box__submit" class="search-box__submit" value="Submit" type="submit">
                    </div>
                </div>

            </div>

            <div class="col-md-15 col-md-push-1">



                <ul class="search-result-list purple">
                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 1</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>

                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 2</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>
                </ul>

                <ul class="pagination purple">
    <li class="pagination__item">
        <a href="" class="pagination__link prev">«</a>
    </li>

    <li class="pagination__item active">
        <a href="" class="pagination__link">1</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">2</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">3</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">4</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">...</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">10</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link next">»</a>
    </li>
</ul>
            </div>
        </article>

    </div>
    <!-- end: content-container -->

</main>

这是产品页面的相关HTML。

<main class="inner">

    <div class="page-intro row">
    <div class="page-intro__left-column col-xs-16 col-md-8">

        <h1 class="page-intro__title">Product Title</h1>
        <h4 class="page-intro__sub-title">Product sub-heading</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsam quia, explicabo commodi quaerat modi saepe corporis numquam autem quod deserunt, harum assumenda ratione dolorum laboriosam qui aliquam hic vel adipisci aut voluptates in! Modi commodi dolores laboriosam ad incidunt.</p>

    </div>

    <div class="col-xs-16 col-md-8">

        <div class="page-intro__media--link" style="background-image: url('http://placehold.it/730x430');">
            <a href="" class="page-intro__media--link-href">
                <span class="page-intro__media--link__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
            </a>
        </div>


    </div>
</div>


    <div id="course-description" class="course-description row">

        <div class="col-md-11">
            <div class="course-description__left-column">
                <h2 class="sub-title">Product Description</h2>

                <div class="js-readmore-container js-readmore-active">
                    <div style="height: 400px;" class="content-inner js-block-height" data-height="400">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde vel et, exercitationem laudantium numquam totam mollitia fuga neque ea laborum eum, deleniti omnis veritatis repellat porro minus recusandae earum, animi.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat ea reiciendis iste, dignissimos ex accusantium maiores magnam neque! Vero explicabo quo nostrum autem tenetur delectus suscipit, atque ut dicta facilis temporibus maxime eius minima, odit quidem consectetur quibusdam. Cum eligendi repudiandae, ea odit, exercitationem veritatis ab soluta vitae iste.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nesciunt expedita, fugiat, delectus commodi, distinctio exercitationem, maiores natus nobis cumque sequi. Eaque rem iste neque minima! Quod, ullam dolorum aliquid voluptas maxime hic voluptatibus provident officia. Eveniet maxime laborum laudantium, dicta. Omnis debitis, excepturi cum perferendis pariatur consequuntur error. Id labore, excepturi natus reiciendis eveniet iusto impedit rerum, itaque eos. Aliquid obcaecati aut quasi dolorum facilis dignissimos, consequuntur minima fugiat quaerat placeat earum adipisci totam perspiciatis, laboriosam, sint in! Provident temporibus hic aperiam, magnam rerum quidem, sequi eaque ipsa, dolorum fuga veritatis cumque! Delectus, rem, officiis? Voluptatibus, est quibusdam?</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aut molestias, facere dicta natus ipsum velit rerum repellat, necessitatibus itaque possimus harum. Repellendus delectus, hic eum itaque ipsa, quaerat adipisci neque ipsum a totam perspiciatis tenetur architecto sed repellat at.</p>
                    </div>

                    <button class="show-more js-show-more" type="button">Show More</button>
                </div>
            </div>

        </div>

    </div>

    <div class="course-block row">
        <h2 class="sub-title">Why choose Company X?</h2>
        <div class="boxed-panel--green">
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet</h4>
            </section>
        </div>
    </div>

</main>

Answer 1

每个分区元素（例如article，section和aside都可以启动新的标题层次结构。每个分区元素的主标题可以是h1。 @Quentin是对的，因为最好避免这种情况。

选择标题杆是完全错误的，其大小如图所示。将类添加到元素中并替换它们。

产品页面

<h1>和<h2>是正确的。

<h4>我认为产品子标题更适合作为<strong>元素。

<h4>块可能不应该是标题。相反，我认为<p>与font-weight: bold;在语义上会更正确。

产品搜索结果

<h3>产品搜索应为<h1>

<h4>搜索结果应为<h2>

我认为搜索结果页上的<h5>过滤器标题不应该是标题，而应该是<legend>内的<form>标题。

Answer 2

HTML5规范允许标题级别按照他们的方式构建，但使用辅助技术的人会因产品页面上使用H4而感到困惑（没有一个真正标题内容），尤其是由搜索结果页面上缺少的H1和H2。在H3和H2含量之前放置的H5是不寻常但可以理解的。我可能会将H3设为H1，其他所有设置为H2，但您可以将过滤器标题设为H3。 WCAG2规范更关注内容是否可以理解，而不是遵循HTML5规范。

屏幕阅读器和盲文阅读器用户经常使用键盘快捷键为其列出标题，并使用它来了解页面的结构。他们还可以跳到他们感兴趣的标题，从而更容易浏览长页面（这在搜索结果页面上特别有用）。 HTML5文档大纲方法的浏览器或设备支持非常少，其中article / section / etc旨在提供无序或缺少标题的上下文。

因此，该机构在技术上是正确的但在实践中是错误的，并且将导致大约8％依赖标题的用户存在许多不必要的混淆，认为他们错过了大量内容或者迷失了。这可能听起来不多，但我打赌你支持一个旧观看者，观众中的用户较少：）

编辑添加：关于HTML5 outline method的详尽文章，其中指出尚未实现标题级别 - 任意位置方法的浏览器实现。并且警告W3C没有实施。他们对标题的描述（在该链接上向上滚动）也表示你不应该像你的代理商在产品页面上那样使用H1-6作为字幕等。

Answer 3

尽管HTML5有效，但它不具备辅助功能。

以下是WCAG技术的一些引用：

<强> G141: Organizing a page using headings

为了便于导航和理解整体文档结构，作者应使用正确嵌套的标题（例如，h1后跟h2，h2后跟h2或h3，h3后跟h3或h4，等）。

<强> H42: Using h1-h6 to identify headings

请务必注意，下面的示例代码并非旨在规定网页特定部分应使用的标题级别。在该示例中，可以使用相同逻辑级别（例如h1）的每列中的第一个标题来呈现布局，或者如示例中所示，其中逻辑级别反映其相对于主要的重要性内容

在你的情况下：

第一个屏幕截图：h4用于字幕和文本段落。不是标题。坏。请参阅“F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content”

第二个屏幕截图：

逻辑级别未反映其与主要内容相关的重要性：当h5用于主要内容时，“过滤器”的h3。

过滤器显然是“产品搜索”页面的子部分，而不是aside部分。它应该出现在页面标题之后，在源代码中，并且在逻辑上具有较低级别（或根本没有级别，因为这只是表单的一部分）。

tl; dr：关于辅助功能，您必须列出标题层次结构，以确定它是否一致。

Answer 4

我的理解是，出于无障碍原因

快速搜索，我发现这个link that quotes W3C规范及其归结为每个<section>可以启动一个新的标头标签层次结构。但是，heirarchy不需要从<h1>开始并继续向下，如果您想要这样做，它可以从<h3>开始。关于辅助技术的最佳的链接页面有一个简短的部分，它在很大程度上是主观的。

您也可以自己阅读W3C规范并了解如何解读它。我会问“这很重要吗？”您是否有任何需要纯粹语义布局的用户（如辅助技术所建议的那样），因为不是每个网站都有。如果你确实有用户有辅助需求，你的公司是否在他们正在进行的开发规范中明确说明，因为这是一项额外的工作和测试。屏幕阅读器可以免费，但也存在许多付费阅读器。

简短回答，基于我所看到的，模型中的标题标签显示为有效的html。

不按顺序使用HTML标题

4 个答案:

产品页面

产品搜索结果