HTML

      
            
        
        
            
    
      
     
        
      Name:        
            
     
      
     
Drink Options
      
     
        
      
          Water        
        
      
          Tea        
        
      
          Coffee        
        
      
          Cola        
        
      
          Ginger Ale        
      
     
      
     
        
      Order a drink      
     
    
    
      

省略css，js是核心，以下为部分核心js代码

function RadioGroup(id) {    this.el = document.querySelector(id);    this.buttons = slice(this.el.querySelectorAll('.radio'));    this.focusedIdx = 0;    this.focusedButton = this.buttons[this.focusedIdx];    this.el.addEventListener('keydown', this.handleKeyDown.bind(this));    this.el.addEventListener('click', this.handleClick.bind(this));    // Set ARIA role for the radio group.    this.el.setAttribute('role', 'radiogroup');    var firstButton = true;    for (var button of this.buttons) {      if (firstButton) {        button.tabIndex = '0';        firstButton = false;      } else {        button.tabIndex = '-1';      }    // Set ARIA role for the radio.      button.setAttribute('role', 'radio');    }  }

上面为radiogroup和radio添加role

RadioGroup.prototype.handleKeyDown = function(e) {  switch(e.keyCode) {    case VK_UP:    case VK_LEFT: {      e.preventDefault();      this.focusedIdx--;      if (this.focusedIdx < 0)        this.focusedIdx = this.focusedIdx + this.buttons.length;      break;    }    case VK_DOWN:    case VK_RIGHT: {      e.preventDefault();      this.focusedIdx = (this.focusedIdx + 1) % this.buttons.length;      break;    }  case VK_SPACE:      var focusedButton = e.target;      var idx = this.buttons.indexOf(focusedButton);      if (idx < 0)        return;      this.focusedIdx = idx;      break;    default:      return;  }  this.changeFocus();};RadioGroup.prototype.handleClick = function(e) {  var button = e.target;  var idx = this.buttons.indexOf(button);  if (idx < 0)    return;  this.focusedIdx = idx;  this.changeFocus();};

上为监听器函数

RadioGroup.prototype.changeFocus = function() {   // Set the old button to tabindex -1   this.focusedButton.tabIndex = -1;   this.focusedButton.removeAttribute('checked');   this.focusedButton.setAttribute('aria-checked', 'false');   // Set the new button to tabindex 0 and focus it   this.focusedButton = this.buttons[this.focusedIdx];   this.focusedButton.tabIndex = 0;   this.focusedButton.focus();   this.focusedButton.setAttribute('checked', '');   this.focusedButton.setAttribute('aria-checked', 'true'); }; var group1 = new RadioGroup('#group1');}());

aria-checked这个属性不用初始化，可以在焦点改变时修改