2017-02-03 76 views
0

我正在將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登錄按鈕?

+0

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

回答

0

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 
); 

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