Ember template lint - no duplicate landmark elements

Questions
1

Hello everyone, I have a template that looks like this

{{#if this.something }}
        <section class="A">
              <header>Header A </header>
        </section>
{{/if}}

{{#if this.somethingElse }}
        <section class="B">
              <header>Header B </header>
        </section>
{{/if}}

And the template linter throws this error: no duplicate landmark elements because it finds that we might have two headers without unique labels which is true.

But from the research that I’ve made I understand that it should not affect the accessibility of the page if we have a unique header at the top level of each section of the page.

How should I handle this? Would it be the best and correct approach to just place different aria-label on each header?

Thank you!

1 Like
2

That is certainly the conclusion I’d reach from the lint guide. You could always turn on VoiceOver or other screen reader and navigate your page to ensure the navigation makes sense verbally. And if you want to dig in a little more on what is most semantically correct someone with more knowledge may weigh in here or you could check out the accessibility channel in the Ember discord.

3 Likes
3

Thank you for helping!