Accessibility Complaint Issue with mdb-table-paginatio

Topic: Accessibility Complaint Issue with mdb-table-paginatio

angularspa free asked 5 years ago

<mdb-table-pagination [searchDataSource]="element" (nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)"><br> </mdb-table-pagination>

Generated HTML code should comply to Accessibility Standard

<p></p> is generated under </uL>, which does not comply with Accessibility Code

<mdb-table-pagination _ngcontent-c4=""><nav><ul class="pagination pagination-circle pg-blue d-flex flex-center">**<p>1 - 5 of 15</p>**<li class="page-item disabled"><a aria-label="Previous" class="page-link" mdbwaveseffect=""><span aria-hidden="true">«</span></a></li><li class="page-item"><a aria-label="Next" class="page-link" mdbwaveseffect=""><span aria-hidden="true">»</span></a></li></ul></nav></mdb-table-pagination>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Okay, now I get it. Thanks for your report!

We'll handle this.

Best Regards,

Damian

angularspa free commented 5 years ago

Thanks, would you please advise when the fix will be released?

Damian Gemza staff commented 5 years ago

Please watch for our changelog change - that's the best way to know when something changes.

Best Regards,

Damian

Add comment

angularspa free answered 5 years ago

0 0 Best answer

<p>In above MDB generated code for table pagination includes the <code><p></code> tag inside the <code><ul></code> tag.
Due to <code><p></code> tag its failing WCAG 1.3.1 success criteria.
Possible right way fix this is to exclude <code><p></code> tag from <code><ul></code> and place it before <code><ul></code></p>

<p><strong>Explanation:</strong>
<code><ul></code> and <code><ol></code> must only directly contain <code><li></code>, <code><script></code> or <code><template></code> elements</p>

<p><strong>Why this is Important</strong>
Screen readers have a specific way of announcing lists. This feature makes lists clearer to understand, but will only work if lists are properly structured.
When content elements other than list items are contained within a set of list elements, screen readers cannot inform the listener that they are listening to items within the list.
For a list to be valid, it must have both parent elements (a set of ul elements or a set of ol elements) and child elements (declared inside of these tags using the li element), and any other content elements are invalid.
Although some non-content elements such as script, template, style, meta, link, map, area, and datalist are permitted within lists, content elements other than li are not permitted.</p>

Please insert min. 20 characters.

In above MDB generated code for table pagination includes the <p> tag inside the <ul> tag. Due to <p> tag its failing WCAG 1.3.1 success criteria. Possible right way fix this is to exclude <p> tag from <ul> and place it before <ul>

Explanation: <ul> and <ol> must only directly contain <li>, <script> or <template> elements

Why this is Important Screen readers have a specific way of announcing lists. This feature makes lists clearer to understand, but will only work if lists are properly structured. When content elements other than list items are contained within a set of list elements, screen readers cannot inform the listener that they are listening to items within the list. For a list to be valid, it must have both parent elements (a set of ul elements or a set of ol elements) and child elements (declared inside of these tags using the li element), and any other content elements are invalid. Although some non-content elements such as script, template, style, meta, link, map, area, and datalist are permitted within lists, content elements other than li are not permitted.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear angularspa,

Could you please provide me with some information about this problem in the context of Accesibility? Where can I read about the accessibility standards for this case?

I would like to check this code and fix it if there's a problem.

Best Regards,

Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.2
Device: Desktop
Browser: chrome
OS: windows 7
Provided sample code: Yes
Provided link: No

angularspa

72Support score
8Questions 3Answers 0Snippets