android svg按钮_如何使您喜欢的SVG按钮可访问

android svg按钮

by Jonathan Speek

乔纳森·斯派克(Jonathan Speek)

You may very well find yourself one day having to build some crazy button a designer dreamed-up. You might start reaching for that good old <div>, but easy there big-shifter ? — let’s try and use that <;button> element you’re avoiding ?

您可能有一天会发现自己不得不建立一些设计师梦crazy以求的疯狂按钮。 您可能会开始尝试那个很好的旧版<d iv>，但是容易吗？ —让我们尝试使用您要避免的that < ; button>元素吗？

We’ll start by simply grabbing the code for an SVG icon that we want to use. I quickly made a Chemex icon you can use here (I love me some coffee ☕️). Paste that between a <button> tag in your HTML like so (the SVG code will be pretty lengthy).

我们首先简单地获取要使用的SVG图标的代码。 我Swift制作了一个Chemex图标，可以在这里使用(我爱我一些咖啡☕️)。 像这样将其粘贴在HTML中的<butt on>标记之间(SVG代码会很长)。

We want this button stripped of its default styling, so let’s give the button an “id” and we’ll target it with some CSS.

我们希望该按钮去除其默认样式，因此让我们为该按钮指定一个“ id”，然后使用一些CSS作为目标。

Give the button a good width/height that is larger than our SVG — this will help the visibility of the outline. Speaking of, make sure the contrast ratio between your outline color and the background color passes this. Get rid of that pesky border and background, make sure the cursor is set to pointer.

为按钮设置一个比我们的SVG大的宽度/高度-这将有助于轮廓的可见性。 说到这一点，请确保您的轮廓色和背景色之间的对比度通过this 。 摆脱讨厌的边框和背景，确保将光标设置为指针。

At this point, you have a clickable button that, when clicked, shows the default outline your browser has chosen for focus states. Let’s change that and make it better.

此时，您有一个可单击的按钮，单击该按钮可显示浏览器为焦点状态选择的默认轮廓。 让我们改变它，使其更好。

Now when we click or tab to our button, we get a cool little dashed outline that lets us know where we’re focused.

现在，当我们单击或单击按钮时，我们会看到一个很酷的虚线虚线，让我们知道我们关注的重点。

We also want to ensure that the SVG itself does not get an outline if clicked. And we want to make certain Firefox doesn’t add its default dotted outline. While we’re at it, we can give the SVG a little hover effect.

我们还希望确保SVG本身在单击时不会出现轮廓。 并且我们要确保Firefox没有添加其默认的虚线轮廓。 在执行此操作时，我们可以给SVG一点悬浮效果。

Now we can get to the cool parts ? We don’t want to annoy or confuse our screen reader users with our button. So we need a good short description of what to expect. You would also typically want visual users to have an idea of what it is they’re clicking on as well, for now let’s keep ’em guessing...

现在我们可以进入最酷的部分了吗？ 我们不想让我们的屏幕阅读器用户烦恼或使我们的按钮感到困惑。 因此，我们需要对期望的内容进行简短的描述。 您通常还希望视觉用户也了解他们正在点击的内容，现在让我们继续猜测...

We can easily achieve this by putting a <span> element around the text in our button and styling it out of view. Make sure not to set display to “none”, as this will also prevent our screen readers for accessing it.

我们可以通过在按钮中的文本周围放置<sp an>元素并设置其样式以使其不可见来轻松实现此目的。 让苏再不要设置显示为“无”，因为这也将防止我们的屏幕阅读器来访问它。

Lastly, let’s make sure we’ve:

最后，让我们确保我们已经：

• hidden the SVG from anyone using assistive technology and
  对使用辅助技术的人隐藏SVG，并且
• set the tabindex to “0” so that the browser uses the expected tab order for any keyboard users.
  将tabindex设置为“ 0”，以便浏览器为所有键盘用户使用预期的Tab键顺序。

You should now have a really accessible button that you can be proud of ?Besides patting yourself on the back — do it now — going forward you now have some reusable patterns that you can implement that help make the web just a little more accessible ?

您现在应该拥有一个真正可访问的按钮，让您引以为豪。除了将自己拍在背面(现在做)之外，现在您还可以实现一些可重用的模式，这些模式可以实现，从而使网络更易于访问？

Here’s a link to the CodePen example, feel free to fork your own copy ?

这是CodePen示例的链接 ，您可以随意复制自己的副本吗？

Thanks for reading. If you have some knowledge to drop on accessibility, be sure to leave a comment.

谢谢阅读。 如果您对可访问性有所了解，请务必发表评论。

And you can follow me on Twitter here.

您可以在Twitter上关注我 。

翻译自: https://www.freecodecamp.org/news/how-to-make-your-fancy-svg-button-accessible-83c9172c3c15/

android svg按钮