At the "Questions and Answers" or "Frequently Asked Questions" (FAQ) section it is often fashionable to have collapsing/expanding sections for each question and answer.
Is it still the best way to provide information to the users? Or should all text be rather visible to the user immediately? Are there any other good practices?
Either is ok as long as you use semantic elements to define the page structure.
Showing all questions and all answers at the same time can sometimes be a bit overwhelming and look very busy, but it does allow a user to do a browser “find” on the page if they know a keyword they’re looking for. The “busy-ness” can be somewhat alleviated if you have a table of contents of questions at the beginning that have in-page links to the answers that follow.
Each question/answer block (below the TOC) should be contained in a group container of some sort (such as a <section> if you’re doing this in html) and the question itself should be a heading (eg <h2>). The section can be labeled by the heading (using aria-labelledby in the example below).
The use of lists for the TOC, sections to group contents, and headings allows screen reader users to easily navigate the page.
Perhaps something like:
<h1>Frequently Asked Questions</h1>
<ol>
<li>
<a href="#q1">How do I...</a>
</li>
<li>
<a href="#q2">What should...</a>
</li>
</ol>
<section aria-labelledby=”q1” tabindex=”-1”>
<h2 id=”q1”>How do I…</h2>
<p>answer…</p>
</section>
<section aria-labelledby=”q2” tabindex=”-1”>
<h2 id=”q2”>What should…</h2>
<p>answer…</p>
</section>
(This is an html implementation detail but the destination of the TOC links have tabindex="-1" to ensure the keyboard focus is really moved to that section. This is a limitation of Internet Explorer (and perhaps Edge) that is explained on the Microsoft site. Without tabindex, if a keyboard-only user selects a TOC link and the page is scrolled to the answer, if the user then presses tab to move the focus to an interactive element in the answer (such as a link to more information), the focus will really move to the next TOC link at the top of the page (where the user just came from). With tabindex="-1", the next tab will go to whatever interactive element is next in the FAQ answer.)
If you want a “clean” look with all answers collapsed, just make sure you follow the “accordion” or “disclosure widget” pattern, again so that screen reader users will understand the structure of the page.
Additionally, having an “expand all” button is a great feature because that allows someone to view all the answers at the same time, as in the first scenario above, and allows for one to use the browser’s “find” feature. A “collapse all” should be provided too.
If you go with the accordion/disclosure approach, I would not recommend that you restrict only one question/answer be allowed to be expanded at a time. Sometimes people implement an accordion so that when a section is expanded, the previous section is collapsed. While that might make sense in some situations, for FAQs, it can be helpful to have more than one section open a time.
I think you should always try to design the FAQs based on the nature of the contents that you are trying to provide. If there is only a little bit of information then there's no need to collapse them. However, if the content is expected to grow or change over time then you need to come up with effective strategies to manage the information. Even expanding and collapsing sections can be difficult to use if the user has to constantly search through different sections frequently. In this case having a search function upfront and helping them to navigate through search results can be better.
In terms of guiding users or holding their hands while they are new, there are plenty of onboarding strategies that provide information at the point of need rather than having users search through them.
These days, many companies also use community-driven methods to create and update information relevant to the products/services so that the content can evolve over time, as FAQs tend to become outdated or not maintained well enough to be useful (especially as the product evolves).
Interestingly enough, we still haven't really managed to remove the FAQs from websites even though one could argue whether it is still an effective way of addressing customer/user support.
