HTML

Document structure and landmarks

[ ] Level A 4.1.1 - Parsing
- doctype on first line
  - <!doctype html>
  - will affect proper parsing
    - properly open and close tags
    - no duplicates element attributes
    - no duplicate id
[ ] Level A 3.1.1 - Language of page
- language of page on html tag | lang using ISO 639-1 code
  - <html lang=“en”>
  - important for screen reader to pronounce thing properly
  - recommended to be included
    - <meta charset=“utf-8”>
      - character encoding
    - <meta http-equiv=“x-ua-compatible” content=”ie=edge”>
      - compatibility mode for IE
[ ] Level A 2.4.2 - Page title
- title has to be unique for every page
  - <title></title>
  - great for user and SEO
[ ] Level AA 1.4.4 - Resize Text
- responsive design meta tag
  - don't
    <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no” />
  - do
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0, shrink-to-fit=no />
  - allow user to pinch and zoom
  - use relative unit like em/rem for text size
- Increase text up to 200% text size increase ****without losing readability or functionality
[ ] Level A 1.3.1 - Info and Relationships | Level A 2.4.1 - Bypass Blocks
- landmarks
  - <header>, <nav>, <main>, <footer>, <aside>
    - only one main per page
  - there are usually multiple nav in a page. to differentiate, use aria label
    - nav in the footer for high level nav
      - aria-label=“site"
    - nav in the sidebar/aside for page level nav
      - aria-label=“page"
    - nav in the header