Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change mapping of h1-h6 and hgroup #123

Closed
annevk opened this issue Feb 23, 2018 · 4 comments · Fixed by #398
Closed

Change mapping of h1-h6 and hgroup #123

annevk opened this issue Feb 23, 2018 · 4 comments · Fixed by #398

Comments

@annevk
Copy link
Member

annevk commented Feb 23, 2018

Provided implementers are on board with whatwg/html#3499 as a way of fixing whatwg/html#83 (comment), the mappings for these elements will need to change as well. This should be rather easy to do for these elements on top of the "heading level" concept they will get once that PR lands.

I figured I'd raise this somewhat early so a) we don't forget about it and b) I might be able to get more feedback this way.

@stevefaulkner
Copy link
Contributor

@annevk I have the same reservations about supporting the implementation of this as I have always had and agree with much of what @sideshowbarker says in whatwg/html#3499 (comment) and subsequent comments. When I look at example of hgroup usage in the wild it is not uncommon for hgroup instances to include chunks of structured content.

For example, when I run a query on the latest webdevdata data some examples found in the first 100 results: I don't see how making the whole content into a heading in these and other cases improves the semantics.
babymetalmate.com

<header id="blog-header">
	<hgroup>
		<h1 id="blog-title"><a href="http://babymetalmatome.com/" title="BABYmatoMETAL"><img src="http://babymetalmatome.com/title4.png" width="189"></a></h1>
		<h2 id="blog-description">ベビメタまとめブログ 2013.5~</h2>
	<div class="scheduletwitter">
<a href="http://babymetalmatome.com/archives/schedule20184.html" title="スケジュール"><img src="http://babymetalmatome.com/Schedule.jpg" width="75"></a>

<a class="Twitter_logo" href="https://twitter.com/BABYmatoMETAL" title="BABYmatoMETAL Twitter"><img src="http://babymetalmatome.com/Twitter_logo.png" width="75"></a>
	</div>
	</hgroup>
	</header>

eachnet.com

<hgroup class="headersearch_tab">
      <ul id="headersearchtabs" source="index">
        <li rel="cn,http://search.eachnet.com/Search" class=""><span class="first">中国</span></li>
        <li rel="us,http://search9.eachnet.com/search.html" class="on"><span>美国</span></li>
        <li rel="ca,http://search9.eachnet.com/search.html" class=""><span>加拿大</span></li>
      </ul>
      <form id="headersearchform" action="http://search9.eachnet.com/search.html" method="post">
        <ol>
          <li>
            <input class="keyword_txt" id="headerkeywords" name="keyword" value="" _defval="看看正在流行什么..." _allowempty="no" style="color: rgb(153, 153, 153);" type="text">
          </li>
          <li>
            <input class="search_btn" value="搜 索" type="submit">
            <input name="keywordEn" value="" type="hidden">
            <input name="ST" value="1" type="hidden">
            <input name="pavilionCode" value="us" type="hidden">
          </li>
        </ol>
      </form>
    </hgroup>

ceair.com home page

