Reading around the web on accessibility is like trying to comprehend the cloud.

Too much information, too many opinions, too few real world test cases. Which brings me to my question:

Should off-screen/hidden content be rendered in the DOM prior to it being initiated by the user if not relevant prior?

Hiding content, visually, is frowned upon (I say this loosely because it depends), yet in some cases is still necessary; on smaller screens or where the desired expand/collapse/tab functionality is preferred (off-screen menus, etc). If the content being hidden is still viable while hidden, I see a reason for it to be only "visually hidden" yet still remain in the DOM. Now, take for example you have a context menu that pops up on right click, or even a widget for changing font size with a button "change font size" that expands when clicked. Is the content to be displayed necessary from an accessibility standpoint until the user actually interacts with the toggleable element?

I'm speaking in terms of accessibility, not SEO. (or... maybe the two are one and the same these days, who knows, I've been too buried in work to stay up to date).

  • 1
    But at least you don't have to try and understand the cloud, you just have to 'put things up there'. Accessibility is not quite so easy to deal with, and not a lot of people want to deal with it either :p
    – Michael Lai
    May 30 '16 at 0:21

If it comes to accessibility you should always ask yourself for the benefits and if it makes sense.

For example: Why should you tell the braille browser or screen reader for blind people that they can change the font size here or have a context menu there? In the best case it's just useless information, in the worst case you're triggering someone with their handicap(s).

Another example: If you have an off-screen sidebar with additional information for the content, then yes, you should make it accessibile (rendered in the DOM, marked for accessibility). Alternative you can hide it behind a link with self-explanatory description. Something like "Load additional content for this article".

BTW: I would say that your examples (context menu, font size widget) are not really SEO-relevant.

  • 1
    Chris is very right about the principle of "does it make sense". I've been designing along accessibility checklists for a while, and it's easy to lose the common sense approach along the way. If it's navigation, it's important to include it in a way that's readable/accessible via screenreader. You can load the options later (hell, it's even more accessible if you stick to not having the screenreader go through everything at once). Nov 4 '16 at 16:08

Maybe what you're looking for is a way to make it clear what your interactive element will lead to, so your user can decide whether to enter/click it or not.

In case you haven't seen this page yet, it may be helpful: Providing link text that describes the purpose of a link for anchor elements


Imho, I think you shall only render items in the DOME when these items shall be used/when the user asks for them. One exception might be skip-links.

From the accessible point of view, a screen reader won't se these items until they are rendered.

From the performance point of view, if you render the items when they are required the page will load faster and less data has to be transfererad.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.