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
      - aria-label=“site”
[ ] Level A 2.4.6 - Headings and Labels | Level A 1.3.1 - Info and Relationships
- headers
  - one page should only have one <h1>
  - usually matched the <title>
  - should be the first element in the <main> section
  - its important to follow the proper header hierarchy
  - should be nested in proper order
  - if there is a content section which part of previous heading <h2> then it should be using <h3> as the heading
  - nested here doesn’t mean the tag, but more of the content hierarchy
  - screen reader often time access the content by the header, that’s why it is important

Lists

[ ] Level A 1.3.1 - Info and Relationships | Information, structure and relationships conveyed through presentation can be programmatically determined or are available in text
- Ordered list
  - List of item with specific order
- Unordered list
  - Generic list
- Description list
  - Name value pairs Ex: FAQ

Why bother?

improved semantic
help screen readers

Navigation and skip links

[ ] Level A 1.3.1 - Info and Relationships
- encapsulate nav link list in <ul> and <li>
[ ] Level AA 1.4.5 - Images of Text
- if possible, don’t use image for navigation text
[ ] Level AA 3.1.3 - Consistent Navigation
- any navigation that repeated across the sites should be consistent in spot and order
[ ] Level AA 2.4.5 - Multiple Ways
- should provide more than one way to access the page in the website
- one way to acieve it by providing search feature
- search is a landmark
  - <form role=“search”>
  - <input type=“search”>
- for static web, use sitemap
  - this also good for SEO, so also use it in non static web as well
  - put it in footer as a link to sitemap page
```
<p>
	<a href=“sitemap.html”>Site Map</a>
</p>
```
  - Site Map should looks like table of content
    - if small, use <ul> or <ol> or combination of those
    - if large, categorize it by using headers <h2> - <h6>
[ ] Level A 2.4.4 - Link Purpose
- The purpose of link can be deternime by the link text alone
```
<p>
	<a href=“sitemap.html”>Site Map</a>
</p>
```
- Read More link is violating this guideline
  - Screen reader has no way knowing which link is which
  - Solution
    - User more verbose text link
```
Read more on our <a href=“products.html”>products</a> page
```
      - or if too long, visually hide the long text by wrapping it in span with class:
        
        Bootstrap: sr-only
        
        Foundation: show-for-sr
        
        .visually-hidden { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
[ ] Level AA 3.2.4 - Consistent Identification
- components that have the same functionality should labeled/identified consistently example: <button>Search</button>