<hgroup><article class="clearfix"><figure class="link"><mark class="icon2 hotline"></mark> <b class="red">服务热线: <span>95530</span></b></figure><figure class="link"><b class="red"><a href="http://onlinekf.ceair.com/any800/echatManager.do?companyPk=2c9ca04f5a407025015a4072a7de0136&amp;codeKey=7" target="_blank"><mark class="icon2 service"></mark> 在线客服</a></b></figure><figure class="link"><a href="http://eb.ceair.com/feedback/pc/index.html" target="_blank">意见与建议</a></figure><figure class="dropdown"><figcaption>微信</figcaption><div class="body image"><img src="http://static-cdn.ceair.com/resource/images/public/img-erweima.jpg?v=zh_CN_17619"></div></figure><figure class="link"><a href="http://weibo.com/ceaircom" target="_blank">微博</a></figure><figure class="dropdown"><figcaption>特色产品</figcaption><div class="body text"><b>特色机票类产品</b> <span><a href="http://www.ceair.com/about/dhcpjs/t20141224_16922.html" target="_blank">U+随享</a> | <a href="http://www.ceair.com/about/dhcpjs/t20141224_16923.html" target="_blank">隔夜中转</a> | <a href="http://www.ceair.com/about/dhcpjs/t20141224_16924.html" target="_blank">市区景点游</a> |<a href="http://ecard.ceair.com/wing/index.html" target="_blank">套票专区</a></span><hr><b>特色空地联运</b> <span><a href="http://www.ceair.com/about/dhcpjs/t20141224_16925.html" target="_blank">空铁通</a> | <a href="http://www.ceair.com/about/dhcpjs/t20141224_16926.html" target="_blank">空巴通</a> | <a href="http://www.ceair.com/about/dhcpjs/t20141224_16928.html" target="_blank">磁悬浮</a> | <a href="http://www.ceair.com/about/dhcpjs/t20141224_16927.html" target="_blank">高端旅客接送</a></span><hr><b>特色旅行额外体验</b> <span><a href="http://www.ceair.com/about/dhcpjs/t20141224_16929.html" target="_blank">陪伴服务</a> | <a href="http://www.ceair.com/about/dhcpjs/t201519_16930.html" target="_blank">特殊餐食</a> | <a href="http://www.ceair.com/a/yxzw.html" target="_blank">优选座位</a> | <a href="http://www.ceair.com/a/excess_baggage.html" target="_blank">逾重预付费行李</a> | <a href="http://ecard.ceair.com/muecard/sales/buycard/NewCardSalesAction.do?method=onlineBuyCard&amp;flag=jjek#jjek" target="_blank">小微企业产品</a></span><hr><span class="long"><a href="http://www.ceair.com/mp/cxcp.html" target="_blank">品牌活动</a> <a href="http://www.ceair.com/mp/xshd.html" target="_blank">限时促销</a> <a href="http://vacations.ceair.com/vacation" target="_blank">旅游度假</a> <a href="http://www.ceair.com/a/talent.html" target="_blank">达人计划</a></span></div></figure><figure class="dropdown"><figcaption>友情链接</figcaption><div class="body text"><span class="clearfix links"><a target="_blank" href="http://www.ceairgroup.com">中国东方航空集团有限公司</a> <a target="_blank" href="http://www.shanghai-air.com">上海航空公司</a> <a target="_blank" href="http://shopping.ceair.com">东方万里行积分商城</a> <a target="_blank" href="http://easternmiles.ceair.com">东方万里行</a> <a target="_blank" href="http://www.flycua.com/">中国联航</a> <a target="_blank" href="http://www.skyteam.com/zh">天合联盟</a> <a target="_blank" href="http://www.c3q.com.cn">东航云南</a> <a target="_blank" href="http://ceagent.ceair.com/">代理人系统</a> <a target="_blank" href="http://www.greaterchinaconnection.com/">大中华携手飞</a></span></div></figure><figure class="dropdown language"><figcaption>China</figcaption><div class="body lang"><dl><dt value="cn">中国</dt><dd><a href="javascript:void(0)" data-value="zh_CN" data-type="changeCookie">简体中文</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="javascript:void(0)" data-value="en_CN" data-type="changeCookie">English</a></dd></dl><dl><dt value="hk1">中国香港</dt><dd><a href="http://ck.ceair.com/" target="_blank">繁体中文</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://hk.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="tw">中國臺灣</dt><dd><a href="http://tw.ceair.com/" target="_blank">繁体中文</a></dd></dl><dl><dt value="jp">にほん</dt><dd><a href="http://jp.ceair.com/" target="_blank">日语</a></dd></dl><dl><dt value="kr">한국</dt><dd><a href="http://kr.ceair.com/" target="_blank">한국어</a></dd></dl><dl><dt value="ca">Canada</dt><dd><a href="http://ca.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="uk">United Kingdom</dt><dd><a href="http://uk.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="us">United States</dt><dd><a href="http://us.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="oa">Oceania</dt><dd><a href="http://oa.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="de">Deutschland</dt><dd><a href="http://de.ceair.com/" target="_blank">Deutsch</a></dd></dl><dl><dt value="fr">France</dt><dd><a href="http://fr.ceair.com/" target="_blank">Français</a></dd></dl><dl><dt value="it">Italian</dt><dd><a href="http://it.ceair.com/" target="_blank">Italiano</a></dd></dl><dl><dt value="ru">Россия</dt><dd><a href="http://ru.ceair.com/" target="_blank">Русский</a></dd></dl><dl><dt value="sg">Singapore</dt><dd><a href="http://cg.ceair.com/muovc/newsite/main/zh_SG/index.html" target="_blank">简体中文</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://sg.ceair.com/" target="_blank">English</a></dd></dl><dl><dt value="ph">Philippines</dt><dd><a href="http://ph.ceair.com/" target="_blank">English</a></dd></dl></div></figure></article></hgroup>

@annevk
Copy link
Member Author

annevk commented Apr 3, 2018

What percentage of hgroup usage was incorrect? We might also be able to deal with this in another way, by explicitly setting the "accessible name", such that the above scenarios would not lead to as weird outcomes.

(Note also that hgroup is a rather small subset of this issue, though it does impact a few things.)

@sideshowbarker
Copy link

What percentage of hgroup usage was incorrect?

FYI to help with answering that I just now added logging of URLs for hgroup documents to the HTML checker backend — so within a day or two, that’ll collect enough URLs that we’ll have another sample to look through and assess.

(Note also that hgroup is a rather small subset of this issue, though it does impact a few things.)

I agree that hgroup is a relatively small part of the larger issue — but at the moment it’s what’s blocking me from updating the related heading-level/outline feature in the HTML checker. I suspect the handling of it will also be what would hold up browser implementors from adding support for the new heading-level algorithm, once they actually got around to really scrutinizing it.

@stevefaulkner
Copy link
Contributor

stevefaulkner commented Apr 4, 2018

@sideshowbarker thanks, look forward to reviewing the data.

(Note also that hgroup is a rather small subset of this issue, though it does impact a few things.)

while I agree, it is an important aspect of this issue to update the mapping, as hgroup is not currently mapped and its mapping as suggested will have an impact.

scottaohara added a commit that referenced this issue Apr 28, 2022
Related to whatwg/html#7829.

Assuming this PR lands, an `hgroup` will only allow a single heading and paragraph elements <small>(and script-supporting elements, but that's not relevant here)</small> to represent sub-heading information.

However, as there are _lots_ of instances of `hgroup` in the wild where multiple headings are used - as this was allowed prior to the HTML PR, these will become invalid markup patterns, and indicating that the headings of lower level be treated as `p` elements will at least mitigate for this change.

For additional discussion:
- should `hgroup` be exposed as a 'heading group' or even just a 'group' to define the boundaries of where the hgroup content starts/stops
- should `p` elements or errant extra `h#` elements be exposed as 'sub headings'.  `doc-subtitle` could potentially be used - though I'm not sure if that is actually appropriate, as we _don't_ want the subheadings to be exposed as 'headings' as some of the mappings for `doc-subtitle` would seem to indicate might be the result of mapping to this role.  This could potentially be related to what dpub ARIA roles should be brought back into ARIA proper - e.g., `role=subheading` 

this effectively resolves #123
this may well help resolving w3c/aria-practices#1157
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants