Accessibility Complaint Issue with mdb-table-paginatio


Topic: Accessibility Complaint Issue with mdb-table-paginatio

angularspa asked 6 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>


Damian Gemza staff answered 6 years ago

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


angularspa answered 6 years ago

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.


Damian Gemza staff answered 6 years ago

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

We'll handle this.

Best Regards,

Damian


angularspa commented 6 years ago

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


Damian Gemza staff commented 6 years ago

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

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: Desktop
  • Browser: chrome
  • OS: windows 7
  • Provided sample code: No
  • Provided link: No