The files in this repo go with a tech talk I am giving at WicHacks 2022: Build and host an accessible web page in 30 minutes This is a beginner-level talk to help folks learn how to build a simple, accessible web page from scratch and host it on Netlify. If you notice a mispelling or other mistake please send a pull request. :)
Imagine we have been sent back in time to help Katherine Johnson (NASA) build a portfolio web page. We want to make sure it highlights her accomplishments and is accessible to users with impairments.
We will start with an empty HTML file in Visual Studio Code (VSS) and build an accessible web page from the ground up using semantic HTML. The included Katherine.Johnson.md file provides some interesting content about Katherine Johnson we can copy-paste into our HTML.
- Who is Katherine Johnson AKA "human computer"?
- What is HTML?
- Start Visual Studio Code and create an empty index.html file
- HTML
<!DOCTYPE html>Declaration - Top level elements: html, head, title, body
- Basic elements: h1-h6, p, br
- Images: img Use the alt property on img elements to provide a description of the image and leave it empty if the image is not important.
- Non semantic elements for positioning or styling: div, span
- header Holds header content for the page
- nav Navigation/menu
- article, section, main
- details
<details> <summary>Summary</summary> <p>details go here</p> </details> - progress Use to show progress so user knows something is happening
- button Use the button element to define buttons instead of div elements
- footer Hold footer content for the page
- figure, figcaption
- dl, dt, dd Definition lists
- tables Use tables for tabular data. Not page layout!
- label Use on forms to label input fields. Link by id or wrap input elements.
- Use good contrast/color contrast so users can easily read text.
- Use tabIndex to guide users through the page content.
- Use focus/hover so users can see where they are when tabbing throught the page.
- Accessibility linting tools are available for Visual Studio Code I.e., axe.
- @media(prefers-reduced-motion) can be used to disable animations if the user prefers.
- Avoid modals or ensure they are screed reader friendly
- Install a screen reader extension and test!