development-resources/Accessibility-Checklist-Examples.html at main · codeforsanjose/development-resources · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
  <title>Code Examples for the Accessibility Checklist</title>
</head>
<body>


  <!-- Headings - Content should be broken up by headings in h elements to make pages easy to navigate/scan -->


  <!-- Meaningful, Descriptive Link Text - Don't use meaningless phrases like "Click Here" for your link text, it should describe what the link actually goes to -->


  <!-- Semantic, Valid HTML - Minimize use of meaningless div and span elements, use semantic elements like section or nav instead. Make sure your HTML validates to modern specs -->


  <!-- Font Size & Readability - Unofficial mininum 16px font size for body text, but also watch out for your text readability dependent on styling -->

  <!-- Color Contrast Ratio - 4.5:1 minimum contrast ratio, though aim for better. Ensure your text color isn't too close to your background color, making it hard to read. Some exceptions apply for large text -->

  <!-- Alt Tags on Images - All images should have alt tags filled out describing the purpose of the image -->

  <!-- Large Click Targets - 44px by 44px minimum size for clickable things, with a few exceptions such as inline text links -->

  <!-- Remove Images Of Text - Use actual HTML text instead of using an image of text--text in images cannot be understood by assistive technologies -->

  <!-- Don't Hide Focus Indicator - It's possible to remove/override the default browser focus indicator with the CSS :focus pseudo element or outline: 0; style, which can make it difficult to see what element is active -->


</body>
</html