Create Structured Content guideline

[WilcoFiers]

Previous issues: w3c/silver#260, w3c/silver#329, w3c/silver#330

Previous work: https://www.w3.org/WAI/GL/WCAG3/2020/outcomes/uses-visually-distinct-headings

Open questions

1. How should it be decided whether headings are sufficiently distinct, from each other and from other content? Can this be done using color contrast? Should the distance from which a heading can be read be factored into this?

2. Be sure to differentiate between "font" and "typeface". Helvetica 12pt bold is a different font from Helvetica italic 14px, but has the same typeface.

3. Ensuring sufficient semantics on headings may be more impactful or important than ensuring headings are visually distinct. Maybe the requirement for visual presentation could be focused on changing presentation away from the default.

[GreggVan]

gregg

------------------------------ Gregg Vanderheiden ***@***.***

On Sep 6, 2023, at 4:10 AM, Wilco Fiers ***@***.***> wrote: Previous issues: w3c/silver#260 <w3c/silver#260>, w3c/silver#329 <w3c/silver#329>, w3c/silver#330 <w3c/silver#330> Previous work: https://www.w3.org/WAI/GL/WCAG3/2020/outcomes/uses-visually-distinct-headings Open questions How should it be decided whether headings are sufficiently distinct, from each other and from other content? Can this be done using color contrast? Should the distance from which a heading can be read be factored into this?

Do we have a requirement for this? This seems to go beyond accessibility. If they are not distinct for anyone — then is it an accessibility question?

Be sure to differentiate between "font" and "typeface". Helvetica 12pt bold is a different font from Helvetica italic 14px, but has the same typeface.

As long as things are programmatically different

Ensuring sufficient semantics on headings may be more impactful or important than ensuring headings are visually distinct. Maybe the requirement for visual presentation could be focused on changing presentation away from the default.

What do you mean by "sufficient semantics" I translate this as "sufficient meaning" but not sure that is an accessibility issue. We can’t require that authors that make meanless headers rewrite them to be meaningful… (I don’t think) Did you mean something different?

…

— Reply to this email directly, view it on GitHub <#19>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNGDXS2NJTWM3CQH3O5MSDXZBK3TANCNFSM6AAAAAA4NE7VOQ>. You are receiving this because you are subscribed to this thread.

[Myndex]

Content structure for a good visual hierarchy is definately an accessiblity issue (coga, among others). It is also a contrast issue. White space between lines and letters affects contrast perception, as does font weight.

The primary driver of contrast is the spatial characteristics. The amount of padding around text blocks, or around a heading, plays a part. It is mainly critical for blocks of body text.

In the image below on the left and the right the stroke wits and want sizes are identical on the left 3:1 on the way to 7:1. Certainly the seven to one is darker but notice that the major change in contrast appearance is related to the weight or thickness of the line. And the balance of line thickness is white space.

[Myndex]

Also, in the contrast thread #10, there's a post that lists the SCs that belong with lightness contrast, and the SCs that go together with use of color.

Useful to remember that color as in hue/saturation is processed in the human vision system separately from lightness/darkness (luminance). And all find detail is in that luminance which is why luminance is critical for reading.

Therefore it is sensible to group the SCs that are about hue/sat, separate from those about luminance.

[u9000-Nine]

1. How should it be decided whether headings are sufficiently distinct, from each other and from other content? Can this be done using color contrast? Should the distance from which a heading can be read be factored into this?

I think we need to look into what methods are currently being used which are sufficiently distinct so that we don't accidentally remove one. It's also important to consider combinations of different distinctions.

---

Some distinctions I encounter or think about often:

