If you can afford it, it can be very helpful to have someone test your site, app, or product for accessibility. This will give you a full understanding of how a user with a disability would actually interact with your build, before launching it. You may also be interested in: Why, how and when to use usability tests Shopify accessibility and themes Shopify themes and web Mongolia Email List accessibility Now that I’ve convinced you of the importance of accessibility, let’s take a look at how you can start using accessibility principles when developing Shopify Themes for your customers. From a development perspective, HTML is the foundation of your website’s accessibility. By making sure to include semantic markup and descriptive tags where appropriate,
on Continuous Development
your code will be able to better inform users about the type of content found on your site. For Shopify stores, the same principle applies along with some quick changes to Liquid as well. The high-impact elements below are ripe for accessibility optimization and were identified while researching and testing accessibility on our own themes on the Shopify Theme Store. 1. Images and alt text Any graphical element on your page that contains information relevant to the user, such as a product image, must have a text backing to make it truly accessible, and for images, this is the alt. Altit is extremely important for users who rely on screen readers to interact with page content. When written effectively, text altgives screen readers a contextual description of what’s being displayed within an image, rather than just a random URL pointing to your jpeg file.
When drafting copy alt, try to keep things clear, concise, and contextual to give your users the most beneficial description possible. For example, if your store includes a product image for blue suede shoes, your text altshould say “blue suede shoes” or “blue suede shoes product image.” Shopify helps make this process easy by automatically generating text altfor product images and collections. For product images in particular, Shopify will take the product name and automatically set it as the text altfor you. Altalt text should also to any images you upload through your theme settings, such as heroes or slideshows. For example, if you don’t have a setting that works contextually with the image when using a slideshow, you can add a setting altbelow the image that defaults to the header setting of slide_headingto define its alt text.
Adopt a Different Way of Working
It is important to note that you should leave the alt tag blank where images are. Which are purely decorative and not part of the main content of your theme. Such as background images. This will ensure that users are with only the most relevant content for their shopping experience. Icons are in almost all online stores as they can improve. Your ability to quickly communicate the key actions you want your users to take. But just like images, icons can lose this function entirely. When users are visually and rely on a screen reader to navigate the web. I’m a strong supporter of using SVG icons in all layouts. But in their standard state, they can present accessibility issues. Screen readers can’t read SVG elements, and because of this. They won’t know to say “cart” when they hover over your cart icon.