Random Accessibility Issue
Recently, My friend asked me about a requirement regarding visibility of H1 and H2 tags. Although i faced the same situation some time back where i asked a lot many experienced persons mainly working with SEO. I received good number of responses but none was able to satisfy so i did what we do best, HIT and TRIAL!!
From the SEO agency, we were instructed to use H1 and H2 tags but as per design, there was no space to accommodate H1 and H2 tags. Main cause of this situation is the increasing need of a better UI requirement/UI experiments which every design agency is introducing to keep their market up among the clients.
Before that, lets review few things,
What are H1 and H2 tags?
H1 and H2 Tags are HTML elements like any other but they have special significance in terms of SEO.
H1 – Header 1 – Page Header
H2 – Header 2 – Sub Header
Search Engines crawlers look for these tags to index the page and at times proved fruitful to achieve a better search ranking. And, we know that reaching to the top 10 of search results is the ultimate goal to win customers nowadays.
In our webpage design, we were having images in place of H1 and H2 tag. We did our first attempt where we included the H1 and H2 tags and make the hidden through CSS.
SEO agency raised their doubts that if content is not human-readable then it might not be recognized by Search Engines. Later, it got confirmed through the trusted sources that if the content is not human-readable, not only search engines discards it moreover, site is penalized for the same.
Place image tags inside H1 and H2 tags and copy the H1 and H2 text in ‘alt’ property of images.
SEO agency confirmed that alt text is human readable and image tag inside H1 and H2 is a possible solution.
Accepted and Successful.
We need meta tags for better search rankings and with the above approach,we have more freedom in implementing the meta tags and achieve improved accessibility.Cheers!