markup.md

1. Structure a site using semantic HTML to aid accessibility

The screenshot above shows how semantic elements were used as much as possible. An example of this is the <figure> element which was used mainly to illustrate that it is not the main content of the document and could be moved away from the primary content without affecting the flow of the document.

2. Ensure a web page is readable for screen readers

We used alt attributes for images to aid users with vision impairments, thus allowing them to hear what the image is via screen readers. After incorporating the above concepts in our html, we tested the website with screen readers on various browsers like safari & chrome etc.

3. Ensure our UI has sufficient colour contrast so that everyone can perceive it comfortably

The accessibility menu was a big feature on the website which allows the user to select different themes of varying contrasts.

4. Use various tools to check that our website meets accessibility criteria

Running a test on Lighthouse in chrome dev tools was a big help in identifying accessibility flaws in our code. We periodically checked if the website could be tabbed through from the keyboard arrows.

5. Use CSS media queries to ensure our content is always presented effectively on screens of different sizes

We initially built our website for desktop first. Then later refactoring the code to meet mobile first requirements. We learned that it would take less time and iterations to implement mobile first from the beginning for future projects.

6. Demonstrate a mobile-first approach to building a website

We achieved a mobile first approach after all, using chrome dev tools to display the website on various device screen sizes. Mobile first approach is also demonstrated in our use of media queries.

7. Use CSS variables to apply repeated colours to HTML elements

Css variables were used successfully to ensure all contributors on the project could easily select the predefined background colours and text colour themes. These were also used in the accessibility slide out menu.

8. Use CSS Flexbox to style children in a single-direction layout (ie a row or a column)

Above screenshot is an example of how we used flexbox to style child elements in a column.

9. Use CSS Grid to style children in two-direction layout

Implementation of css grid on team section.

10. Ensure our Git commit history tells a coherent story

Every task that was done on the project had its own issue which was reviewed and merged by a different team member. The commit history tells a coherent story of how the progress on the project flowed in order.

11. Use the appropriate input types in HTML forms for gathering different types of information

Semantic elements were used as much as possible on the form such as: <form>, <label>, <input> and <button>.