Obsidian 学习笔记

Appearance

无障碍样式增强 ​

无障碍（Accessibility）设计让所有用户都能更好地使用 Obsidian。以下片段遵循 WCAG 标准，提升可访问性。

焦点轮廓 ​

css
/* 可见焦点轮廓 */
*:focus-visible {
  outline: 2px solid var(--interactive-accent) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 输入框焦点 */
input:focus,
textarea:focus,
.content :focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 1px;
}

链接下划线 ​

css
/* 所有链接显示下划线 */
.internal-link,
.external-link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

/* 悬停时显示下划线颜色 */
.internal-link:hover,
.external-link:hover {
  text-decoration-color: currentColor;
}

/* 未创建链接虚线下划线 */
.is-unresolved {
  text-decoration: underline dashed !important;
  text-underline-offset: 2px;
}

增大点击目标 ​

css
/* 文件项最小高度 */
.nav-file-title,
.nav-folder-title {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
}

/* 复选框尺寸 */
.task-list-item-checkbox {
  width: 18px;
  height: 18px;
}

/* 按钮尺寸 */
.clickable-icon {
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

高对比度模式 ​

css
/* 亮色高对比度 */
.theme-light.a11y-high-contrast {
  --text-normal: #000000;
  --text-muted: #333333;
  --background-primary: #ffffff;
  --background-secondary: #f5f5f5;
  --background-modifier-border: #888888;
  --interactive-accent: #0000aa;
}

/* 深色高对比度 */
.theme-dark.a11y-high-contrast {
  --text-normal: #ffffff;
  --text-muted: #cccccc;
  --background-primary: #000000;
  --background-secondary: #1a1a1a;
  --background-modifier-border: #666666;
  --interactive-accent: #ffff00;
}

减少动画 ​

css
/* 尊重系统减少动画设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

字号控制 ​

css
/* 支持浏览器缩放 */
.markdown-preview-view {
  font-size: 16px;
}

/* 响应字号设置 */
.markdown-preview-view {
  font-size: var(--font-text-size, 16px);
}

/* 最小字号保证可读性 */
.markdown-preview-view,
.markdown-source-view {
  font-size: max(14px, var(--font-text-size, 16px));
}

颜色对比度 ​

css
/* 确保文字与背景对比度 ≥ 4.5:1 (WCAG AA) */
.theme-light {
  --text-normal: #1a1a1a;
  --text-muted: #555555;
}

.theme-dark {
  --text-normal: #e8e8e8;
  --text-muted: #aaaaaa;
}

/* 禁用低对比度文字 */
.text-faint {
  color: var(--text-muted) !important;
}

屏幕阅读器优化 ​

css
/* 仅视觉隐藏但屏幕阅读器可读 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

相关内容 ​