Progressive Enhancement & Accessibility
This work is licensed under a Creative Commons Attribution 4.0 International License.
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.
Understanding Progressive Enhancement by Aaron Gustafson
Reframing Accessibility for the Web by Anne Gibson
Best Practices: HTML & CSS by Scott O’Hara
ARIA and Progressive Enhancement by Derek Featherstone
The Accessibility of WAI-ARIA by Detlev Fischer
Practical ARIA Examples by Heydon Pickering
Making Modal Windows Better for Everyone by Scott O’Hara
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.
Please see the Github repo for more detailed instructions and resources required to complete the challenge.
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.
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.
Apply your system to the specific form example you’ve been provided with.
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.