HTML / CSS / JS
Notes and Queries
There were a couple of tricky aspects to this challenge. Notably the tabbed component and managing tab order to allow keyboard users to tab into the focused component, rather than onto the next tab. I used Heydon Pickering's in-depth write up on tabbed interfaces as a basis for the tabbed component. This was especially useful for dealing with the tab order.
The burger-menu shown on smaller screens was fiddly. The component is based on Andy Bell's totally full on fully responsive progressively enhanced burger menu which is excellent and very robust. Again, if JS should fail for any reason no content is hidden. I also allow the
body scroll when the menu is open — some people don't like this, but I prefer not to restrict the user if possible.
The page also takes advantage of in-built HTML functionality. The FAQ section is created using the
details-summary element (which has built in focus states). The