` with its own `id`. The title is yours to level: use the heading that fits your page, and the next level for the groups. FAQ markup ```html

Questions about renting a bike

What to know before you pick up your bike.

Booking and pickup

Can I cancel a booking?

Yes, free of charge until 24 hours before pickup.

What do I need to bring?

Bring a photo ID and the confirmation e-mail.

On the road

…

Not here? Write to the shop

``` ### Variants and options Only the list of questions is needed. The title, the lead, the groups, the links to the groups and the last line are optional parts. - ``: The block, as wide as its container. A tag that no script defines - `.luz-faq__title`, `.luz-faq__lead`: Optional. The title in the heading face, and a lead under it in secondary text. Any heading level, any element for the lead - `.luz-faq__nav`: Optional, for a long FAQ with groups: a `

` with a list of links to the group titles, as a row of tags that wraps. Give it an `aria-label` - `.luz-faq__group`, `.luz-faq__group-title`: Optional, for a FAQ with several topics: a `

` named by its title, which is a real heading, shown as a small centred label in capitals (not in Arabic, which has no capitals). A short FAQ has no groups - `.luz-faq__item`, `.luz-faq__question`: One question: a `

` and its `

`, between hairlines, in bold and at the size of its answer, with a plus that becomes a minus when it opens - `.luz-faq__answer`: The answer, in reading text, with any HTML inside: paragraphs, lists, links, code. Its `id` is the link to it - `.luz-faq__more`: Optional, last: a line in secondary text for a visitor who did not find the answer, with a link to support - `name`: On the `

`, the browser’s own attribute: with the same name on all of them, opening a question closes the one that was open. Without it, several can stay open - `open`: On one `

`, the browser’s own attribute: that question is open when the page loads. Use it for the most common doubt only - `--luz-faq-measure`: On the tag, the widest an answer or a lead gets. Default `65ch` ### How it works CSS from `@luz-ds/catalog`. No JavaScript: `` is a tag that no script ever defines. - Every answer is in the HTML the server sends, so a reader, a search engine and a tool that does not run scripts all get it. - Put the `id` on the `.luz-faq__answer`, never on the `

`. A link to an id on the `

` lands on its `

`, which is already in view, so the browser opens nothing. A link to an id inside the hidden answer opens the question, and the answer keeps the question above it when the page scrolls. - The browser’s Find in page also opens a question whose answer holds the words it found. - The whole question is the control, at least a large control high, not only the plus. Its text can be selected, so a visitor can copy it to quote it. - The state is the shape of the marker: a plus when closed, a minus when open. The open question also takes the brand colour, so it reads apart from its answer, and a question under the pointer takes the same colour, with no underline. The marker folds with a short ease, and with reduced motion it changes without it. - Long words break, and code or a table inside an answer scrolls inside it: the page never scrolls sideways. - On paper every answer prints, open or closed, and the markers do not. ### Without JavaScript Nothing changes: all of it works. Opening, closing, the exclusive group, the link to an answer and Find in page are the browser’s. ### Keyboard and ARIA Tab reaches each question in order. Enter or Space opens or closes it. There are no arrow-key shortcuts between questions. - **The control:** the `

` is the control and the browser gives it its role and its state. Add no `aria-expanded`, no `aria-controls` and no role: they repeat what the element already says. - **Headings:** the questions are not headings. A heading inside a `

` is not announced as one in every screen reader. The group titles are the headings of the list, so a reader can move through the topics by headings. - **Groups and links:** a group is a `

` named by its title with `aria-labelledby`. The links to the groups go in a `

` with an `aria-label`. - Keep links and buttons out of a question: the question is itself the control. Links belong in the answer. - The FAQ has not been tested with a screen reader. ### When to use Use it for a list of several questions that visitors really ask, which you can answer in a few sentences each: opening hours, prices, how to book, what a product does not do. - It fits a landing page, a help page or the foot of a product page, in a site of any kind. - Group the questions when there are several topics; leave the groups out of a short list. ### When not to use Do not use it for one disclosure: a single `

`, or the [accordion](https://nandovejer.github.io/luz/es/docs/components/accordion/) of core, is enough and carries no list around it. - Do not put a long guide in an answer. Answer in a few sentences and link to the page that explains it. - Do not use it to hide content the visitor needs on every visit: show that on the page. - Do not use it to stuff a page with keywords. A question nobody asks helps nobody.