Straightforward Accessibility

Estelle Weyl

http://instartlogic.github.io/p/oscon/requirements.html

Requirements

and issues with their implementation

Original Site
WebPageTest
My Version
WebPageTest
WebPageTest
My Version
Github Repo jquery at 37.7kb and input masking script is 29.6kb
Open accessible input masking script is only 2.0kb

In Production

https://secure.checkout.visa.com/addressaddnew

Github Repo
Go
Merry-Go-Round script is 1.1kb 
<div 
class="bundleAddressCollection-button-wrapper">
  <div class="viewButton viewButton--splitBtnLeft">
    <input class="viewButton-button" name="Add" type="button"
     value="Add" aria-label="Add a new address" 
     aria-hidden="false" role="">
  </div>
  <div class="viewButton viewButton--splitBtnRight">
    <input class="viewButton-button" name="Edit" type="button"
     value="Edit" aria-label="Edit this address" 
     aria-hidden="false" role="">
  </div>
</div>
<div class="carousel address">
  <button class="navigation-control prev disabled" 
  type="button" style="visibility:visible;" aria-hidden="true" 
  tabindex="-1">
    <img class="nullElementForA11yCompliance">
  </button>
  <div class="slit">
    <div style="left: 0px;" class="items-container" 
    role="listbox">
      <div class="item" role="option" tabindex="0" 
      aria-selected="true" aria-label="Estelle Weyl Alley Not A 
      Street   Valley City ND 58072 US 4155551212">
        <div class="item-body" data-carousel-index="0" 
        aria-label="Estelle Weyl Alley Not A Street   Valley City
         ND 58072 US 4155551212">
          <div class="inner-wrapper shipping-address">
            <span> </span>
            <div class="card-base">
              <p class="detail-row mplus">Estelle Weyl
              </p>
              <p class="detail-row">
                <span> </span>
                <span>Alley Not A Street</span>
                <span> </span>
              </p>
              <p class="detail-row">
                <span>Valley City</span>
                <span> </span>
                <span>ND</span>
                <span> </span>
                <span>58072 </span>
              </p>
              <p class="detail-row">4155551212
              </p>
            </div>
            <span>
            </span>
          </div>
        </div>
      </div>
      <div class="item" role="option" tabindex="-1" 
      aria-selected="false" aria-label="Estelle Weyl 194 Castro 
      Street   Mountain View CA 94041 US 6504981212">
        <div class="item-body" data-carousel-index="1" 
        aria-label="Estelle Weyl 194 Castro Street   Mountain 
        View CA 94041 US 6504981212">
          <div class="inner-wrapper shipping-address">
            <span> </span>
            <div class="card-base">
              <p class="detail-row mplus">Estelle Weyl
              </p>
              <p class="detail-row">
                <span> </span>
                <span>194 Castro Street </span>
                <span> </span>
              </p>
              <p class="detail-row">
                <span>Mountain View </span>
                <span> </span>
                <span>CA </span>
                <span> </span>
                <span>94041 </span>
              </p>
              <p class="detail-row">6504981212</p>
            </div>
            <span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="navigation-control next" type="button" 
  style="visibility:visible;" aria-label="Go to next billing 
  address" aria-hidden="false" tabindex="0">
    <img class="nullElementForA11yCompliance">
  </button>
  <div class="graphic-pagination-outer-wrapper">
    <div class="graphic-pagination-inner-wrapper">
      <button tabindex="0" type="button" role="option" 
      aria-selected="true" aria-label="Currently selected address 
      1 of 2" class="pagination-item active">
      </button>
      <button tabindex="-1" type="button" role="option" 
        aria-selected="false" aria-label="Go to last billing 
      address of 2" class="pagination-item">
      </button>
    </div>
  </div>
</div>
<fieldset class="mgr" id="address">
<legend>Select an address to edit:</legend>
<div>
  <a class="backward" data-move="backward" data-mgr="shipping-addresses" hidden></a>
  <ul class="mgr-labels left0">
    <li>
      <label for="address1">
      <p>Estelle Weyl</p> 
      <p>194 Castro Street</p>
      <p>Mountain View CA 94041 US</p> 
      <p>6504981212</p>
      </label>
    </li>
    <li>
      <label for="address2">
      <p>Estelle Weyl </p> 
      <p>Alley Not A Street </p>   
      <p>Valley City ND 58072 US </p> 
      <p>4155551212</p>
      </label>
    </li>...
  </ul>
  <a class="forward" data-move="forward" data-mgr="shipping-addresses" hidden></a>
  </div>
  <ul id="addressradios" class="mgr-radios">
    <li>
      <input type="radio" name="shipping-addresses" data-value="0" id="address1" checked><span></span>
    </li>
    <li>
      <input type="radio" name="shipping-addresses" data-value="1" id="address2"><span></span>
    </li>...
  </ul>
  </fieldset>
