Grand Theft Auto: Vice City Download Link

Accessible CSS Accordion Menus ^#notes

Radio based accordion

Only one collapsible section can be open at any given time. Use the

TAB

key to focus on the group and then navigate through it with the

UP

and

DOWN

keys.

A surprise party?

Mr. Worf, I hate surprise parties.

I've had twelve years to think about it.

And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them.

I would *never* do that to you.

I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet.

Could someone survive inside a transporter buffer for 75 years?

I suggest you drop it, Mr. Data. This is not about revenge.

Checkbox based accordion

Multiple collapsible sections can be open at any given time. Use the

TAB

key to focus on the group and navigate through the section labels,

SHIFT+TAB

can be used to navigate backwards. Pressing

SPACE

on an active section will toggle the article visibility.

What's a knock-out like you doing in a computer-generated gin joint like this?

• Congratulations - you just destroyed the Enterprise.
• Worf, It's better than music. It's jazz.
• Wait a minute - you've been declared dead.
• A lot of things can change in twelve years, Admiral.

Mr. Worf, you do remember how to fire phasers?

• Some days you get the bear, and some days the bear gets you.
• Your only concern is with how you obey my orders.
• Fear is the true enemy, the only enemy.
• For an android with no feelings, he sure managed to evoke them in others.

Yesterday I did not know how to eat gagh.

Now we know what they mean by 'advanced' tactical training.

Are you up for promotion?

Why don't we just give everybody a promotion and call it a night - 'Commander'?

Notes

This is my initial stab at a pure CSS accordion solution that is accessible. With inspiration from the following pens: Pure CSS Accordion Content With Animation, and Pure Css Accordion Menu. However, it's still far from perfect. So feel free to fork this and improve on it. Issues I've considered include:

• Is it semantically correct? Would swapping the SECTION tag for a definition list (DL) and wrapping the input and label elements in a DT tag and the answer in a DD tag be better?
• The Font Awesome icons are injected via CSS. Do screen readers see these? Must test.
• The question mark to the left would probably become repetative if it is seen screen reader. What would it read out, F29C is a private use code point?
• The chevron to the right wraps awkwardly on narrow viewports. It also has the same accessibility issues as the question mark, with the added issue that it is used to indicate state.
• My transitions on the ARTICLE tag aren't firing, haven't investigated yet.
• No, the colours aren't accessible.

Changes

• I removed the aria-hidden attribute from the input tags as this was causing the screen reader (ChromeVox) to ignore the associated label text.