Headings in design have been used to comment inclusion on partial html sections and do not relate to section content

Name: Camille
Email: camille.cowley@gmail.com
Affiliation: 
Document: UW
Item Number: Understanding Success Criterion 2.4.6
Part of Item: Common Failures
Comment Type: technical
Summary of Issue: Headings in design have been used to comment inclusion on partial html sections and do not relate to section content
Comment (Including rationale for any proposed change):
Hello,
I propose that there is a possible failure for this criterion 2.4.6 when using header elements as html code comments, and for visual non-header related text formatting (which also do not relate to content). In NZ several major site designs have stated they have done this for navigation for screen readers. I propose they would actually provide more confusion about the page contents. Consider the example below, (edited for posterity and to combine a clearer combined example of features across these sites). The actual page title is shown via an h4 and appears below the subheading of the author which also uses h4. h1 has been used to format the spacing and add text to the logo, (not even the site name), and h2 as comments on navigation lists that are wrapped in nav elements (but not header or footer elements). This would indicate to the user that every page on the site had a main heading of the text logo, sub headings called navigation and the rest of the page may be longer and harder to navigate if the user ony went through h1-h3 headers. Since this site design methodology, (inc. use of the hiddenTitle class), has appeared often lately for some main NZ sites I am curious as to whether there is a shared template service being used or common documentation being referenced. Which, if you know of either, I would appreciate finding out. Kind Regards, Camille

<div id="headWrap" class="headWrap">
<h1 id="logo" role="heading">
<a href="/" onclick="cs.clickTag('art:header:logo:::');">nzherald.co.nz</a>
</h1>
<form id="headerSearch" role="search" action="/search/index.cfm" method="post">
<p class="searchBarWrap">
<input type="text" name="kw1" placeholder="Search for content&hellip;">
<button type="submit" value="Search" class="searchBtn" onclick="cs.clickTag('art:header:search:::');">submit</button>
</p>
</form>
<script>
renderMasthead();
</script>
</div> 
<div id="navWrap">
<nav id="nav" role="navigation">
<h2 class="hiddenTitle">Navigation</h2>
<ul id="navContainer">
<li class="home topLevel"><a href="/" target="_self" onclick="s_objectID='art:header:home:1::';cs.clickTag('art:header:home:1::');" class="nzhTip topLvl" title="Home">Home</a></li>
<li class="national topLevel"><a href="/nz/news/headlines.cfm?c_id=1" target="_self" onclick="s_objectID='art:header:c1:2::';cs.clickTag('art:header:c1:2::');" class=" topLvl" >National</a></li>
<li class="business topLevel"><a href="/business/news/headlines.cfm?c_id=3" target="_self" onclick="s_objectID='art:header:c3:4::';cs.clickTag('art:header:c3:4::');" class="active topLvl" >Business</a></li>
<li class="technology topLevel"><a href="/technology/news/headlines.cfm?c_id=5" target="_self" onclick="s_objectID='art:header:c5:5::';cs.clickTag('art:header:c5:5::');" class=" topLvl" >Technology</a></li>
</ul>
</nav>
</div>
<nav id="secondaryNav" class="secondaryNav businessSubNav" role="navigation">
<h2 class="hiddenTitle">Sub Navigation</h2>
<ul><li class="breadcrumb last"><a href="/business/news/headlines.cfm?c_id=3" target="_self" onclick="s_objectID='art:header:subnav:c3:1';cs.clickTag('art:header:subnav:c3:1');" 
class="business active">Business</a></li>
<li class="topLevel "><a href="/best-of-business-analysis/news/headlines.cfm?c_id=1501241" target="_self" onclick="s_objectID='art:header:subnav:c3:10';cs.clickTag('art:header:subnav:c3:10');"  >Our Experts</a></li>
<li class="topLevel "><a href="/business-toolbox/news/headlines.cfm?c_id=1503623" target="_self" onclick="s_objectID='art:header:subnav:c3:11';cs.clickTag('art:header:subnav:c3:11');"  >Toolbox</a></li></ul></nav> 
</div>
<div class="sectionHeader clogWrap">
<div class="articleClogStrap clearWrap">
<img src="http://media.nzherald.co.nz/webcontent/author/anne2.png" class="authorImage" />
<div class="authorLinks">
<ul class="socialBar">
<li><a href="http://dynamic.nzherald.co.nz/feedback/author/index.cfm?a_id=39" class="socialEmail" target="_blank">Email Anne</a></li>
<li><a href="https://twitter.com/anneherald" class="socialTwitter" target="_blank">@Anne Gibson</a></li>
</ul>
</div> 
<div class="authorText">
<h4 class="authorName">
<a href="/anne-gibson/news/headlines.cfm?a_id=39" onclick="cs.clickTag('art:sectop:clog:::');">
Anne Gibson 									
</a>
</h4>
<span class="authorDescription">Property editor of the NZ Herald</span>
</div>
</div> 
</div> 
<h4 id="articleTitle" class="articleTitle">New Auckland housing areas unveiled + maps</h4> 
<div class="detailsLarge ">
<span class="floatLeft storyDate">3:30 PM Wednesday May 7, 2014</span>
</div>
<div class="articleBody" id="articleBody" data-next-classification=" Business" data-next-title="Weekend: All work and no play"
data-next-link="/business/news/article.cfm?c_id=3&objectid=11250637">
<div class="articleMedia  c_id3">
<figure>
<img width="620" height="310" src="http://media.nzherald.co.nz/webcontent/image/jpg/20144/SCCZEN_A_060213NZHCGCITY08_620x310.jpg" alt="The Government and Auckland Council have just announced 41 new 'Special Housing Areas' .  Photo / Chris Gorman">
<figcaption class="caption">The Government and Auckland Council have just announced 41 new 'Special Housing Areas' .  Photo / Chris Gorman</figcaption> </figure> 
</div>
<p>Auckland mayor Len Brown and Housing Minister Nick Smith have this afternoon announced a third tranche of "Special Housing Areas" for 18,000 new residences under the Auckland Housing Accord.</p> <p>The announcement was made at a site at 11 Akepiro Street, Mt Eden, set to be developed into 18 units by Ockham Residential.</p> <p>Big parts of Great North Rd, Otahu Coast, Flat Bush, New Lynn, Northcote, Albany East and Takanini are ear&#45;marked as strategic areas, for big&#45;scale redevelopment.</p> <p>The Auckland Housing Accord, agreed to last year by Smith and Brown, provides for the creation of SHAs by Auckland Council with the approval of the Government. Qualifying developments in these areas are able to be streamlined and fast&#45;tracked but the areas are raising alarm in areas from Takapuna to Newmarket, as people suddenly realise their streets will change dramatically.</p>

... I would post a larger fuller page example if required but the design of these sites can make my eyes bleed.


Proposed Change:
Please include some basic error states for this case because even something as simple as header tags can be misused. Therefore correct identification of where a state may fail and some examples of even what should go in a heading tag, and the ideal positioning in the html structure would certainly clear up the confusion into whether it is good for screen readers or not.

Received on Friday, 3 July 2015 11:12:34 UTC