Technical tests

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.

One way to do this is to dump it into an iFrame, and this works perfectly well. A better way to do this is to use the createHTMLDocument method to manipulate this entirely within JavaScript without forcing the browser to do any rendering. Even by using a hidden div the browser would load in all of the linked asset files – something we'd want to avoid for efficiency. Using createHTMLDocument allows us to extract exactly what we want without wasting additional bandwidth. Once we've extracted what we want and dumped it into a new element on the page we'll need to focus this element so that it's read out by the screen reader. We can also use the scrollIntoView method to bring this information to the top of the browser window.

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.