• Boldness
• Font size
• Typeface
• Indentation
• Underlines or overlines
• Italicization
• Small caps
• Script (in languages that have multiple scripts)
• Color
• Textual or iconographic markers (☛, →, §, #, [Link icon], etc)
• Text alignment

[Myndex]

Hi @u9000-Nine

Some dictions I encounter or think about often:

Yes, good. I think these divide into three categories.

• Color/lightness contrast
• Spatial style/whitespace (directly affects contrast)
• Non-text indicators (additionally guides visual hierarchy)

Headings

• Color and luminance contrasts
  • Unique color (hue/sat)
  • luminance (lightness/darkness) contrast
  • highlighting
  • text outline, shadow, or other color effects
• Spatial and style
  • Font style
    • Font-size (larger than body)
    • Font-weight (often heavier than body)
    • Font-style (upright, italic, Oblique)
    • Font-family variants may be
      • serif, sans serif, trans serif, slab serif, mono
      • display, hand, script, decorative, swash, ornamental
      • normal, small caps, or all caps design, infant, etc.
      • aspect ratio (condensed, expanded, etc)
    • Font-transform
      • capitalize
      • all uppercase
      • manually title case (i.e. Chicago or AP)
      • sentence case (no transform)
  • Whitespace
    • Alignment and justification (Left, center)
      • Outdent, indent, flush to body (left for LTR)
    • Leading (line space) before > after
    • Tracking & kerning (letter spacing)
      • expanded, normal, optical, manually kerned
• Non-text indicators
  • Word underlines
  • horizontal rules or borders
    • after, before, box, partial box
    • line thickness per section type
  • Symbol, bullet, or icon § ¶ • – » › > ➣ 💡 ✅ 🔹

[u9000-Nine]

Hi @u9000-Nine

Hi @Myndex 🙂

Some distinctions I encounter or think about often:

Yes, good. I think these divide into three categories.

• Color/lightness contrast
• Spatial style/whitespace (directly affects contrast)
• Non-text indicators (additionally guides visual hierarchy)

I like the idea of breaking these out, but I think it needs slightly more categories than you have. What do you think about the following?

Headings

• Spatial
• Visual text attributes (better name needed)
• Content
• External indicators

Spatial distinctions

• Font size
• Alignment and justification (Left, center)
• Outdent, indent, flush to body (left for LTR)
• Leading (line space) before > after
• Tracking & kerning (letter spacing)

Visual text attributes (better name needed) distinctions

• Font-weight
• Font-style (upright, italic, Oblique, etcetera)
• Font-family variants may be
  • serif, sans serif, trans serif, slab serif, mono
  • display, hand, script, decorative, swash, ornamental
  • normal, small caps, or all caps design, infant, etcetera
  • aspect ratio (condensed, expanded, etcetera)
• Text-decoration (underline, strikethrough, drop shadow, etcetera)

Content distinctions

• Capitalization
• Writing system
• Sentence type?
• Person?

External indicators

• Horizontal or vertical rules
• Borders
• Iconographic or textual indicators (§ ¶ • – » › > ➣ 💡 ✅ 🔹 [link icon])

[Myndex]

Hi DJ Chase @u9000-Nine Sorry for the delay in response.

Note: my "drinking from a firehose prolixity" is part of my process in working through ideas. I've hidden most of the backwork under "Click for details".

Weight is spatial

Visual text attributes (better name needed) distinctions

• Font-weight

IMO font Weight is the primary, most critical "spatial quality" because it directly defines the spatial frequency which directly affects contrast sensitivity, which ultimately determines the perception of contrast, and with that, readability.

Click to enlarge:

In the graph above, all the sample text is in the same color, but the different weights indicating the approximate placement on the human contrast sensitivity curve for a practical demonstration of the abstract science.

Most other font attributes are also spatial in nature, at least in part, but not always as critical to that definition.

User Needs Summary

If we think about this from the user-need perspective, the four related core user needs for text/readability/structure accommodations are:

• Visual Acuity (size)
• Contrast Sensitivity (weight & color)
• Color Insensitivity "colorblind" (N/A except no "reds on black")
• Cognitive & Lexical (all three above, plus use-cases, hierarchy, and more)

CLICK (open/close) Detailed User Needs Summary

⇩ ⇩ ⇩ ⇩ ⇩

Acuity Impairments

• Visual Acuity (directly impacted or assisted by font size)
  • The critical font size is 2x to 2.5x the acuity size for a given user, provided it is at or above the critical contrast level.
  • The desired outcome is that users can set the smallest content font to their individual critical size, and that larger fonts maintain a larger appearance but do not get "too big", as fonts too large negatively impact readability.

Contrast Impairments

• Contrast Sensitivity (directly impacted by contrast determining features)
  • Font weight, and non-text line thickness, are the primary determining factors for perceived contrast for strokes less than about 4px thick.
  • The critical font weight is directly interrelated with the critical lightness contrast.
  • The critical contrast reserve depends on the intended use-case and desired readability level of the text (best fluent, high fluent, sub-fluent, non-fluent (spot).)
  • The preferred contrast reserve, such as for article body text, is 20 times the JND threshold for the given user.
  • Lower levels such as 10x for fluent, 6x for sub-fluent, and 3x for non-fluent (spot) are also detailed in the corpus of research (Lovie-Kitchin et alia).
  • Font size only applies to contrast to the degree it affects the rendered font weight/stroke thickness.
  • White space, including letters and line spacing, directly affects contrast perception.

Color Impairments

• Color Insensitivity (colorblind) (minimal reading impact, other than red on black)
  • The one lightness contrast concern is saturated colors with substantial red.
  • Reds should always be the darkest of a color pair.
  • I.e. saturated reds, oranges, or purples should generally not be paired with black or dark.
  • The reds on black prohibition is especially critical for those with protanopia and achromatopsia.
    • That said, the low luminance of saturated reds makes the red on black restriction the preferred practice for all users.
  • Also no saturated deep blues on black (for all users, regardless).
  • The actually color blind achromatopes also need AT due to co-morbid low vision and photophobia.

Coga and Language

• Cognitive & Lexical (directly impacted by layout/visual hierarchy, use of colors, and more)
  • The visual hierarchy guides the user through the intended content, using visual contrasts.
    • font weight (and line thicknesses) primary contrast impact
    • white space for grouping (padding, paragraph & heading spacing)
      • Also direct impact on visual contrasts.
    • font size, font family, style
      • Tangential effect on contrast due to how these affect rendered weight.
    • white space for contrast (letter, word, & line spacing)
    • use of lightness contrast to aide the visual hierarchy
      • secondary to maintaining readability for the use-case
    • color (hue/saturation) to aide the visual flow/grouping
  • Use of color (hue/saturation) and text decoration
    • some users need muted, non-distracting colors overall
    • some users need brighter, vibrant colors for a task
    • multiple schemes available to user; automated schemes
  • Containers
    • size relative to viewport size
    • scroll inhibition
    • text reflow
    • functionality preservation
  • Use of motion, state indication, non-motion animation, haptics, other feedback mechanisms.
    • Persistent user preferences, especially when
  • Interactive elements
    • use of color or marking with decoration (such as underlines)
    • grouping by use, kind, purpose, etc.
    • inline links consider trade-offs for readability vs link identification
    • use-cases for priorities: block text readability is critical, in a reference block or nav, links are more critical.

⇧ ⇧ ⇧ ⇧ ⇧
END Detailed User Needs Summary

---

CLICK (open/close) Connect User Needs to Design Elements

⇩ ⇩ ⇩ ⇩ ⇩

For the four core readability needs, acuity, contrast, color, coga, we find that:

1. Font-weight: primary spatial contributor to visual contrast.
2. Lightness contrast (achromatic luminance): primary non spatial contributor to visual contrast.
3. Font-size, -family, -style: these properties are more spatial than not.
   a) BUT for the most part they contribute to visual contrast only to the degree that these properties affect the final rasterized stroke weight.
   b) these properties are effective tools for the structure of the visual hierarchy.
