Steps to reproduce (assumes ChromeVox or similar)
Using WebAim WAVE plugin for google chrome.
- Open Kibana Home Page and launch the WAVE tool.
- Wave reports 17 errors on the page.
Actual Result
The page is missing a H1 heading tag (See Accessibility: Headings Issue for details.)
The page also has 3 H3 heading tags (but no H1/H2 tags preceeding it which is a structure issue).
The page has an H5 heading tag (but no H1-H4 tags preceeding it)
Expected Result
Properly nested heading structure (H1, H2, H3, etc)
Meta Issue
Accessibility Make Kibana Home Accessible for 7.0
Kibana Version:
7.0
Relevant WCAG Criteria:
Related Info
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
Recommendation:
Replace the <h3> heading tags with <h2> and add an <h1> heading tag consistent with the title of the page (e.g): <h1>Kibana Home</h1>
References:
Guideline 1.3 – Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.3.1 Info and Relationships
Level A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.3.2 Meaningful Sequence
Level A
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Success Criteria:
- 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
- 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- 2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA)
Techniques:
- ARIA12: Using role=heading to identify headings
- G130: Providing descriptive headings
- G141: Organizing a page using headings
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- PDF9: Providing headings by marking content with heading tags in PDF documents
Heading Tags - Semantic Accessibility
Steps to reproduce (assumes ChromeVox or similar)
Using WebAim WAVE plugin for google chrome.
Actual Result
The page is missing a H1 heading tag (See Accessibility: Headings Issue for details.)
The page also has 3 H3 heading tags (but no H1/H2 tags preceeding it which is a structure issue).
The page has an H5 heading tag (but no H1-H4 tags preceeding it)
Expected Result
Properly nested heading structure (H1, H2, H3, etc)
Meta Issue
Accessibility Make Kibana Home Accessible for 7.0
Kibana Version:
7.0
Relevant WCAG Criteria:
Related Info
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Nest headings by their rank (or level). The most important heading has the rank 1 (
<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a
<h2>is not followed directly by an<h4>, for example. It is ok to skip ranks when closing subsections, for instance, a<h2>beginning a new section, can follow an<h4>as it closes the previous section.Recommendation:
Replace the
<h3>heading tags with<h2>and add an<h1>heading tag consistent with the title of the page (e.g):<h1>Kibana Home</h1>References:
Guideline 1.3 – Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.3.1 Info and Relationships
Level A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.3.2 Meaningful Sequence
Level A
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Success Criteria:
Techniques:
Heading Tags - Semantic Accessibility