data.json

[
  {
    "name": "alert.md",
    "shortTip": "Alert user for updates",
    "longTip": "Make on the fly content changes accessible by making use of `WAI-ARIA` attributes on those elements. When notifying the user about a certain behavior use `aria-live` attribute to let the screen reader know about new changes. Set the value of `aria-live` to `polite` if your changes aren't urgent or use `aria-live=\"assertive\"` if you want to notify the user immediately.\n\n",
    "links": [
      "[ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)"
    ],
    "category": "pro tip",
    "categoryId": 1
  },
  {
    "name": "alt-attribute.md",
    "shortTip": "Always include alt attribute on an image",
    "longTip": "Screen readers for the blind and visually impaired read out `alt` attribute text and therefore make your images accessible. `alt` attribute should describe meaningful images and be left empty if the image serves decorative purposes. Never leave the `alt` since screen readers will read the source of the image which makes for terrible user experience.\n\n",
    "links": [
      "[Some things about alt text](https://css-tricks.com/some-things-about-alt-text/)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "alt-full-stop.md",
    "shortTip": "Put a full stop at the end of the `alt` tag",
    "longTip": "Put a full stop at the end of an image's description inside the `alt` tag, so that screen readers can make a short pause which leads to better user experience.\n\n",
    "links": [],
    "category": "pro tip",
    "categoryId": 1
  },
  {
    "name": "alt-image-text.md",
    "shortTip": "Images with text should be accessible to screen readers",
    "longTip": "Images that contain text in them such as logos should make that text available to screen readers in some form. The most straightforward way to do this is to style a `header` element as image and use `text-indent: -9999px` as its text content.\n\n",
    "links": [],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "animation-pause.md",
    "shortTip": "Allow user to stop an animation",
    "longTip": "Complex or even simple animations can make it hard for some users to focus on the actual content of the webpage. Therefore your website should allow users to stop animations on the webpage at a particular keyframe.\n\n",
    "links": [],
    "category": "pro tip",
    "categoryId": 1
  },
  {
    "name": "auto-audio.md",
    "shortTip": "Avoid auto-playing audio on your website",
    "longTip": "Do not auto-play any audio or video material on page load. Users with screen readers will hear both 3rd party audio and their screen reader which makes for a poor user experience.\n\n",
    "links": [],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "buttons-that-only-show-up-on-hover",
    "shortTip": "Buttons that only show up on hover",
    "longTip": "Be mindful of a pattern where buttons are hidden and only get displayed when parent element is hovered: this can make the buttons inaccessible from keyboard. instead us using `display:none` of `visibility:none`, consider using alternative methods, e.g. using `position: absolute` and pushing it off the screen.\n\n",
    "links": [
      "[See how angular hides elements with cdk-visually-hidden class](https://cs.corp.google.com/piper///depot/google3/third_party/javascript/angular2_material/src/cdk/a11y/_a11y.scss)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "contrast.md",
    "shortTip": "Always feature optimal contrast",
    "longTip": "Whenever possible make your websites accessible to the eye by avoiding poor contrast between text and background.\n\n",
    "links": [
      "[Accessible color picker](https://cloudflare.design/color/)",
      "[Color contrast docs by MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "focus.md",
    "shortTip": "Don't remove `:focus` on elements",
    "longTip": "If an element is interactive never remove the highlight by setting `outline: none;` on a focused state of that element. If the default browser outline doesn't align with the design be sure to replace it with a custom accessible one instead of hiding it completely. Removing an element's highlight on focus makes filling out forms difficult for some users.\n\n",
    "links": [
      "[Focusing on Focus Styles](https://css-tricks.com/focusing-on-focus-styles/)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "form-label.md",
    "shortTip": "Use labels on `form` fields",
    "longTip": "Once implemented properly, `label` elements make the form accessible. Each `label` element should have a `for` attribute that has the value of the corresponding filed's `id`.\n\n",
    "links": [
      "[The `label` element docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#The_%3Clabel%3E_element)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "form-validation.md",
    "shortTip": "Make self-validating forms accessible",
    "longTip": "If your form needs to meet specific input criteria and errors on mistaken input be sure to provide feedback to the user. Alongside the common red border include a text-based informative explanation of the encountered error.\n\n",
    "links": [
      "[Sensible Forms: A Form Usability Checklist](https://alistapart.com/article/sensibleforms)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "headings.md",
    "shortTip": "Follow heading hierarchy",
    "longTip": "Screen reader users navigate pages by using the heading structure. Do not use headings by picking the one that fits the appropriate size in design. Instead, use heading elements `h1` to `h6` with the hierarchy in mind and style them later.\n\n",
    "links": [
      "[Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "logical-flow.md",
    "shortTip": "HTML should have a logical flow",
    "longTip": "Some screen readers can not figure out the styled layout, so they work with the plain HTML document to figure out in which order they should read the page. Although many screen readers support styled layouts, the safest method is to structure your HTML in a logical flow, so the content is understandable without the need for styles.\n\n",
    "links": [],
    "category": "you should know",
    "categoryId": 2
  },
  {
    "name": "logo-alt.md",
    "shortTip": "Avoid `alt` tags on images of your logo",
    "longTip": "Hearing screen readers pronounce the description of your logo over and over gets tiresome. Use a descriptive `alt` tag just on the first image of your logo. Remember to include an empty `alt` tag on others since screen readers will read the image source as the fallback.\n\n",
    "links": [],
    "category": "pro tip",
    "categoryId": 1
  },
  {
    "name": "semantic-elements.md",
    "shortTip": "Avoid non-semantic patterns",
    "longTip": "Use semantic HTML elements that clearly define their content as much as possible. By using semantic elements you provide the user with a more meaningful way to navigate and interact with your website. Semantic elements, such as `<header>`, `<main>` and `<article>` are by default accessible compared to non-semantic elements like `<div>` or `<span>`. Avoid using non-accessible `<div class=\"button\">` when `<button>` is already available to you. If for some reason you must use non-semantic elements be sure to implement accessibility functionality to them.\n\n",
    "links": [
      "[Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)",
      "[The practical value of semantic HTML](https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "skip-links.md",
    "shortTip": "Use skip-links",
    "longTip": "Let users skip long navigation by implementing invisible focusable links that leads to the main content. Screen readers perceive the page from top to bottom which means that if there is no skip-link implemented and the website is already familiar to the end user, the screen reader will read redundant navigation.\n\n",
    "links": [
      "[Codepen example](https://codepen.io/joe-watkins/pen/rjhiK)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "tab-friendly.md",
    "shortTip": "Make `tab` friendly navigation",
    "longTip": "Allow users to use keyboard-only navigation on your website by ensuring that all interactive elements are focusable and in a logical order.\n\n",
    "links": [
      "[Keyboard navigation explained in detail](https://webaim.org/techniques/keyboard/)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "table-scope.md",
    "shortTip": "Tables should always include scoping in their HTML",
    "longTip": "Although `scope` attributes aren't mandatory in `table` elements it's is highly recommended to use the `scope` to indicate what type of data each column contains and what should be read out as a row.\n\n",
    "links": [
      "[HTML table advanced features and accessibility](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced)"
    ],
    "category": "pro tip",
    "categoryId": 1
  },
  {
    "name": "table.md",
    "shortTip": "When you need to display tabular data use `table` instead series of `div` elements",
    "longTip": "When you need to display some tabular data be sure to use the semantically correct `<table>` element as it is accessible by default, in contrast to non-semantic elements like `<div>`. You should provide a `<caption>` for your `<table>` element and allow users to skip through the table with a skip-link if they don't want it read by the screen reader.\n\n",
    "links": [
      "[Semantic table docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)"
    ],
    "category": "tip",
    "categoryId": 0
  },
  {
    "name": "testing-li.md",
    "shortTip": "Don't rely just on Lighthouse when testing",
    "longTip": "Testing your websites for accessibility with off the shelf solutions like Lighthouse isn't enough. Instead, manually test your websites. There are great extensions to help you simulate common user conditions.\n\n",
    "links": [
      "[The Importance Of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/)",
      "[Accessibility Testing Tools](https://css-tricks.com/accessibility-testing-tools/)"
    ],
    "category": "you should know",
    "categoryId": 2
  },
  {
    "name": "typography.md",
    "shortTip": "Improve typography on your website",
    "longTip": "Enhance accessibility and user experience by making your content more comfortable to read. Text on the webpage should be justified to the left with a `font-size` of `16px` at a minimum. `line-height` of `1.5` is optional to make for a pleasant reading experience.\n\n",
    "links": [
      "[Resource title](https://)"
    ],
    "category": "you should know",
    "categoryId": 2
  },
  {
    "name": "video-captions.md",
    "shortTip": "Avoid poor video captions",
    "longTip": "Videos on your websites should have proper captioning. When transcribing video content, it is considered a good practice to avoid vocal pauses and verbal missteps.\n\n",
    "links": [],
    "category": "pro tip",
    "categoryId": 1
  }
]