From 4f15cbeaa8e86c437376cf25a3b40533ebf57887 Mon Sep 17 00:00:00 2001 From: sabertazimi Date: Wed, 4 Aug 2021 14:20:07 +0800 Subject: [PATCH] update(web-a11y): a11y 101 tips issue #105 --- notes/web/html/htmlBasicNotes.md | 314 +++++++++++++++++++++++-------- 1 file changed, 240 insertions(+), 74 deletions(-) diff --git a/notes/web/html/htmlBasicNotes.md b/notes/web/html/htmlBasicNotes.md index 8e3a005ded..486686ccc9 100755 --- a/notes/web/html/htmlBasicNotes.md +++ b/notes/web/html/htmlBasicNotes.md @@ -135,7 +135,7 @@ table>.row*4>.cell*3 = table>tr.row*4>td.cell*3 ## Structure -[Reference Website](http://www.html5jscss.com/html5-semantics-section.html) +- [Semantics Section Reference](http://www.html5jscss.com/html5-semantics-section.html) ### section @@ -587,49 +587,99 @@ style="display: none"; 默认 open=false -### Table Cells +### Description List -- `dl > (multi)dt + (multi)dd`: - defined list > defined tab + defined data +- `
`: description list. +- `
`: description Term. +- `
`: description details. + +```html +

Review your data

+

Please review the data you entered in the previous step to ensure it is correct:

+
+
First name
+
Marc
+ +
Last name
+
Simmons
+ +
Date of Birth
+
+ +
+``` ### Summary 折叠/收缩时触发 toggle 事件 +### Table + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Col Header 1Col Header 2Col Header 3
Row Header 1Row 1 Col 2Row 1 Col 3
Row Header 2Row 2 Col 2Row 2 Col 3
SummaryCol 2 summaryCol 3 summary
+``` + ### Mark 突出/高亮显示，无关原文作者 -### ins +### Ins -insert text +Insert text -### del +### Del -delete text +Delete text -### u +### U underline text -### em +### Em -原文作者文章重点 +文章重点 -### strong +### Strong -原文作者段落强调 +段落强调 -### small +### Small - 免责声明、注意事项、法律规定、版权声明 - 不改变文字样式 -### hr +### Hr 下划线 -### progress +### Progress value/max 百分比 @@ -639,31 +689,31 @@ value/max 百分比 70% ``` -### meter +### Meter -#### value +#### Value -#### min +#### Min -#### max +#### Max -#### low +#### Low -#### high +#### High -#### optimum +#### Optimum -### wbr +### Wbr 软换行 ## Media -### figure +### Figure 流内容 如代码、文件、图片、音频、视频 -### figcaption +### Figcaption figure 可拥有唯一的 0/1 个 figcaption @@ -680,9 +730,9 @@ figure 可拥有唯一的 0/1 个 figcaption **Attr** - -#### src +#### Src -#### alt +#### Alt (图片崩溃时文本)、title(提示信息)、class(CSS 类选择器) @@ -835,12 +885,6 @@ sudo systemctl restart nginx ## Accessibility -- 不要将颜色作为传达信息的唯一手段 (色盲/弱) -- 确保文本与其背景保持足够的对比 -- 提供输入焦点的视觉提示 -- 注意表单 -- 避免组件识别障碍 - ### Semantic HTML - [Definitive Guide](https://css-tricks.com/how-to-section-your-html) @@ -848,15 +892,14 @@ sudo systemctl restart nginx ### Structure Accessibility +- [Semantics Section Reference](http://www.html5jscss.com/html5-semantics-section.html) - header +- nav - main -- footer +- aside - section - article -- nav -- aside - -#### Body Accessibility +- footer ```html
@@ -867,12 +910,64 @@ sudo systemctl restart nginx
-
+
+
+
``` -#### Article Accessibility +### Heading Accessibility + +- 7 heading levels: `
` +- One `

` per page + +### Navigation Accessibility + +- Have a HTML sitemap. +- Support keyboard navigation (Key and Tab Index). +- Breadcrumbs a11y: + - `aria-label="breadcrumbs"` + - `aria-label="page"` + +```html + +``` + +### Section Accessibility + +```html +
+

A great section

+
+
+

An even better section

+
+``` + +### Article Accessibility The `
` element is used to represent a fully self-contained region of content @@ -896,25 +991,7 @@ The `
` element is used to represent a fully self-contained region of co
``` -#### Radio Group with `fieldset` and `legend` - -```html -
-
- Choose one of these three items: - -
- -
- - -
-
-``` - -### Element Accessibility - -#### Reference Accessibility +### Reference Accessibility - `` - `` @@ -941,13 +1018,24 @@ The `
` element is used to represent a fully self-contained region of co – Ados Huxley, Brave New World ``` -#### Text Accessibility +### Link Accessibility + +```html +
+

My article

+

Article brief description with truncation...

+ Read more +
+``` + +### Text Accessibility - `` - `` - `` - `` - `` +- ``: 专有名词解释 `HTML` 不要将 `` 元素与 ``、`` 或 `` 元素混淆: @@ -955,20 +1043,51 @@ The `
` element is used to represent a fully self-contained region of co - `` 强调文本 - `` 元素表示某些相关性的文本 -#### Button Accessibility +#### Text Color A11Y + +- Devtool inspect elements A11Y for color contrast ratio. +- Don't forget `::selection`. + +#### Text Spacing A11Y + +- `line-height` of blocks of text should be **1.5**. +- space between paragraphs should be **1.5 times** the `line-height` + (so a minimum of `2.25 rem`). +- Line height (line spacing) to at least **1.5 times** the font size. +- Spacing following paragraphs to at least **2 times** the font size. +- Letter spacing (tracking) to at least **0.12** times the font size. +- Word spacing to at least **0.16** times the font size. + +### Button Accessibility Use `