CODEWITHSUNDEEP
htmlaccessibilitywai-aria
user20323434
user20323434

Reputation: 1

Accessibility error 'Text not included in an ARIA landmark'

I have a button which opens a calendar modal, I know calendars are bad for accessibility but my client insists on it. This is the code that opens that calendar modal.

<div class="col-sm-6 hidden-xs text-right calendar-cta">
     <a type="button" onclick="openNav()" href="#" class="btn-primary">Calendar view</a>
</div>

I then have a close button on the model, which is where the accessibility error is being produced. The x is showing up as 'Text not included in an ARIA landmark'. What am I doing wrong? What do I need to add in order for this to stop producing the accessibility error. Any help would be hugely appreciated.

<div id="myNav" class="overlay" role="menu">
<a class="closebtn" tabindex="-1" role="menuitem" aria-label="close calendar view">×</a>
<div class="overlay-content">  </div>
</div>

Upvotes: 0

Views: 1971

Answers (2)

grifare
grifare

Reputation: 121

The direct and the short answers to the questions:

  1. What is wrong here is that aria-label does not contain the visible text and it is a concrete WCAG failure under 2.5.3 Label in Name. Why and how it fails is explained under Failure due to the accessible name not containing the visible label text
  2. Two quick and dirty solutions:
  • Write "close calendar view" instead of "x" if possible and remove the aria-label attribute
  • Hide the "x" sign from ARIA by putting it inside <span aria-hidden="true">x</a>. The one and only thing the screen reader will read will be "link close calendar view".

The "Text not included in an ARIA landmark" may still show up, it is a false positive when it is hidden from ARIA.

However, the above fix will fix only 2.5.3, but there are more important issues here.

I wonder

  • Why the role="button" was assigned to an anchor element to make a button, when there is the button element readily available and no link to anywhere was intended. From Bootstrap:

When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

  • What tabindex="-1" does there. It will remove the button from the tab order and the keyboard user will not be able to reach or operate it. It causes a concrete 2.1.1 Keyboard failure.
  • Why closing the calendar view button has a role="menuitem". Is there a menu there?

Moreover, the usage of the "x" character as the only visible accessible name of a button is a 1.3.3 Sensory Characteristics failure. It is an assumption that all users know "x" denotes "close". Just like not everyone understands an asterisk denotes "required fields", ">" sign means "next", or 3 bars on top of each other is now a menu called "hamburger menu". These should all have some textual explanation. Aria label makes the explanation for the screen reader users but some sighted users may still fail to understand what is meant there.

Alternative code, not including how the btn-close works: (Close button Bootstrap v. 5.0)
(Please note that Bootstrap does not address the 1.3.3 criterion explained above, that is why I included a tooltip in my suggestion.)

<div class="col-sm-6 hidden-xs text-right calendar-cta">
<button type="button" class="btn-primary" onclick="openNav()">Calendar view</button>
</div>

<div id="myNav" class="overlay">
<button type="button" class="btn-close" aria-label="Close calendar view" title="Close"></button>
<div class="overlay-content">  </div>
</div>

Upvotes: 0

Josh
Josh

Reputation: 4332

This is more of a warning than an error. It's not required under WCAG, although it is best-practice, and you should try to do it if you can.

It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content. https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11

You should ideally be using HTML semantic sectioning elements, like: <main>, <nav>, <aside>, <header>, <footer>, etc. This warning is saying that all rendered content should be in some sort of containing element that has an ARIA role associated with it.

There's a great chart that maps all of the HTML 5 semantic elements to their implied ARIA roles.

I'd also recommend changing your a.closebtn to a button element and removing tabindex="-1". Since you're not navigating to a different location, but rather doing something that causes a change to the UI, I think that a button is a more appropriate choice. The tabindex attribute isn't necessary and only serves to prevent receiving focus by manually tabbing.

Upvotes: 1

Related Questions