For my accessibility related question, I googled "accessibility shopping cart" and visited many popular online stores but didn't find a clear answer on my question. From the accessibility point of view, for the shopping cart, should I add a tabindex="0" (the code is slightly simplified) for
<ul>
<li><span tabindex="0">Merchandise: $40</span></li>
<li><span tabindex="0">Shipping: $10</span></li>
<li><span tabindex="0">Taxes: $0.40</span></li>
<li><span tabindex="0">Total: $50.40</span></li>
</ul>
or simply
<ul>
<li><span>Merchandise: $40</span></li>
<li><span>Shipping: $10</span></li>
<li><span>Taxes: $0.40</span></li>
<li><span>Total: $50.40</span></li>
</ul>
, or separate merchandise and $40 as
<li><span tabindex="0">Merchandise</span>: <span tabindex="0">$40</span></li>
, or even add (if Twitter Bootstrap is used with its sr-only class)
<li><span tabindex="0">Merchandise</span>:
<span tabindex="0">
<span aria-hidden="true">$</span>40<span class="sr-only"> American dollars</span>
</span>
</li>
The main question you should ask is: are all these list items interactive ? Does it happen something when they are clicked ?
If your answer to this question is yes, then you should add tabindex=0 so to make the interactive element usabe by keyboard only users. If you don't do it, then your site isn't accessible for them.
If your answer to this question is no, then tabindex=0 useless and even counter-productive. Keyboard only users will have to press tab more times to skip your elements which do nothing, and reach actual useful elements. That's a waste of time and usabiility.
Of course, in reality, it's more complex than just that. For example, an element may be interactive at some moment, but not at some other moment, in which case tabindex=-1 should be used to disable focusability when it isn't desired. But here are the basics.