插入收音機組將其焦點移到最後一個單選按鈕而不是第一個

Question

我試圖在電子商務網站的付款頁面上創建可訪問的信用卡選擇。這裏是標記，我有：

.cc__card { 
 
    display: inline-block; 
 
    margin-right: 0.3em; 
 
    position: relative; 
 
} 
 

 
.cc__card>input:focus+label { 
 
    outline-color: -webkit-focus-ring-color; 
 
    outline-style: auto; 
 
} 
 

 
.cc__card>input { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
.cc__icon { 
 
    height: 35px; 
 
    width: 54px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    border: 1px solid transparent; 
 
    border-radius: 0.2em; 
 
    cursor: pointer; 
 
    transition: all 100ms ease-in; 
 
} 
 

 
.cc__icon.not-selected { 
 
    opacity: 0.45; 
 
} 
 

 
.cc__icon.selected { 
 
    border: 1px solid #000; 
 
} 
 

 
.cc__icon--visa { 
 
    background-image: url("../images/cc-icon-visa.png"); 
 
} 
 

 
.cc__icon--mastercard { 
 
    background-image: url("../images/cc-icon-mastercard.png"); 
 
} 
 

 
.cc__icon--amex { 
 
    background-image: url("../images/cc-icon-amex.png"); 
 
} 
 

 
.cc__icon--discover { 
 
    background-image: url("../images/cc-icon-discover.png"); 
 
} 
 

 
.cc__icon--other { 
 
    background-image: url("../images/cc-icon-other.png"); 
 
}

<label for="cardType">Select your Card Type</label> 
 

 
<div class="cc__card"> 
 
    <input id="cc-icon-other" type="radio" name="credit-card" value="other" tabindex="1" /> 
 
    <label class="cc__icon cc__icon--other" for="cc-icon-other"> 
 
    <span class="sr-only">Other</span> 
 
    </label> 
 
</div> 
 

 
<div class="cc__card"> 
 
    <input id="cc-icon-visa" type="radio" name="credit-card" value="visa" /> 
 
    <label class="cc__icon cc__icon--visa" for="cc-icon-visa"> 
 
    <span class="sr-only">Visa</span> 
 
    </label> 
 
</div> 
 

 
<div class="cc__card"> 
 
    <input id="cc-icon-master-card" type="radio" name="credit-card" value="mastercard" /> 
 
    <label class="cc__icon cc__icon--mastercard" for="cc-icon-master-card"> 
 
    <span class="sr-only">MasterCard</span> 
 
    </label> 
 
</div> 
 

 
<div class="cc__card"> 
 
    <input id="cc-icon-discover" type="radio" name="credit-card" value="discover" /> 
 
    <label class="cc__icon cc__icon--discover" for="cc-icon-discover"> 
 
    <span class="sr-only">Discover</span> 
 
    </label> 
 
</div> 
 

 
<div class="cc__card"> 
 
    <input id="cc-icon-american-express" type="radio" name="credit-card" value="amex" /> 
 
    <label class="cc__icon cc__icon--amex" for="cc-icon-american-express"> 
 
    <span class="sr-only">American Express</span> 
 
    </label> 
 
</div>

但是，當我如所示的圖像在標籤進入最後單選按鈕而不是聚焦於第一的無線電組下面：

我需要第一個單選按鈕來關注用戶何時進入收音機組。在Chrome和FF的最新版本中，焦點移動到最後一個單選按鈕（美國運通），但在IE 11中移動到第二個單選按鈕（Visa）。

這裏唯一使用的JS是一個onchange事件處理程序，它只讀取所選單選按鈕的id屬性。

有人可以提供任何建議嗎？

Answer 1

實質上，單選按鈕是一個功能爲單個元素的組，因爲它只保留單個值。標籤到收音機組會將您帶到第一個項目，然後使用您在組內導航的箭頭鍵。

• 對焦可以通過移動到一個單選按鈕組：

  • Tab鍵
  • 訪問鍵或助記符針對標籤
  • 激活標籤（通過輔助技術機制）

• Tab鍵移動foc我們之間的單選按鈕組和其他小部件。

• 當焦點位於該組，並且當沒有選擇的單選按鈕：
  • Tab鍵按下焦點移動到該組中的第一個單選按鈕，但不會選擇的單選按鈕。
  • Shift + Tab鍵將焦點移動到組中的最後一個單選按鈕，但不選擇單選按鈕。
• 當焦點移動到選中單選按鈕的組時，按Tab鍵和Shift + Tab鍵將焦點移動到選中的單選按鈕 。
• 向上箭頭和向下箭頭鍵移動焦點和選擇。
  • 向上箭頭鍵按下將焦點和選擇向前移動通過組中的單選按鈕。如果第一個單選按鈕具有焦點 ，則焦點和選擇將移至組 中的最後一個單選按鈕。
  • 向下箭頭鍵將焦點和選擇向後移動通過組中的單選按鈕。如果最後一個單選按鈕有焦點， 然後焦點和選擇移動到組中的第一個單選按鈕。
  • 空格鍵按鍵檢查當前有焦點的單選按鈕。
• 重新進入組時，焦點返回到前一個焦點（具有選擇集的項目）。
• 按Tab鍵退出組並將焦點移到下一個窗體控件。
• 按下Shift + Tab鍵可退出該組並將焦點移至上一個窗體控件。

還有一個jQuery插件。