4. White space: Spatial, affects cognitive needs a bit more than visual contrast.
   a) adequate padding helps contrast and helps grouping for the visual hierarchy.
   b) adequate letter and line spacing helps contrast and helps readability
   c) user preference to increase letter/line spacing can help dyslexia.
5. Color (Hue/Sat): color is functional at the lowest spatial frequencies.
   a) color is NOT a contributor to readability contrast
   b) improper use of color can result in blocking conditions for some users
   c) color can cause blocking of readability in certain edge cases.
   d) color can be very helpful for visual hierarchy, grouping, and other cognitive needs.
   e) but color should not be the only way to arrange and define the visual structure, nor convey information.

Color should expand not explain

• Acuity - #3a with modest help from Set up how-to page templates #1 & Add how-to pages for error notification #2 (maintain critical contrast)
• Contrast - Set up how-to page templates #1, Add how-to pages for error notification #2, #4ab, with help from #3a (font metrics that contribute to contrast)
• Colorblind - #5bce (Some algorithms help #5bc by adding protan compensation)
• Coga - #4abc #5bcde with help from Set up how-to page templates #1, Add how-to pages for error notification #2, #3b

⇧ ⇧ ⇧ ⇧ ⇧
END Connect User Needs to Design Elements

---

Distinguishing Texts in the Hierarchy

