Accessibility Engineer
Instructions & Guidelines
Please build a responsive HTML page from the attached large and small screen designs.
- Form does not have to submit anywhere
- Animations are not required
- Submissions should score a 100 in a Google lighthouse accessibility scan
- Please build for modern browsers, don't worry about polyfills and legacy support
- Task runners are not required, but use if you’d like
- No UI libraries
- No JS libraries or frameworks
- No mixin libraries
- Please provide any needed build instructions
Information
Below, you will find the technical information needed to complete the assignment. You do not have to use the specific pixels listed, translating to a relative unit is fine. Please add your solution into the ./src directory.
The error depicted in the design is meant to communicate a state, so this should be built as validation on each form field.
What's in the box?
Feel free to update and change these files as your solution dictates.
- src/index.html: A blank HTML file for you to add your solution
- src/css/style.css: A blank CSS file to use
- src/js/script.js: A blank JS file to use
- src/images/image.png: The image required for the design
- designs/large-screen.png: The large screen version of the design
- designs/small-screen.png: The small screen version of the design
Colors (already added in styles.css)
- #FFFFFF
- #FFECB5
- #0E7757
- #CC0000
- #212121
Spacing values
- 6px
- 12px
- 24px
- 48px
Font size
- Headings: 38px
- Copy: 16px
Line height
- Headings: 40px
- Copy: 24px
Fonts (prepopulated in the HTML)
Roboto (400, 700)