Menu icon Foundation
getting Orbit Next/Previous arrows to validate (documentation improvement?)

at http://foundation.zurb.com/sites/docs/orbit.html there is discussion of implementing Next/Previous arrows

Implemented on an HTML5 web page as the 6.2.2 documentation is written, validator.w3.org throws errors:

"Element button not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 43, column 4; to line 43, column 34
iner">↩ <button class="orbit-previous"><span"

 

This error can be avoided by wrapping a construct such as (the suggested)

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

with <li>

<li>
  <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
  <button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>
</li>

at which point the page will validate without errors.

Orbit seems to work without issue with this added <li> construct.

Does the Foundation documentation need to be updated or is there something I am doing incorrectly (is there a better way)?

Orbitvalidation

at http://foundation.zurb.com/sites/docs/orbit.html there is discussion of implementing Next/Previous arrows

Implemented on an HTML5 web page as the 6.2.2 documentation is written, validator.w3.org throws errors:

"Element button not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 43, column 4; to line 43, column 34
iner">↩ <button class="orbit-previous"><span"

 

This error can be avoided by wrapping a construct such as (the suggested)

<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>

with <li>

<li>
  <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
  <button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>
</li>

at which point the page will validate without errors.

Orbit seems to work without issue with this added <li> construct.

Does the Foundation documentation need to be updated or is there something I am doing incorrectly (is there a better way)?