Example Page
5.8kb for the dropkick js file with jquery dependencyof 38.6 kb minified 
<section id="footer-listbox" role="listbox" aria-label="Select your country" class="footer-languageSelector">
  <section role="option" tabindex="-1" aria-selected="true" 
    id="footerLanguageOption-0" data-value="AR" class="footer-languageSelector-item">
    <label>Argentina</label>
    <i class="footer-languageSelector-item-icon footer-img-AR"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-1" data-value="AU" class="footer-languageSelector-item">
    <label>Australia</label>
    <i class="footer-languageSelector-item-icon footer-img-AU"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-2" data-value="BR" class="footer-languageSelector-item">
    <label>Brazil</label>
    <i class="footer-languageSelector-item-icon footer-img-BR"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-3" data-value="CA" class="footer-languageSelector-item">
    <label>Canada</label>
    <i class="footer-languageSelector-item-icon footer-img-CA"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-4" data-value="CL" class="footer-languageSelector-item">
    <label>Chile</label>
    <i class="footer-languageSelector-item-icon footer-img-CL"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-5" data-value="CN" class="footer-languageSelector-item">
    <label>China</label>
    <i class="footer-languageSelector-item-icon footer-img-CN"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-6" data-value="CO" class="footer-languageSelector-item">
    <label>Colombia</label>
    <i class="footer-languageSelector-item-icon footer-img-CO"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-7" data-value="HK" class="footer-languageSelector-item">
    <label>Hong Kong</label>
    <i class="footer-languageSelector-item-icon footer-img-HK"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-8" data-value="MY" class="footer-languageSelector-item">
    <label>Malaysia</label>
    <i class="footer-languageSelector-item-icon footer-img-MY"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-9" data-value="MX" class="footer-languageSelector-item">
    <label>Mexico</label>
    <i class="footer-languageSelector-item-icon footer-img-MX"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-10" data-value="NZ" class="footer-languageSelector-item">
    <label>New Zealand</label>
    <i class="footer-languageSelector-item-icon footer-img-NZ"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-11" data-value="PE" class="footer-languageSelector-item">
    <label>Peru</label>
    <i class="footer-languageSelector-item-icon footer-img-PE"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-12" data-value="SG" class="footer-languageSelector-item">
    <label>Singapore</label>
    <i class="footer-languageSelector-item-icon footer-img-SG"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-13" data-value="ZA" class="footer-languageSelector-item">
    <label>South Africa</label>
    <i class="footer-languageSelector-item-icon footer-img-ZA"></i>
  </section>
  <section role="option" tabindex="-1" aria-selected="false"  
    id="footerLanguageOption-14" data-value="AE" class="footer-languageSelector-item">
    <label>United Arab Emirates</label>
    <i class="footer-languageSelector-item-icon footer-img-AE"></i>
  </section>
</section>
Selector script is 917 bytes 
<fieldset class="languageSelector">
  <legend>Select your country:</legend>
  <ul>
    <li>
        <input type="radio" name="langSelect"  id="langAR" value="AR">
        <label for="langAR" class="langAR">Argentina</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langAU" value="AU">
        <label for="langAU" class="langAU">Australia</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langBR" value="BR">
        <label for="langBR" class="langBR">Brazil</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langCA" value="CA">
        <label for="langCA" class="langCA">Canada</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langCL" value="CL">
        <label for="langCL" class="langCL">Chile</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langCN" value="CN">
        <label for="langCN" class="langCN">China</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langCO" value="CO">
        <label for="langCO" class="langCO">Colombia</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langHK" value="HK">
        <label for="langHK" class="langHK">Hong Kong</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langMY" value="MY">
        <label for="langMY" class="langMY">Malaysia</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langMX" value="MX">
        <label for="langMX" class="langMX">Mexico</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langNZ" value="NZ">
        <label for="langNZ" class="langNZ">New Zealand</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langPE" value="PE">
        <label for="langPE" class="langPE">Peru</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langSG" value="SG">
        <label for="langSG" class="langSG">Singapore</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langZA" value="ZA">
        <label for="langZA" class="langZA">South Africa</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langAE" value="AE">
        <label for="langAE" class="langAE">United Arab Emirates</label>
    </li>
    <li>
      <input type="radio" name="langSelect" id="langUS" value="US">
        <label for="langUS" class="langUS">United States</label>
    </li>
  </ul>
</fieldset>
Photo: Kenneth Lu

think

Next

Estelle Weyl

www.standardista.com
www.instartlogic.com/blog

@webdevtips
@estellevw
@standardista