-
Notifications
You must be signed in to change notification settings - Fork 84
ACT 2.4.6 atomic rule Update #2425
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
base: develop
Are you sure you want to change the base?
Changes from 26 commits
84f4a8b
1d6fe02
d2ad7da
816bc57
4974e86
edcaf8a
4d002c0
bca3157
94c8e82
640c92b
28e978d
5a978e0
227b7d5
ed200e1
c12e930
c2637a5
eee1e6b
0bb437d
57e2265
d97d76d
460da79
ed0ff54
384c3bc
f63baf3
44fc44d
af2645e
50e204d
22fd9bb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,10 +1,10 @@ | ||||||
| --- | ||||||
| id: b49b2e | ||||||
| name: Heading is descriptive | ||||||
| name: Heading is relevant | ||||||
| rules_format: 1.1 | ||||||
| rule_type: atomic | ||||||
| description: | | ||||||
| This rule checks that headings describe the topic or purpose of the content. | ||||||
| description: | ||||||
| This rule checks that headings are relevant to a specific topic, purpose or page. | ||||||
| accessibility_requirements: | ||||||
| wcag20:2.4.6: # Headings and labels (AA) | ||||||
| forConformance: true | ||||||
|
|
@@ -13,11 +13,11 @@ accessibility_requirements: | |||||
| inapplicable: further testing needed | ||||||
| input_aspects: | ||||||
| - Accessibility Tree | ||||||
| - DOM Tree | ||||||
| - CSS Styling | ||||||
| - Language | ||||||
| acknowledgments: | ||||||
| authors: | ||||||
| - Armağan Tekdöner | ||||||
| - Carlos Duarte | ||||||
| - Dagfinn Rømen | ||||||
| - Geir Sindre Fossøy | ||||||
|
|
@@ -27,203 +27,33 @@ acknowledgments: | |||||
| --- | ||||||
|
|
||||||
| ## Applicability | ||||||
| This rule applies to semantic heading elements that are [included in the accessibility tree](included-in-the-accessibility-tree "Definition of included in the accessibility tree"), as well as to any HTML element that is styled as a heading. Elements that are styled as a heading may include features such as a larger font-size than nearby text, bolding or changing of the font, or the use of whitespace or shapes that visually distinguish the element text, as well as an image of text such as a text banner displayed like a heading as the first visible element on the page. | ||||||
|
|
||||||
| This rule applies to any [semantic][semantic role] `heading` element that is [included in the accessibility tree][] and has a non-empty (`””`) [accessible name][]. | ||||||
| ### Applicability Type Designation: | ||||||
| Rule contains subjective applicability, depending on whether the element evaluated as a heading by implementers should be considered a heading. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We don't need this.
Suggested change
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't understand why this option exists at all, if it will not be used even here.
https://www.w3.org/TR/act-rules-format-1.1/#applicability-type-designation-atomic-optional I can see that we are trying to avoid the word "subjective", but if there is one rule that word applies to, it is this rule. If AI will decide what headings humans should write using the "accessibility" card, that will be yet another step towards ending human creativity. I suggest we discuss this with others. I am keeping it for now with some simplification. It can easily be deleted if others do not want it. |
||||||
|
|
||||||
| ## Expectation | ||||||
|
|
||||||
| Each target element describes the topic or purpose of the first [perceivable content][] after the test target that is not [decorative][]. The order of elements is determined by the [flat tree][]. | ||||||
|
|
||||||
| **Note:** Headings do not need to be lengthy. A word, or even a single character, may be sufficient. | ||||||
| ## Expectations | ||||||
|
grifare marked this conversation as resolved.
|
||||||
| Each heading is relevant to the specific page or section where it appears and it is sufficiently intelligible. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems fairly ambiguous. Here are the questions I had about it:
Having read through understanding docs, and some other people's writing about 2.4.6 I no longer think we should change "descriptive" to "relevant". If a heading is irrelevant to the section its in, than I think its either in the wrong section, or it shouldn't be a heading at all. Either one is a failures of 1.3.1. Where 2.4.6 comes in is when headings are relevant, but insufficiently descriptive. On a recipe page using "Recipe 1" instead of "Vegetarian lasagna" for example is a heading not being relevant. I'd recommend doing a few things with this expectation:
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Descriptive versus relevantReplacing "descriptive" with "relevant" was my proposal right from the start and we began working on this assignment after you accepted it. I also proposed "meaningful" but then we removed it upon your request, as you were right in the sense that anything could be considered meaningful by itself. But I still think the devil is in the word "descriptive". A tester can fail anything using that. Here is what reports will be reading: "this is not descriptive enough because, that is not descriptive enough because". To avoid that, the "first perceivable content" term was introduced, but then the rule became an artificial requirement of writing 2 sentences that repeat each other.
I assume you provided the example above as a "PASS" example, right? That is why I created situations in examples. (I will remove all situations to use the existing format, no doubt about it. I am pasting it here for now just to make my point.)
I also had a section like this, which was not using the format. However, I think it is helpful section and it could be used elsewhere, as you would suggest. ##Comments about recommendations Item 1, "Create a new definition for 'section'"Very good idea, but it will take time if I am to do this, as it may become a back-and-forth discussion topic. I am eager to copy-paste whatever you would suggest for this (or directly commit here). Item 2, "Create a section heading definition"Not sure if it is needed. It will be very much ambiguous no matter what you describe, especially when the description of the heading is not clear yet. Item 3, "we'll want an inline definition of 'descriptive'"Respectfully I disagree. That is going back to square one. The vast majority of the existing headings of the most prominent institutions all around the world will suddenly become non-complaint with WCAG. All that I listed under the "None of the following is within this rule's scope" above will be failed by testers. Item 4, "intelligible"I am also not 100% sure about it.
Failed ExampleThis <h3>ortcontact Custo</h3>There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have read the suggestions, feedback and back and forth so far on Each heading is relevant to the specific page or section where it appears and it is sufficiently intelligible. @grifare regarding your responses to @WilcoFiers for Items 1 and 2:
I can help write this or agree to cut and paste something that @WilcoFiers has in mind.
I would like to try writing this for your reviews.
I don't agree with @grifare here, in that we have to be too prescriptive. I'd like to try again to write a definition for your review. "Respectfully I disagree. That is going back to square one. The vast majority of the existing headings of the most prominent institutions all around the world will suddenly become non-complaint with WCAG. All that I listed under the "None of the following is within this rule's scope" above will be failed by testers." Item 4, "intelligible" @grifare what do you think about @WilcoFiers suggestion to roll a description of "intelligible" into the general definition of description? Happy to get your thoughts on this in a meeting together. Thanks! |
||||||
|
|
||||||
| ## Background | ||||||
| Headings are normally marked as semantic headings using `<h1>` to `<h6>` elements or using generic elements with correct ARIA roles that convert them into semantic headings. On the other hand, on websites that are not adhering to HTML5 semantic coding practices, or that are intended to apply semantics in the code while containing errors in the usage of ARIA roles for example, other elements can be observed that function as headings. Sometimes a heading is a list item, sometimes a figcaption, sometimes a table caption, sometimes another element that is not normally a heading. | ||||||
|
|
||||||
| Headings that are visible but not in the accessibility tree are a failure of [Success Criterion 1.3.1 Info and Relationships][sc131]. These are not tested by this rule but they can still fail [Success Criterion 2.4.6 Headings and Labels][sc246]. | ||||||
| Under this rule, "content" refers to any textual or non-textual element presented on the web page, including sections, paragraphs, forms, user interface components, media galleries, lists, or hyperlinks. | ||||||
|
|
||||||
| Testing tools treat empty headings `<h1></h1>` or `div role="heading" aria-level="1"></div>` differently. Some report that empty headings fail under 1.3.1 Info and Relationships or 2.4.6 Labels or Instructions. Other tools report that these headings pass because they are ignored by most assistive technologies and cause no accessibility barriers at all. This rule does not include examples of empty headings because there is currently no harmonized approach for testing them. | ||||||
| To pass, a heading must be relevant to its associated content. (Headings consisting of placeholder text or uninformative character strings fail this rule inherently.) | ||||||
|
|
||||||
| ### Assumptions | ||||||
| This rule assumes that testers evaluating the content possess the necessary language proficiency and contextual comprehension required to assess the relationship between the headings and their associated content. Web pages containing content in multiple languages (e.g., a heading in one language preceding content in another) where the tester does not possess professional working proficiency in all languages present is a limitation. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Assumptions are about the content, not about the tester. This is more like an input aspect, although I'm not sure that we should make this an actual aspect. That might be worth a discussion in the group.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please see the following comment. |
||||||
| Live, dynamic content fields (e.g., streaming data feeds, live social walls, or active chat interfaces) where the content updates at a rate that prevents static evaluation against its structural headings or content that is highly specialized, academic, or artistic are exceptions when the evaluator does not posess the necessary know-how to determine whether the heading is relevant. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As above, assumptions should be about the content. If a tester is unable test something, that's there problem to figure out. it's not an exception to the accessibility requirement. Testers always have the option of reporting a test as incomplete because they were insufficiently confident.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
You are the rule writers, we testers are the rule getters. I believe the official ACT page should include these somehow, somewhere:
Perhaps "Assumptions" was not the right section or what I wrote was not the right way to point these out.
For now, I made the following changes:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree @grifare to be more precise for testers not to be too subjective when it comes to content. |
||||||
|
|
||||||
| This rule assumes that the [flat tree][] order is close to the reading order as elements are rendered on the page. Due to positioning, it is possible to render a document in an order that greatly differs from the tree order, in which case the content which is visually associated with a heading might not be the content following it in tree order and this rule might fail while [Success Criterion 2.4.6 Headings and Labels][sc246] is still satisfied. | ||||||
|
|
||||||
| This rule also assumes that the content the heading is intended to describe is [visible][] and not hidden from assistive technologies. Otherwise, cases such as expandable content using a heading might fail this rule while [Success Criterion 2.4.6 Headings and Labels][sc246] is still satisfied. | ||||||
| This rule is designed as a test-to-pass evaluation and failures should be reserved for exceptional cases. Testers should default to a passing or not applicable result when in doubt. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as above. This seems like it belongs in a testing methodology (such as Trusted Tester). That's not the purpose of an ACT rule. Different testers can handle this differently, it is not up to us to prescribe these kinds of things. |
||||||
|
|
||||||
| ### Accessibility Support | ||||||
|
|
||||||
| Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some [semantic][semantic role] `heading` elements can fail this rule with some technology but users of other technologies would not experience any accessibility issue. | ||||||
| This rule does not rely on the support for particular accessibility features by different assistive technologies and user agents. | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you use the default phrase from the template: https://github.com/act-rules/act-rules.github.io/blob/develop/pages/design/atomic-template-empty.md
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Like this? Done. Accessibility SupportThere are no accessibility support issues known. |
||||||
|
|
||||||
| ### Other Resources | ||||||
|
|
||||||
| - [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) | ||||||
| - [Understanding Success Criterion 2.4.6: Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) | ||||||
| - [G130: Providing descriptive headings](https://www.w3.org/WAI/WCAG22/Techniques/general/G130) | ||||||
| - [H42: Using h1-h6 to identify headings](https://www.w3.org/WAI/WCAG22/Techniques/html/H42) | ||||||
| - [ARIA12: Using role=heading to identify headings](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA12) | ||||||
| - [Understanding Success Criterion 2.4.10 Section Headings](https://www.w3.org/WAI/WCAG21/Understanding/section-headings) | ||||||
| - [Use headings to convey meaning and structure](https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure) | ||||||
| - [HTML Specification - Heading content](https://html.spec.whatwg.org/#heading-content) | ||||||
|
|
||||||
| ## Examples | ||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't know why you deleted the examples. We'll need those.
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have all the examples locally saved as an md file.
I am now waiting for your approval of the format I should use for examples. Will the examples' format be okay like this? (No situations list whatsoever.) |
||||||
|
|
||||||
| ### Passed | ||||||
|
|
||||||
| #### Passed Example 1 | ||||||
|
|
||||||
| This `h1` heading element describes the topic of the following paragraph. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1>Opening Hours</h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Passed Example 2 | ||||||
|
|
||||||
| This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <span role="heading" aria-level="1">Opening Hours</span> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Passed Example 3 | ||||||
|
|
||||||
| This `h1` heading element with an image describes the topic of the following paragraph. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1> | ||||||
| <img src="/test-assets/descriptive-heading-b49b2e/opening_hours_icon.png" alt="Opening hours" /> | ||||||
| </h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Passed Example 4 | ||||||
|
|
||||||
| This `h1` heading element has a single character text that describes the topic of the following description list. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1>A</h1> | ||||||
| <dl> | ||||||
| <dt>airplane</dt> | ||||||
| <dd> | ||||||
| a powered flying vehicle with fixed wings and a weight greater than that of the air it displaces. | ||||||
| </dd> | ||||||
| <dt>apple</dt> | ||||||
| <dd> | ||||||
| the round fruit of a tree of the rose family, which typically has thin green or red skin and crisp flesh. | ||||||
| </dd> | ||||||
| </dl> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Passed Example 5 | ||||||
|
|
||||||
| This heading marked up with an [explicit role][] of `heading` describes the topic of the following paragraph. The heading is positioned off screen but is [included in the accessibility tree][]. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <span role="heading" aria-level="1" style="position: absolute; top: -9999px; left: -9999px;">Opening Hours</span> | ||||||
| <p> | ||||||
| We are open Monday through Friday from 10 to 16 | ||||||
| </p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Passed Example 6 | ||||||
|
|
||||||
| This heading describes the first [perceivable content][] after it (the first `p` element). The next [perceivable content][] (the second `p` element) is not considered by this rule. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1>Opening Hours</h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| <p>We are open Saturday from 10 to 13</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| ### Failed | ||||||
|
|
||||||
| #### Failed Example 1 | ||||||
|
|
||||||
| This `h1` heading element does not describes the topic of the following paragraph. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1>Weather</h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Failed Example 2 | ||||||
|
|
||||||
| This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <span role="heading" aria-level="1">Weather</span> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Failed Example 3 | ||||||
|
|
||||||
| This heading marked up with an [explicit role][] of `heading` does not describe the topic of the following paragraph. The heading is positioned off screen but is [included in the accessibility tree][]. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <span role="heading" aria-level="1" style="position: absolute; top: -9999px; left: -9999px;">Weather</span> | ||||||
| <p> | ||||||
| We are open Monday through Friday from 10 to 16 | ||||||
| </p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Failed Example 4 | ||||||
|
|
||||||
| This `h1` heading element does not describe the first [perceivable content][] after it (the first `p` element). The next [perceivable content][] (the second `p` element) is not considered by this rule. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1>Weather</h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| <p>It is going to rain tomorrow</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| ### Inapplicable | ||||||
|
|
||||||
| #### Inapplicable Example 1 | ||||||
|
|
||||||
| There is no heading. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| #### Inapplicable Example 2 | ||||||
|
|
||||||
| This `h1` heading element is not [included in the accessibility tree][]. | ||||||
|
|
||||||
| ```html | ||||||
| <html lang="en"> | ||||||
| <h1 hidden>Opening Hours</h1> | ||||||
| <p>We are open Monday through Friday from 10 to 16</p> | ||||||
| </html> | ||||||
| ``` | ||||||
|
|
||||||
| [decorative]: https://www.w3.org/TR/WCAG22/#dfn-pure-decoration 'WCAG definition of Pure decoration' | ||||||
| [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' | ||||||
| [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree' | ||||||
| [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' | ||||||
| [sc131]: https://www.w3.org/TR/WCAG22/#info-and-relationships ' Success Criterion 1.3.1 Info and Relationships' | ||||||
| [sc246]: https://www.w3.org/TR/WCAG22/#headings-and-labels 'Success Criterion 2.4.6 Headings and Labels' | ||||||
| [semantic role]: #semantic-role 'Definition of semantic role' | ||||||
| [visible]: #visible 'Definition of visible' | ||||||
| [accessible name]: #accessible-name 'Definition of accessible name' | ||||||
| [perceivable content]: #perceivable-content 'Definition of perceivable content' | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This new applicability is ambiguous. That's not allowed in the rules format. You're not defining when a bold or large text is a heading and when it isn't. As I mentioned before, I think that's a problem we should leave for another rule. Many rules we wrote rely on other rules to address gaps. That way we keep a rule atomic and understandable. Instead of making this one rule do both jobs of determining which things should be headings, and which headings are then descriptive, we're better off separating those.
The way I'd break that down is to write three rules:
That covers the full spectrum of testing needed for headings, giving each rule a specific task. I think we should keep the applicability as it is today. This follows the suggestion of the rules format to put subjective and objective applicability into separate rules. Rule 1 would have a subjective applicability, the rest wouldn't need it because it can build on rule 1.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree with you that using bold style as an example without defining when to consider it as a heading will be ambiguous and puzzling for testers. It can have many adverse effects. (I copied that text from your feedback.)
However, if we keep the applicability as it is today, I think it will be incorrect. The current text explicitly refers to the semantic headings only. According to the current wording,
<p class="h1">Non-semantic heading</p>is out of scope, am I mistaken?https://www.w3.org/WAI/standards-guidelines/act/rules/b49b2e/proposed/#applicability
Unless we clearly say this rule applies to all elements that can be perceived as headings as well as the real headings, we will not be accurate. I don't think there is no way to describe something as subjective as this criterion unambiguously in one sentence or two. That is what examples are for.
Therefore, in addition to the existing test, I insist that something like this should be present:
Applicability
This rule applies to any semantic
headingelement that is included in the accessibility tree and has a non-empty""accessible name. It also applies to other elements that are not semanticallyheadingelements, but that are presented as headings.For now, I made the change as shown above, but I am 100% open to any edits you would suggest there. "Presented" could be "perceived" or there are lots of other alternatives. I just want to underscore the difference of 2.4.6 from others, which is evaluating plain text, not the inspected code or not what screen readers announce.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the invitation to review the comments and feedback, @grifare and @WilcoFiers.
I agree and support these three rules to remain unambiguous about the purpose of headings on a page and semantic application with HTML < H > .
@grifare @WilcoFiers I would defer to someone with more coding skills, but for my understanding as well, a < p > with a class of "heading" would still announce by screen reader as a paragraph, and that is a CSS class for presentation only. So it doesn't fit the rule.
@grifare what are your thoughts?