Translating Design Wireframes into Accessible HTML/CSS
A basic understanding of the following:
- Git
- HTML
- CSS
- JS
- Node/npm
- React
Don't worry if you're lacking any of the above, we will walk you through every step of the process so all you have to do is follow along. Feel free to pair up with another attendee!
$ git clone https://github.com/dequelabs/smashing-workshop.gityarn
# or npm installyarn start(if you're not using yarn, runnpm start)- navigate to http://localhost:1234
- poke around and see what we've got so far!
❇️ Let's bust out those handy annoted wireframes!
text alternative of annotations (spoiler alert!)
- card should be
277pxwide - image of recipe should be marked as "decorative"
alt=""and/orrole="presentation"
- image of recipe should be
142pxin height - render a pencil icon control which will eventually invoke the edit recipe modal
- the recipe name should be an
<h3 /> - the recipe metadata (prep time, bake time, difficulty) should be marked as a table (or
<dl />)- the table headers (or
<dt />):color: #666font-size: 18px
- the table cells (or
<dd />):color: #333font-size: 18pxfont-weight: 500
- the difficulty table cell (or
<dd />):- should be
#76bf98for beginner (which is all we're building for now)
- should be
- the table headers (or
- the card content (h3 / table) should be
73pxin heightbackground: #fff
- card footer should be a button with the text
Cook {recipe.name}background: #3C7AAEcolor: #fff- ¡extra credit! -
[]focus indication (you will have to get creative here)3pxcolor: #fff1pxoffset (from edge of button)
- Automated testing via the axe extension
- Intelligent Guided Testing
- Unit testing