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>
<a href="#q1">How do I...</a>
<a href="#q2">What should...</a>
<section aria-labelledby=”q1” tabindex=”-1”>
<h2 id=”q1”>How do I…</h2>
<section aria-labelledby=”q2” tabindex=”-1”>
<h2 id=”q2”>What should…</h2>
(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.