# Week 13: More Bootstrap v4

# Bootstrap Cards

• Cards are a design element that let's you create a visual repeating pattern of tiles on the page.
• They work really well as a grid.
• Bootstrap Card Reference

# Accessibility

• Start with this playlist

• Thomas Bradley Accessibility Playlist

• Remember to follow these rules when writing your HTML and CSS:

  1. Always have enough Colour contrast. Use a tool to test.
  2. Don't use colour alone to convey meaning. Add patterns or text.
  3. Use the :focus state to make it obvious what the user is interacting with.
  4. Use labels AND placeholders for your form elements.
  5. Always add alt attributes to images
  6. Use proper semantic tags. Screenreaders care about dates and times too.
  7. Make sure your site works with a keyboard only navigation approach. Test it yourself.

• Try the Axe-Coconut Chrome plugin to test your site and see how accessible it really is.

• Axe-Coconut Extension

• Writing CSS with Accessibility in Mind

• Accessibility Cheatsheet

• Appropriate text sizes for screen sizes

• Don't be afraid to create many different media queries to best suit the situation.

• Colour contrast

• Colour Contrast Checker

• Another Colour Contract Tool

• WCAG Guidelines for Contrast

• Canadian Accessibility Guide tutorial

• Canadian Government Standard on Web Accessibility

• US Government Section 508

• Web Accessibility Initiative - WAI

• EU General Data Protection Regulation GDPR

• Creative Commons

# Final Project

• Work on your Final Project
• Don't forget to watch the Bootstrap Playlist

# Inspiration

# The Myth of the Real JS Developer