Study Notes

Study Notes

  • Source
  • WebDesign
  • Javascript

›Applied Accessibility

Basic HTML and HTML5

  • Basic HTML and HTML5 Overview

Basic CSS

  • Basic CSS Overview

Applied Visual Design

  • Applied Visual Design Overview

Applied Accessibility

  • Applied Accessibility Overview
  • Image alt attribute
  • Headings
  • Semantic Elements
  • Visual Sense
  • Attributes Relative to the Keyboard

Responsive Web Design Principles

  • Responsive Web Design Principles Overview

CSS Flexbox

  • CSS Flexbox Overview
  • Flex Container
  • Flex Item

CSS Gird

  • CSS Grid Overview
  • Grid Container
  • Grid Item
  • Grid Areas
  • build-in function
  • Layout

Visual Sense

本文总结的是 Applied Accessibility 中与视觉相关的内容

Make Elements Only Visible to a Screen Reader by Using Custom CSS

CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers.

This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data.

CSS is used to position the screen reader-only elements off the visual area of the browser window.

参考资料:

  • Make elements only visible to a screen reader by using custom css

通过调节对比度提高文本可读性

参考资料:

  • Improve Readability with High Contrast Text
  • Avoid Colorblindness Issues by Using Sufficient Contrast

谨慎选择文本的颜色

  • Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
← Semantic ElementsAttributes Relative to the Keyboard →
  • Make Elements Only Visible to a Screen Reader by Using Custom CSS
  • 通过调节对比度提高文本可读性
  • 谨慎选择文本的颜色
Copyright © 2019 罗惠东