Taking another stab at this, I'd class weight/stroke width and all whitespace as spatial. For font-size, there are arguments for spatial or font characteristics. Because font-size is (should be) universally adjustable by the user, setting size under font layout makes sense, particularly considering reflow.

Content Structure Groups

For Headings, Body-Blocks, Nav, Main Content (proposed)

• Spatial — Contrast
• Font - Layout
• Content - Language-based Structures
• Non-text - Decoration/Indication

Spatial - Contrast

• Font-weight (as rasterized)
• Luminance or Lightness Contrast
• White Space
  • Alignment and justification (Left, center)
  • Outdent, indent, flush to body (left for LTR)
  • Leading (line space) before > after
  • Tracking & kerning (letter spacing)

Font - Layout

• Font-size (always user adjustable)
• Font-style (upright, italic, Oblique, infant, etcetera)
• Font-family variants:
  • serif, sans serif, trans serif, slab serif, mono-spaced serif, mono-spaced sans-serif, display, hand, script, decorative, swash, ornamental, fantasy, cursive
  • For bicameral scripts: Mixed case, small caps, all caps, all lower¹
  • aspect ratio (condensed, expanded, etcetera)
• Writing direction, text orientation.²
• Text-decoration (underline, strikethrough, drop shadow, etcetera)³

Content - Language-based Structures

• Capitalization style: for headings, titles, nav, etcetera
  • Consistent style per language (Chicago, APA, AP, etc.)
• Writing system/direction: Mixed/alt scripts if supported²
• Perspective: first, second, limited third, omniscient third
• Voice: active, passive
• Tense: present, past, future
  • simple/continuous/perfect/perfect continuous

Non-text - Decoration/Indication

• Text-decoration (underline, strikethrough, drop shadow, etcetera)³
• Horizontal or vertical rules
• Borders or outline (includes focus visible)
• highlighting or local background adjust
• Iconographic or textual indicators (§ ¶ • – » › > ➣ 💡 ✅ 🔹 [link icon])

I think it's best to group by

• use-case ➣ content purpose ➣ psychophysical process.

For instance, luminance is achromatic (disregards hue) and is processed by the human vision system separately from color (hue/saturation). Luminance (lightness) serves different functions from color (hue/sat) including cognitive, language, object recognition, motion, etc.

CLICK (open/close) Grouping by Process/Function

⇩ ⇩ ⇩ ⇩ ⇩

Stimulus Processing and Impairments

It is reasonable to divide design aspects according to how processed, and their role in cognition, etc.

