Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (29 sloc) 4.59 KB

Progressive Enhancement & Accessibility

This work is licensed under a Creative Commons Attribution 4.0 International License.

Challenge introduction

Effective front-end development is not about churning out pixel-perfect conversions of a designer's Photoshop files, or helping every stakeholder get their pet feature highlighted on the home page. Rather, a good front-end developer's job is to ensure that the entire team's mission is realized through semantic, performant code that ensures the best user experience across the multitude of devices and access issues inherent to the modern web.

To best meet this challenge, we believe in the philosophy of progressive enhancement. Progressive enhancement places an emphasis on semantic markup, accessibility, and the use of external technologies in a layered fashion. The idea is that a site’s content and functionality should be available to all users, regardless of device or capability. Users with more capable devices can get an enhanced experience that is layered on top of the core experience, but no user is locked out due to personal or device restrictions.

Accessibility is a complementary principle that is baked into the idea of progressive enhancement. Simply stated, accessibility means removing barriers to access that may be experienced by people with physical or cognitive disabilities.

Background research

Challenge outline

The challenge is to take a static image of a form that has already been designed, to develop a front-end system that accommodates the design as demonstrated in the example, and then to develop that form using your system.

Your work must follow the principles of progressive enhancement and accessibility. You must use proper semantic markup and test your form with the VoiceOver functionality built into OS X to verify that it is accessible to a user with visual impairments. The form must display in a sensible fashion even without CSS enabled, and it must be usable without JavaScript. Browsers that are capable of using HTML5 form enhancements must use those instead of JavaScript. Browsers that do not have advanced functionality must load in JavaScript that handles those problems.

Please see the Github repo for more detailed instructions and resources required to complete the challenge.

Recommended process

  1. Write all of your markup first. DO NOT write any CSS or JS until you’ve confirmed that the HTML works properly on its own and is semantic and accessible.

  2. Write CSS with a systems-oriented approach, i.e. style your markup so that a team could use your CSS to handle basic form requirements across an entire site.

  3. Apply your system to the specific form example you’ve been provided with.

  4. Load in JS enhancements only in browsers that need them.


Your deliverable will be a Github repo forked from the main project repo. Push your form to a gh-pages branch for feedback and evaluation.

You’ll also be responsible for a 10 minute talk sharing what you learned with your fellow apprentices, to be shown during our Friday workshop session the week after the project begins.


You’ll have just under two weeks to develop your form system and final form. The challenge starts on a Monday and is due for evaluation by Tim Wright the following Thursday. We highly recommend checking in several times with members of the front-end team along the way. There will not be any project extensions, you are responsible for delivering on time. Part of delivering on time is making sure you’re on the correct path at several intervals along the way.

Your brief talk will be due for presentation the day after the challenge is due.