|
Headlines should use <h1> ... <h6> tags to provide semantic code for headings in the content. Heading markup will allow assistive technologies like screenreaders to present the heading status of text to a user.
The default tag of a Stripes Headline is <div>, see Headline documentation: https://github.com/folio-org/stripes-components/tree/master/lib/Headline
Properly using <h1> ... <h6> is a WCAG 2.1 Level A requirement:
Many modules use the default resulting in bad accessibility and WCAG violation - only 153 out of 263 <Headline> usages change the <div> tag, see attached headline.txt file:
cd platform-complete/node_modules/@folio
grep -rPazo "<Headline[^>]*>" | tr \\0 \\n | grep Headline | wc -l
263
grep -rPazo "<Headline[^>]*>" | tr \\0 \\n | grep "tag" | wc -l
153
asd
This umbrella is to fix each usage of a Stripes Headline where a wrong HTML tag is used.
Background
Details about this problem cited from the WCAG pages listed above:
https://www.w3.org/WAI/WCAG21/Techniques/html/H42 "Using h1-h6 to identify headings":
The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.
https://www.w3.org/WAI/WCAG21/Techniques/general/G141 "Organizing a page using headings":
The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.
In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. 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.).
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships "Understanding Success Criterion 1.3.1: Info and Relationships":
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 or when a user style sheet is substituted for the style sheet provided by the author.
Sighted users perceive structure and relationships through various visual cues — headings are often in a larger, bold font separated from paragraphs by blank lines; list items are preceded by a bullet and perhaps indented; paragraphs are separated by a blank line; items that share a common characteristic are organized into tabular rows and columns; form fields may be positioned as groups that share text labels; a different background color may be used to indicate that several items are related to each other; words that have special status are indicated by changing the font family and /or bolding, italicizing, or underlining them; items that share a common characteristic are organized into a table where the relationship of cells sharing the same row or column and the relationship of each cell to its row and/or column header are necessary for understanding; and so on. Having these structures and these relationships programmatically determined or available in text ensures that information important for comprehension will be perceivable to all.
Auditory cues may be used as well. For example, a chime might indicate the beginning of a new section; a change in voice pitch or speech rate may be used to emphasize important information or to indicate quoted text; etc.
When such relationships are perceivable to one set of users, those relationships can be made to be perceivable to all. One method of determining whether or not information has been properly provided to all users is to access the information serially in different modalities.
Benefits
- This Success Criterion helps people with different disabilities by allowing user agents to adapt content according to the needs of individual users.
|