We have top level categories on our site that have a bunch of child categories within them. So for example we have a category called "Aquarium Supplies" with like 50 categories within it (i.e. Lighting, Filters, etc.).
A little while back, the person who had my job changed the category titles to be more descriptive, but ultimately this just ended up putting "Aquarium" in front of every category (i.e. "Aquarium Lighting, "Aquarium Filters", etc.). So the listings of categories ended up being "Aquarium... Aquarium... Aquarium..." and so on, which we've gotten complaints about because of the amount of categories is just overwhelming and seeing "Aquarium" 50 times on a page is ridiculous.
Fast forward to now, where we've just gone through making the website more ADA friendly. Well, ADA doesn't like when you have generic links like "Read More" because things need to make sense out of context. ADA recommends setting up "hidden" text that is still readable by a screen reader. So what you end up doing is the following:
<p><span class="ada">10 tips for travelling - </span>Read More</p>
With the following CSS
This hides the text within the span tag but allows for it to still be read by a screen reader.
So my question is this: If I want to remove every instance of "Aquarium" from my category names, but still technically keep them so my inbound links are descriptive enough for SEO purposes, would using this ADA method of setting font-size to 0 work? Or would Google see it as spam?
EDIT: A visual of what I want to do
<ul> <li><span class="ada">Aquarium </span>Lighting</li> <li><span class="ada">Aquarium </span>Filters</li> </ul>