Screen readers and themes
When you’re making a theme, it’s important to consider all the people who may be using or viewing your work.Â
Even if your theme is very readable and overall user friendly, it might still be difficult for screen reader users to navigate.Â
Consider these things when designing your theme:
Screen readers can’t read icons properly, so it’s important to add something like aria-hidden=“true” in the html for your icon. (example, <span class=“icon” aria-hidden=“true”></span>)
This allows the icon to be displayed on the page, but won’t be picked up by assistive technology
Make sure you include the alt attribute for your image tag! This serves two main purposes: describes the image for those who can’t see it, and replaces the image when it can’t be loaded properly on the page.
If you don’t include an alt, the default will be the name of the image file, which isn’t something you want if the image file name is long or doesn’t make sense. (Note: including an alt tag for your photo posts is actually mandatory for the theme garden. It’s done by adding alt=“{PhotoAlt}” to the image tag for photo posts.)
Also, try to avoid using images with important text on them, or at least provide an image description if you do.
Does your link open in a new tab/redirect you? Or do other elements in your theme need more clarification?
You can provide descriptive text for screen readers without cluttering up the theme itself. You can do this by positioning the text off the screen or otherwise hiding it with the CSS so ONLY screen readers will pick it up.Â
A common method for this is to do this:
<span style="position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);" >This text is for screen readers only. It can’t be viewed on the page.</span>Â
I hope this helped! Here’s more info on designing for screen readers
