As developers one of the things that's usually expected of us when applying for a job, both as a permanent employee or as a contractor, is a technical test.
Technical tests can come in many forms. Most commonly is the type that you're unaware of as it happens – peer review. Many teams will be asked to look over a potential candidate's website and portfolio of work, and more recently GitHub, to determine which skills they have and which may be lacking. A well made site and good portfolio are always advantageous things to have.
Then there's the physical tests, where you're asked to complete a task which is then assessed. There's three ways to do this: At home where your work is emailed for review, at the interview where you're left alone with a computer for a while, and at the interview where answers are given purely orally. Whilst we've all answered technical questions during an interview, it's rare to have a full microsite discussed in detail.
Accessible flag of the United States
Recently I applied for a contract role which I ultimately didn't win, but the technical test was of the full microsite oral discussion type and it was interesting so thought I'd share it with you.
I was shown an image of the US flag and asked: "How would you build this?". So, our page needs a heading level 1 which will be something like "Flag of the United States" and two heading level 2s – one for the states and one for the colonies. Something I learned during this test is that whilst the stars represent each American state, the stripes represent the thirteen British colonies that first declared their independence from Britain.
As well as these headings we need two lists for the names. Since the order is unimportant these should be unordered lists. Now, we want this to look like a flag and not a bunch of headings and lists, so we can use the clipping method to hide the headings and names but we have a small issue. We want to use a star which we can attach easily enough with a CSS pseudo element, but by clipping the name we'll also hide any pseudo elements.
This is where the next step comes in. We want to show information for each state – this solves our problem. We can wrap the state names within anchor links and clip those links, allowing us to attach the stars to the individual list elements. Using links also keeps everything semantic and accessible, since a keyboard can naturally tab to them. When a link receives focus or hover we can unclip the link text and display the link name too – perfect.
Now that we've made a beautiful and fully accessible flag for visual, screen reader, and keyboard users, purely using HTML and CSS, we want to add in that extra state information. Since we're not including this on the same page we can use some AJAX to load this information into a new element. For the purposes of the test, these pages are whole. In reality you'd get the server to respond with only what you need for efficiency purposes, but we're going to take this whole page and extract what we need.
By not preventing the default link behaviour in this instance we allow our anchors to maintain page history without additional code. We could do this better and more SEO friendly with server redirects and full URL paths, but server features was not part of this test.
And that's about it – we've not done anything out of the ordinary, just used some features you may not have seen before for efficiency and accessibility. You can view this code on GitHub and see a live demo of the accessible US flag.