Practice reverse-engineering an accessible web page using semantic layout and incremental development.
- Start from an empty project
- Reverse-engineer a design from an existing site
- Create a wireframe
- Plan steps, develop each on one branch
- Use semantic HTML5 elements & ARIA
- Use Accessibility DevTools to inspect and audit
- Fork this repository, turn on GitHub pages, and clone
- Study the target page
- Create a wireframe for the page
- Plan your user stories in ./development-strategy.md
- Develop one story at a time
- Create a new branch before beginning each story
- Code the story entirely. Make sure the code is pretty and everything works
- Push the new branch to GitHub
- Merge the completed story into
master - Push
masterto GitHub - Repeat!
- have a nice day!
You've all seen it before, and you'll probably have it memorized after a few more months ...
... Google!
- Finding which colors a website uses
- Which fonts a website uses
- Which images a website uses
- Copy the styles from a site
- What is Accessibility? short video, MDN article
- What is the Accessibility Tree? quickly, in depth
- What is ARIA?
- Clean, Semantic HTML is the key
- Programming for Screen Readers
- w3c Complete Introduction
- FireFox Accessibility DevTools
- What are they?
- wireframe.cc (a site for making and sharing basic wireframes)
- Why, How and When? (css-tricks)
- What is "semantics"? (MDN)
- Using Sections and Outlines (MDN)
- Semantic Elements (FreeCodeCamp)
- Semantic Elements (w3schools)
- HTML5 Semantic Elements vs. CSS
- How to inspect an element
- Inspecting the DOM?
- Live DOM Viewer
- DOM Tutor
- Modify the DOM - does the source change?
Any tips, resources or examples that will help lead this code-along. PR's are more than welcome!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent