使用网络应用程序访问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登录按钮的可访问性

回答

相关问题