We all know accessibility and SEO are important facets of web application development. Accessibility, itself, speaks to the heart of what the web is all about. Namely, the ability for people to break free from whatever bonds hold them at bay and explore a world vast and wild. I know first hand the power of that freedom.
SEO and Accessibility Matter
Accessibility and SEO come into play particularly with image rich applications. Think Instagram for example. With these types of applications, it is important to specify the alt attribute on each and every image:
Adding Image Overlays (Automatically)
The image must have an overlay class attribute. Then we’ll write code to reuse each image’s alt tag to create a description overlay on hover.
For each image with the class overlay, we start to apply our techniques. First, we wrap that image with description_overlay div and append placeholders for the description content.
Some CSS needs to be messaged a little:
See, not as much CSS as you would think…
After some CSS messaging, we then apply the alt content to the description placeholder. Finally, we apply the mouseover and mouseout hover effects.
Oh and before I forget…Yes - I drove the hell outta it!!! ;)