Details
-
Story
-
Status: Closed (View Workflow)
-
P2
-
Resolution: Won't Do
-
None
-
None
-
-
Stripes Force
Description
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>.
The Headline documentation https://github.com/folio-org/stripes-components/tree/master/lib/Headline should endorse not to use the default <div> but <h1> ... <h6>.
Properly using <h1> ... <h6> is a WCAG 2.1 Level A requirement:
- https://www.w3.org/WAI/WCAG21/Techniques/html/H42 "Using h1-h6 to identify headings"
- https://www.w3.org/WAI/WCAG21/Techniques/general/G141 "Organizing a page using headings"
- https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships "Understanding Success Criterion 1.3.1: Info and Relationships"
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
TestRail: Results
Attachments
Issue Links
- relates to
-
FOLIO-3229 Replace Headline <div> tag by <h1> ... <h6>
-
- Closed
-
-
STCOM-857 Make Headline tag a required prop
-
- Closed
-