A client recently asked whether adding an accessibility overlay to their site would slow its loading time. I had previously written an article about the use of overlays in general, so I offered to write a follow-up about this specific issue.
An overlay graphic is generally used as a mask over another image.
If your site loads images in a traditional way (meaning no hidden elements), overlays are much easier to implement. When an image is obscured by an overlay, you can make it reappear by simply changing the opacity value of the layer back to 100%. The resizing of any graphic in this situation is done automatically by setting a percentage width or height for the element in question.
What happens if I override the default styles?
If you override the default styles of your elements, it will throw off the positioning of any overlays that you set up. A good example of this is if you set the position property to “absolute” or “fixed.” You can still use an overlay on top of absolute/fixed elements, but you will need to specify all of its placement properties (left, right, top, bottom) in order to make it work.
What happens if I resize the element?
When you rescale an element, it will cover up your overlay graphic and render any custom styling that you may have used uselessly. A good rule of thumb is to use CSS3 (or a gradient) in order to get a “glass pane” effect with the overlay so that the graphic itself does not get cut off if you resize your elements.
What happens if I add other elements on top of the element?
Every time that you add an element to an HTML page, it adds to its rendering time (even if that element is invisible). If you find that your overlay graphic does not work correctly and you have added a bunch of other elements on top of it, it is a good idea to try and simplify the HTML that you are using. Try removing unnecessary empty divs or any other elements that you have added into your markup, perhaps for pure CSS styling purposes only.