• Luminance related

  • lightness/darkness/brightness perceptions are processed from luminance
  • luminance has our highest spatial resolution, but is weak for tasks of differentiation, with a single axis from dark to light.
    • i.e. it's hard to tell one gray from another unless they are adjacent.
  • luminance holds all the fine spatial details, i.e. edge detection, textures, contrasts.
  • luminance holds text: letters ➣ visual word form area ➣ language processing

• Color (hue saturation) related

  • Standard vision detects four unique colors (red yellow green blue), and all other colors are perceptions processed from these.
  • Color has very low resolution (spatially) less than a third to a fifth of luminance, but standard color vision excels in differentiation with two axes, a red/green and a yellow/blue.
  • Color holds most of the differentiating information (ripe vs unripe oranges) and is used in onject recognition and motion, but is not usually part of language processing, nor fine details.

Key impairments

• Acuity deficit impairs fine details and luminance resolution due to "out of focus".
  • Making text larger helps bring them to a point they can be focused.
• Contrast deficit impairs the ability to distinguish lightness changes, like edges or faint details.
  • Making text bolder, or making the lightness contrast higher helps.
• Color deficit impairs the ability to distinguish between colorful objects.
  • Ensuring that other identifiers are used to indicate the information presented in color is what helps here.
• Cognitive and neurological deficits impairs the ability to break down and understand structures or meaning from content, or to navigate content, or to be distracted by chaotic or "busy" content, or to become overwhelmed by complicated tasks with content, or to read content clearly (i.e. dyslexia).
  • Ensuring that content follows a clear hierarchy, and that the user has adjustable personalizations for properties such as letter spacing, is among the ways to help here.

Summary of this post's concepts

1. Standard color vision has three axes total for decoding light and color (one luminance and two color)
2. Color insensitivities can reduce this to two (one luminance and one color axis)
   • or even a single axis (luminance only) in rare cases.
   • Some of these reductions include a significant loss of visible red.
3. Acuity and contrast deficits impact the ability to focus on or see detailed information.
4. Cognitive & neurological impairments can be triggered or confused or overwhelmed by content that is disorganized, busy, chaotically colorful, lacking color, overstimulating, under-stimulating, etc.
   • Clear hierarchies, using color to augment organizational structures, providing alternate schemes and layouts a user can select, are helpful here.

⇧ ⇧ ⇧ ⇧ ⇧
END Grouping by Process/Function

---

Footnotes to "Font - Layout"
_{¹ Small caps and all caps are only for mixed case (bicameral scripts), and probably fits better under content.
² Writing system and text orientation could fit under font or content, possibly better with content.
³ Text decoration, such as underline, fits best under non-text, which is also probably best for link indication, but other decoration such as text-shadow or outline-text is probably better as part of font characteristics.}

[u9000-Nine]

Sorry for the delay in response.

No worries @Myndex; we're doing this asynchronously. Thank you for putting such thought into your response!

Weight being spatial

I'm fine with this. By "spatial" I was talking about layout, but I'm all for changing the names for consistency. I also like the category names you chose -- they're very clear.

New groups

I generally agree with your changes. This is, again, very well thought out.

Font size

By "font size should always be user-adjustable", do you mean that we shouldn't allow font size as a distinction? I'm perfectly fine with not allowing absolute font size as a distinction, but I think a heading being larger than the body text (however big that is) is valid.

Text decoration

Why is text decoration in both Layout and Nontext?

Writing system

² Writing system and text orientation could fit under font or content, possibly better with content.

I strongly believe that writing system should be in content (or both). When I write in sitelen pona, for example, I can use different semantics and nuances than I can when writing in Latin or speaking.

Color

