In Gutenberg, I have added your Service Section and added 6 service blocks. All is fine, except in the website’s first-time load, the WebAIM WAVE tool shows a warning for all the Service Links.
Empty link
A link contains no text.What It Means
A link contains no text.
Why It Matters
If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.
How to Fix It
Remove the empty link or provide text within the link that describes the functionality and/or target of that link.
<!-- Inaccessible Inline SVG Empty Link generate from your Code -->
<div class="link">
<a >
<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 493.356 493.356">
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"></path>
</svg>
</a>
</div><!-- Accessible Fixed Inline SVG Link -->
<div class="link">
<title id="sstitletext">Service Title</title>
<a >
<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 493.356 493.356" role="img" aria-labelledby="sstitletext">
<path d="M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z"></path>
</svg>
</a>
</div>I have added role =”img” and aria-labelledby=”sstitletext” to the <svg> tag where the attributes match the ids of the defined title. When a screen reader encounters the SVG, it would read out the Service Section Title: “Service Title.” This basically works like an IMG Tag ALT attribute.
Please replace the Title value with the Service Title. Kindly update your plugin with Fixed code and release a new version, so that I can update the plugin in my end to fix accessibility issues at the earliest.
Hi, this is a bit of an odd problem, but it seems that on pages with the services section block, there is a 404 error in the console due to a missing file service-pattern.png. The weird part is that it’s trying to load that file from our staging website’s url, but I don’t know where that is defined on our production site. Even when remaking the block from scratch it still tries to load that png from our staging url. Where is this url defined? Is it possible to get it to load from the domain that it’s actually on? Thanks
How do you change the icon?
]]>Hi. My theme uses the Elementor plugin for creating and editing pages. Does your plugin work with it as I cannot find a way to add a service grid section
]]>Hi there,
I activated the plugin there are different development scripts loaded including React, etc. Here is a screenshot https://share.cleanshot.com/g3njYNvG
No scripts are loaded if the plugin is deactivated.
I doubt that those plugins are needed on the frontend. Could you please clarify why they are included on the frontend and how to disable them?
Best Regards!
Ramzesimus
I apologise if I am missing this option from what is already available but I seem to be unable to centre align the title and description of each of the services blocks I am creating. Is there a way I am able to do this>
]]>Hi great plugin so far. One thing I’m struggling with is that if there is no link in the link settings box, it still defaults to a clickable link pointing to it’s own page (#).
Any way to make it not clickable?
Hi,
I have a number of services included in my web site and service items that have images for icons. I have changed the width to 100%, but the heights are different due to different aspect ratios. How can I apply css to ensure that there is consistency across services elements within a service and across all services.
I have used the below for one service and tried the same principle on others, but it’s painful when I have so many, and doesn’t seem to work on all services.
`#ssbServices-7b7649e5-6 .ssbServices .ssbService .icon {
padding: 0px 0px 10px 0px;
margin: 0px 0px 20px 0px;t Width: auto;
height: 150px;
object-fit: cover;
vertical-align: middle;
}
I don’t really want to resize all images to the same aspect ratio as some are used elsewhere. I don’t also want to duplicate images just for this purpose.
I’m I asking too much?
Regards
Andy
]]>