This project uses HTML, CSS and JS to build a responsive and accessible mutipage space travel website. Its design is sourced from Frontend Mentor.
- Creating and using a Design System including CSS resets.
- Using Utility classes for color and typography.
- Creating responsive multi-page layouts using CSS grid and Flexbox using a mobile first strategy.
- Checking color contrast for all text / icons.
- Designing effective buttons and 'dot' indicators for visual feedback.
- Being mindful of WCAG and striving for AA compliance. Some of them include:
- Providing a unique title for each page
- responsive design for different screen sizes
- Using a simple and consistent layout.
- semantic HTML
- for example, using picture HTML tags instead of only image tags where necessary
- making sure that all img elements have an 'alt' attribute / decorative ones use null values.
- not skipping heading levels or using more than one h1 per page.
- using list elements (ul, ol) for list content.
- Ensuring links are recognizable as links.
- Controls have ':focus' states
- Provided a skip link
- keyboard navigation
- making sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
- Including aria labels
- ensuring instructions / roles arent visual only.
- ensuring all animation obeys the 'prefers-reduced-motion' media query.