I'm perfectly fine with not counting color as a distinction. I noted it because it's something I see often (it's the default in Word), but it does definitely create issues with colorblindness.

[Myndex]

Hi DJ Chase @u9000-Nine

Weight...spatial
I'm fine with this. By "spatial" I was talking about layout....

You might find Accessible Contrast Easy Intro interesting. I have tried to find a better plain language term for "spatial", I'm certainly open to thoughts. Yes it is about layout, but also contrast....

CLICK for a small list of definitions

▼ ▼ ▼ ▼ ▼

• Minimal Definitions
  • Spatial or spatially: relating to size, weight, or line thickness.
    • This includes how spacing, padding, and nearby elements affect the local perception.
  • Contrast: the perception of the difference between two of more things.
    • Spatial contrasts are contrasts relating to the differences in size or space themselves.
    • Color and lightness contrasts emerge from the spatial characteristics moreso than the color or lightness difference.
      • In other words, for elements thinner than 4px-6px or so, our contrast sensitivity plummets rapidly as it gets smaller/thinner, and therefore smaller items require a greater perceptual distance between lightness/darkness.
  • Luminance: a physical measure of light, disregarding hue.
  • Lightness: (and darkness and brightness) are a human perception of a given luminance intensity in a given context.
  • Color: is hue and saturation, and is processed by our vision & brain separately from lightness/darkness.
    • Hue: the uniqueness of a given color vs other colors, i.e. blue vs red.
    • Chroma/saturation: the intensity or purity of a color vs no color.

▲ ▲ ▲ ▲ ▲

---

Groups
I also like the category names you chose... well thought out.

Thank you, some of this emerges from the contrast research we've been doing, most particularly things like size and weight.

Font size
By _{"font size ... user-adjustable"}, do you mean that we shouldn't allow font size as a distinction?.

Oh no not at all, it is an important way to distinguish.

I think a heading being larger than the body text... is valid

Ah, yes yes font size is, and should definitely be, a distinguishing feature.

What I meant was, users adjusting fonts is to be considered, such as to how containers and "overflow" is handled. Ideally users should be able to scale the smallest body text up to around 80px to 92px (by font size), that means an x-height of about 42px. This is a zoom of 450% to 500%.

We want users to be able to zoom up the smallest text by 500%, but text that is already larger should zoom a smaller percentage.

See this experimental page of text zooms, and you'll notice that 500% is non-tenable for a cell phone, so device characteristics need media queries and consideration.

The tech for proportional text zoom is not yet in all browsers, but it is in Android now.

And while users can adjust text size, there are still reasonable size minimums depending on use case.

Relative font size is important for the visual hierarchy, and importantly, increasing font size results in the stroke being thicker, which increases visual (darkness/lightness) contrast.

RELATED: this page of size experiments demonstrates the futility of the CSS font-size metric. Font-size and weight is not absolute and massively varies between families.

---

Text decoration

Why is text decoration in both Layout and Nontext?

Open to discussion IMO... there are reasons it can be either place.

If it indicates functionality (underlined link) then leaning toward non-text. If it's just divisional, then leaning toward layout.

Writing system
_{Writing system & text orientation could fit under font or content...}

I strongly believe that writing system should be in content (or both). When I write in sitelen pona, for example, I can use different semantics...

Sensible, we've been discussing with some typographers in Asia regarding asian writing systems, particularly Japanese as it uses a combination of kana and kanji. So a single-case alphabet, and also logographic symbols, all intermingled. kanji is about twice as detailed and twice the spatial frequency, yet traditionally, they size both to an equal vertical height.

---

Color

I'm perfectly fine with not counting color as a distinction.....

Color is definitely a useful and important distinguishing element, and if I made it seem otherwise, that was an error.

It's just that color (hue/saturation, and not including luminance or lightness) shouldn't be the only distinguisher, if the color is meaningful. There is massive variation in how people perceive color, even among standard vision. And then context is results in even further unexpected results.

See this image: note in particular the yellow dots and the gray square each one sits on.

Both yellow dots are the exact same CSS color value. And both gray squares the dots are on are also identical to each other. The dot in the shadow looks like it's glowing due to perceptual context, not absolute by any means.

Color PLUS font-weight/size/family is good. It is still important to maintain lightness contrasts for readability.

So use color, YES, but as an accompaniment, not as the solo violinist.