使用網絡應用程序訪問Google登錄按鈕的可訪問性

我正在將Google Sign-in與我的網絡應用程序集成，它會自動呈現基於ID的按鈕我提供gapi.signin2.render()功能。我擔心的是，所有文檔都使用<div>作爲按鈕的包含元素，因此用戶被迫使用鼠標單擊按鈕，而不是選擇選項卡並將其激活。即使在render()呼叫之後，該容器只包含<div>,<span>和<svg>元素的組合，因此用戶無法選擇任何內容。使用網絡應用程序訪問Google登錄按鈕的可訪問性

谷歌在building a custom sign-in button提供了文檔，但即使使用的標記，看起來像這樣：

<div id="gSignInWrapper"> 
    <span class="label">Sign in with:</span> 
    <div id="customBtn" class="customGPlusSignIn"> 
    <span class="icon"></span> 
    <span class="buttonText">Google</span> 
    </div> 
</div>

如果我嘗試使用<button>或<a>作爲容器，我不能使用回車鍵，同時集中在元素來調用按鈕上的事件處理程序。

如何製作可供不使用鼠標的用戶使用的Google登錄按鈕？

來源

2017-02-03 Colin Miller

太可怕了！谷歌通常會試圖建立可訪問性的東西。雖然可能有解決方法，但需要使用谷歌解決方案，以便每個人都無需編寫自己的解決方法。請把這個給他們，讓他們修理它。對谷歌感到羞恥。 – slugolicious

attempting to find help官方谷歌產品論壇上後，我按照上building a custom button的文件，但改變從顯示什麼那裏，而不是使用一個錨定標記的標記解決了這個。所以，最後，它看起來是這樣的：

HTML：

<a href="#" id="google-signin"> 
    ... More markup here ... 
</a>

的Javascript：

auth2.attachClickHandler(
    document.getElementById('google-signin'), 
    { 'scope': 'profile email' }, 
    onSignIn, 
    onFailure 
);

的元素是現在可聚焦和正確的行爲時按下回車鍵。

來源

2017-04-07 22:09:33

使用網絡應用程序訪問Google登錄按鈕的可訪問性

回答

相關問題