accessibility and a shopping cart-Twitter bootstrap

Haradzieniec
November 14, 2022
354 views
2 votes
4 Answers

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>

Answers

- user17611060
- November 14, 2022 at 2:14 pm
- 0 votes
0
First, you should add the <ul> or <ol> tag around the list. The screen reader will then announce how many elements that are inside the list. Jaws will announce the example list as: "list with 5 elements". tabindex only makes the elements tabbable with the "TAB" key, remember to add a focus indicator as well.
```
<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>
```
It can be wise to separate the product and price for each list element:
```
<ul>
<li><span tabindex="0">Merchandise</span>: <span tabindex="0">$40</span></li>
</ul>
```
The user can then TAB to get the price information instead of listening to the product description before getting the price. You should try to only use tabindex="0" for tabbable elements or tabindex="-1" for elements that should not get focus

Example: https://stackblitz.com/edit/angular-fecmdv?file=src/app/app.component.html
Login or Signup to reply.

- QuentinC
- November 14, 2022 at 5:17 pm
- 0 votes
0
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.

Login or Signup to reply.

- AlejandroSu225rez
- November 15, 2022 at 2:21 pm
- 0 votes
0
If you don’t have any good reason to add a tabindex="0" (some custom interaction with these elements that is not explained in the question), you must not add tabindex="0" to your elements.

Screen readers provide controls to simply read within a page, instead of interacting with components. Interacting with list items that simply show prices would be unexpected.
```
<ul>
    <li>Merchandise: $40</li>
    <li>Shipping: $10</li>
    <li>Taxes: $0.40</li>
    <li>Total: $50.40</li>
</ul>
```
I deleted the <span>, it’s not necessary for accessibility (you can keep it if you need it for any other reason).

Regarding the .sr-only question, it’s also not necessary. For example, Voice Over reads $40 as "forty dollars".
Login or Signup to reply.

- Andy
- November 29, 2022 at 5:40 pm
- 0 votes
0
You should simply leave the list as-is, without tabindex, but could help users skip the list of products in the cart by providing headlines:
```
<h2>Products</h2>
…

<h2>Summary</h2>
<ul>
    <li>Merchandise: $40</li>
    <li>Shipping: $10</li>
    <li>Taxes: $0.40</li>
    <li>Total: $50.40</li>
</ul>
```
The expectations for a shopping cart are the same for screen reader users and non-sr users: Some interaction is available to remove products or change their number, but mainly they read to make sure they got everything.

Screen readers provide controls to read within a page, instead of interacting with components (that would be tab). Even tables are not read in an interactive or form mode.

They also provide shortcuts to jump to the next headline.

If there is interaction

Should you actually provide interaction on these <span> elements, by binding keydown and click handlers, you’ll need to communicate the nature of that interaction, by assigning a proper role to these spans, like role="button".

On providing different texts to screen readers

In most cases it’s not recommended to make screen readers announce texts in a certain way. They do have logic implemented already, and their users are accustomed to that. VoiceOver announces $40 as ‘fourty dollars’, for example. Users can also customize how certain things are announced, which should be respected.
Login or Signup to reply.