Re: Having h5 after h2 is a violation as per 1.3.1 info & relationships. - was: WCAG violations or accessibility enhancements

There's a core UX problem with all document software that's leading to this
header issue. When authors create content in a program like Word, they're
largely selecting headers to set up typographical fenceposts in their
documents. For someone who has no knowledge of accessibility, a choice of
header has everything to do with font size, color, boldness, and paragraph
spacing. They're also making these choices based on what they feel is the
appropriate contrast and emphasis with the underlying text -- much as a
person speaking would modulate the volume of their voice. As a visual
designer, I myself have skipped header levels for years before becoming
aware of their importance to users of screen readers.

The problem lies in that authoring tools by default have a 1:1 match
between the typographic style and a single header level. To make an
oversize h3 look like an h5, well, you have to use an h5 and skip header
levels.
A more conscious or experienced user might create a template with
additional h3 styles that look like an h4 or h5, and give them names like
Header 3 Large, Header 3 Medium, and Header 3 Small.

A better approach may be to separate the semantics of the header structure
from type choices by having the user flag something as a header, then
decide where it is to be nested in an outline panel -- and then choose font
sizes separately. This would prevent the authors from having headers that
are orphaned from their parents.



On Thu, Mar 1, 2018 at 2:23 PM, David Best <davebest@cogeco.ca> wrote:

> This, I believe, illustrates the fine line between WCAG criteria and
> usability preferences. Technically, I do not think it is a 1.3.1 violation,
> but it may create user confusion, as the screen reader question would be
> "what am I missing?". This may occur on dynamic pages, and may not
> necessarily be under the control of the web page if third party widgets are
> used. So, it is really a question of good design and branding.
>
> David
>
>
>
> *From:* Phill Jenkins [mailto:pjenkins@us.ibm.com]
> *Sent:* March 1, 2018 01:30 PM
> *To:* Rakesh Paladugula
> *Cc:* Ramakrishnan Subramanian; w3c-wai-ig@w3.org
> *Subject:* Re: Having h5 after h2 is a violation as per 1.3.1 info &
> relationships. - was: WCAG violations or accessibility enhancements
>
>
>
> Why is
>         Having h5 after h2
> a violation of 1.3.1?
>         *1.3.1*
> <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic>* Info
> and Relationships:* Information, structure
> <https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html#structuredef>,
> and relationships
> <https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html#relationshipsdef> conveyed
> through presentation
> <https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html#presentationdef>can
> be programmatically determined
> <https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html#programmaticallydetermineddef> or
> are available in text. (Level A)
>
> 1.3.1 doesn't require perfect nesting order - just that it can be
> programmatically determined.
>
> There are plently of examples of news type pages that may have a bold
> looking headline heading tagged as an <h2> followed in the reading order by
> a very small heading, such as  "Other Author Articles" tagged as an H5.
> What would be wrong with that per the Success Criteria?
>
> The Understanding 1.3.3
> <https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html>
> says: "The intent of this Success Criterion is to ensure that information
> and relationships that are implied by visual or auditory formatting are
> preserved when the presentation format changes. For example, the
> presentation format changes when the content is read by a screen reader . .
> . Sighted users perceive structure and relationships through various visual
> cues — headings are often in a larger, bold font separated from paragraphs
> by blank lines; . .
> under *Additional Techniques (Advisory) for 1.3.1*
> G141: Organizing a page using headings
> <http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G141>
> https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G141which says: "To
> facilitate navigation and understanding of overall document structure,
> authors should use headings that are properly nested (e.g., h1 followed by
> h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).
> Tests
> *Procedure*
>
> 2.        Check that a heading for each section exists.
>
>
> *Expected Results*
>
>    - Check #2 is true.
>
> Note that
> a.) G141 is an advisory techniue,
> b.) G141 does not say "shall" or "must",
> c.) G141 does not fail if the heading are not nested,
> d.) G141 passes if each section has a heading,
> e.) advisory techniques are best practices, not examples of failures to
> meet a Success Criteria,
> f.) Common Failures for SC 1.3.1 does not list an example with incorrectly
> nested headings .
>
>
> On 14-Feb-2018, at 11:41 AM, Ramakrishnan Subramanian <
> ram.eict2013@gmail.com> wrote:
>
> Heading order:
> Whether the following heading level is considered an accessibility
> violation? if yes, which criteria does this violate?
> The first heading level in the page is <h2> sample text </h2>
> The next heading level is <h5> sample text </h5>
> ___________
> Regards,
> Phill Jenkins
>
>
>
>
> On 14-Feb-2018, at 11:41 AM, Ramakrishnan Subramanian <
> ram.eict2013@gmail.com> wrote:
>
> Dear Members,
> I hope it is appropriate to post this query here.
> I kindly request you to help me understand few of the accessibility
> related issues mentioned below.
> Whether these are treated as accessibility enhancement which would be
> helpful for the end user. Or accessibility violation.
> Heading order:
> Whether the following heading level is considered an accessibility
> violation? if yes, which criteria does this violate?
> The first heading level in the page is <h2> sample text </h2>
> The next heading level is <h5> sample text </h5>
>
> Landmark regions:
> When there are different content given inside two different aria
> region, with same aria label. Under which criteria this fails?
> <div role=”region” aria-label=”apple”>
> Apple related content goes here
> </div>
> <div role=”region” aria-label=”apple”>
> Bannana related content goes here
> </div>
> 3. Links which open in a new window:
> When there is no indication for the screen reader users for the link
> which opens in a new window, is that considered an accessibility
> violation? If yes, which criteria does this issue violate?
>
>
> --
>
> Thanks and Regards
> Ramakrishnan
>
>
>
>


-- 
User Experience | Information Architecture | Accessibility
simple-theory.com
+1 954-417-4188