site:accessibility

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
site:accessibility [2020/05/14 07:36]
dunbar 		site:accessibility [2020/05/25 08:56] (当前版本)
dunbar [色彩无障碍]
行 1: 行 1:
-=== 无障碍 - Accessibility === +====== 无障碍 - Accessibility ======
-<div group> +
-<div half column> +
- +
-^ 等级\\ Level ^ WCAG 2.1 ^ Section 508 - 2017 ^ +
-| A | {{site:tick.png?15x15}} | {{site:tick.png?15x15}} | +
-| AA | {{site:tick.png?15x15}} | {{site:tick.png?15x15}} | +
-| AAA | {{site:tick.png?15x15}} | | +
-标准\\ Standards +
-  * [[https://www.w3.org/TR/WCAG21/ | Web Content Accessibility Guidelines (WCAG) 2.1]] (2018/06/05, W3C) +
-  * [[https://www.w3.org/Translations/WCAG21-zh/ | 网页内容无障碍设计指引 (WCAG) 2.1]] (2019/03/11, W3C) +
-  * [[https://www.section508.gov/manage/laws-and-policies/quick-reference-guide | Revised 508 Standards Transition Guide]] (U.S General Services Administration) +
-</div> +
- +
-<div half column>+
  
 我们希望任何人都能便捷地使用2Socks。根据测试，2Socks符合网页内容无障碍设计标准。 我们希望任何人都能便捷地使用2Socks。根据测试，2Socks符合网页内容无障碍设计标准。
行 29: 行 15:
     * Chinese Speaker is the default, and you may need to manually set it to an English reader when accessing English pages.     * Chinese Speaker is the default, and you may need to manually set it to an English reader when accessing English pages.
  
-</div> +==== 测试结果 - Test result ==== 
-</div>+^ 等级\\ Level ^ WCAG 2.1 ^ Section 508 - 2017 ^ 
 +| A | {{site:tick.png?15x15}} | {{site:tick.png?15x15}} | 
 +| AA | {{site:tick.png?15x15}} | {{site:tick.png?15x15}} | 
 +| AAA | {{site:tick.png?15x15}} | | 
 + 
 +==== 标准 - Standards ==== 
 +  * [[https://www.w3.org/TR/WCAG21/ | Web Content Accessibility Guidelines (WCAG) 2.1]] (2018/06/05, W3C) 
 +  * [[https://www.w3.org/Translations/WCAG21-zh/ | 网页内容无障碍设计指引 (WCAG) 2.1]] (2019/03/11, W3C) 
 +  * [[https://www.section508.gov/manage/laws-and-policies/quick-reference-guide | Revised 508 Standards Transition Guide]] (2018/01/18, U.S General Services Administration) 
 + 
 +==== 色彩无障碍 ==== 
 +当设计一个网站时，美观是很重要的，但若用户很难看清楚字，那便是本末倒置。数据显示，每12位男性或200位女性中便有一人患有色盲（Color blindness），又称色觉辨认障碍（Color vision deficiency），世界上约有3亿人口深受其影响[(Color blind awareness. //Colour Blindness // Color blind awareness. http://www.colourblindawareness.org/colour-blindness/)]。色觉辨认障碍症的患病率是如此的高，因此我们在设计2Socks时，着重考虑文本易读性，我们希望任何人在任何条件下都可以轻松浏览2Socks。 
 + 
 +=== 配色的选用 === 
 +WCAG2.1标准规定，网页字体、超链接的颜色与背景颜色的对比度必须满足4.5:1，网页字体颜色与超链接颜色必须满足3:1。我们选择的网页字体颜色为#2B2B2B，超链接颜色为#337BAE，背景颜色为#FFFFFF。 
 + 
 +测试结果如下： 
 +^ 项目 ^ 对比度 ^ 等级 ^ 
 +| 网页字体与背景 | 4:58:1 | AA | 
 +| 超链接与背景 | 14:15:1 | AA | 
 +| 网页字体与超链接 | 3.09:1 | AA | 
 + 
 +=== 我们如何确保色觉辨认障碍者能够准确识别文字？ === 
 + 
 +色觉辨认障碍大致可分为[(Birch, J. 1993. //Diagnosis of Defective Colour Vision. Oxford University Press//, 204 pp. 
 +)][(Piantanida, T. 1991. //Genetics of inherited colour vision deficiencies, in: Inherited and acquired colour vision deficiencies: Fundamental aspects and clinical studies, 88-114, ed//. by Foster, D. H., Keele, UK.)][(Pickford, R. W. 1959. //Some heterozygous manifestations of colour blindness//. British Journal of Physiological Optics, 16:83-95.)][(Pokorny, J., Smith, V. C., Verriest, G. and Pinkers, A. J. L. G. (eds.) 1979. //Congenital and acquired color vision defects//. New York: Grune & Stratton. )]： 
 + 
 +  * 绿色盲（弱），所有男性中占5% 
 +  * 红色盲（弱），所有男性中占2.5% 
 +  * 蓝色盲（弱），所有性别中占0.3% 
 +  * 全色盲 
 + 
 +我们通过色觉辨认障碍模拟软件——[[http://colororacle.org/index.html|Color Oracle]]对2Socks进行测试，该软件由[[http://berniejenny.info/|Bernie Jenny副教授]][(Bernie Jenny, Associate Professor of Immersive Visualisation Immersive Analytics Lab, Monash University, Melbourne, Australia)]开发。 
 + 
 +=== 参见 === 
 +  * [[https://contrastrebellion.com/|Contrast Rebellion]] (英语），这个网站直观地显示出，低对比度文字是多么的难以阅读。
  • site/accessibility.1589441804
  • 最后更改: 2020/05/14 07:36
  • 由 dunbar