In the case of icons, use alt text that describes the function of the icon when clicked. Write concise, effective alt text.Īlternative text (or alt text for short) is a must for accessible images, as it describes the image to visitors using screen readers. You can easily check the color contrast of your icons with an online contrast checker like this one. If you don’t know exactly what that means, that’s okay. The Web Content Accessibility Guidelines recommend a contrast ratio for images of at least 4.5:1 (with the exception of decorative images and images that are part of an inactive interface component). Also, these icons would be challenging for anyone to see when shrunk down on a smaller screen. However, due to low color contrast, those with low vision or color blindness might not be able to. Most visitors would be able to see these social media icons. If an icon's color contrast is too low relative to its background color, some users with limited vision may not be able to see or use it. You should also consider color for icon accessibility. In fact, an A/B test showed better engagement and conversions when the word “Menu” was added to the icon.Īdding text labels has the added benefit of making the hit area for the link bigger, so it’s easier to click or tap and reduces interaction cost. For most icons, however, it’s necessary to accompany the image with a text label to avoid ambiguity.Įven the ubiquitous hamburger icon on mobile menus can be overlooked by users. A magnifying glass, which means "search" is one of the few that's truly widely recognized. The reason this is important is because universally understood icons are rare. You might wonder why including text is necessary - after all, isn’t the point of icons to replace text? In the Google Maps example above, also notice the text next to each icon. Use accompanying text to reduce ambiguity. These options appear at the top of the page even before you conduct a search, and are designed to contrast with the background well enough to be visible. For instance, clicking on the restaurant icon will show a list of local restaurants, which are marked on the map with the knife and fork icon. Using the icon menu (pictured below), a visitor can search for grocery stores, restaurants, takeout options, hotels, and gas stations in the area by clicking an icon. a click or a mouse hover), it may be missed, meaning not all users will get the same information from the page. If an icon first requires interaction from the user to be seen (e.g. To be accessible, icons should be clearly visible on the web page. Here are some tips to keep in mind when designing or implementing an icon set. To make your icons accessible to visitors on your website or app, you’ll want to follow a handful of accessibility principles. Following accessibility guidelines in all aspects of your site’s design - including icons - ensures that those with disabilities, impairments, and limitations are not denied the same experience as the rest of your visitors. Over one billion people live with some form of disability, and we’ll bet that these users account for a significant portion of your user base. Accessible icons ensure that every visitor can understand and access the icons on the page and their associated information or functionality. In this post, we'll cover what you need to know to create web-accessible icons, including:Īccessible icons are icons that can be understood by all website visitors, regardless of any impairments, disabilities, or limitations they may have. But to be truly inclusive, your website should use accessible icons.
0 kommentar(er)
