WCAG

与WCAG相关的一些学习心得

1.什么是 WCAG? WCAG全称Web Content Accessibility Guidelines 网页内容无障碍浏览准则,简单的说就是为了方便残障人士(包括低视患者,盲人,聋人,学习障碍,行动不便,认知障碍....)访问Web内容而制定的相关标准,可以使网站更加人性化. 举个例子,在WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容. 即不要设计会导致癫痫发作的内容(每秒3次以上的闪烁可能会使癫痫发作). WCAG具体内容和条例请参考Web内容无障碍指南2.0版(WC…

WCAG What is WCAG? Web Content Accessibility Guidelines (WCAG) Overview Checklist and solve technology Documents How to Meet WCAG 2 WCAG 2.0 checklists W3C WAI-ARIA Authoring Practices Browser and Assistive Technology Support: Chrome, Firefox, >=Inte…

HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现

1. 文档声明:<!Doctype> 其实这跟 WCAG 根本上连不上什么直接关系,但为了一个兼容性更好,特别是向后兼容的页面,我推荐你这样写: <!Doctype html> 2. 链接:<a> 互联网的联几乎可以说是用 <a> 来实现的,作为一个页面最常见的标签.我们应该如何对待呢? 为关键链接添加 accesskey 除非万不得已,不要去掉 focus 时虚线框 <a href="" title="" ac…

关于line-height

line-height不允许负值,给定值之后会根据font-size计算行高,line-height指定的行高是行高最小值,设置height可以增大行高 line-height的计算:以px为例,line-height减font-size再除以二,即为font的上下间距 normal的情况为默认值,浏览器会计算出“合适”的行高,与设置的字体有关.多数浏览器(Georgia字体下)取值为1.14,即为font-size的1.14倍,如果未设定font-size,那既是基准值16px的1.14倍单独…

What technical details should a programmer of a web application consider before making the site public?

What things should a programmer implementing the technical details of a web application consider before making the site public? If Jeff Atwood can forget about HttpOnly cookies, sitemaps, and cross-site request forgeries all in the same site, what im…

Less函数说明

索引 escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位 color(@string); // 将字符串解析为颜色值 data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url() ceil(@number);…

OAF_开发系列07_实现OAF下拉菜单的上下联动Poplist Synchor（案例）

20150706 Created By BaoXinjian…

GitHub 上一份很受欢迎的前端代码优化指南-强烈推荐收藏

看到一份很受欢迎的前端代码指南,根据自己的理解进行了翻译,但能力有限,对一些JS代码理解不了,如有错误,望斧正. HTML 语义化标签 HTML5 提供了很多语义化元素,更好地帮助描述内容.希望你能从这些丰富的标签库中受益.  <div id="main"> <div class="article"> <div class="header"> <h1>Blog p…

IE8下JQuery clone 出的select元素使用append添加option异常解决记录

遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefox和chrome浏览器上都没有问题,在IE10下也没有问题, 但是在IE8下就出现问题,使用append添加option后,IE8上就显示不出来新添加option. 示例代码如下,对于clone出的第二个select有问题,但是通过打印,发现添加后的option数目是正确的3个. 这个就太令人费解了…

无障碍网页设计（WCAG2.0）

无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该关注到的一个方面. 无障碍化受益人群: 普通人普通网站用户:文化背景和习惯与主流用户不同的用户:老年人或儿童等用户:无障碍化可使得用户更轻松地使用网站服务,降低使用.学习和理解的成本. 视力障碍用户主要包括盲人.低视力.色盲.色弱等用户.针对这部分用户所做的信息无障碍化是最通用和最具有代表性的,…

对Web标准的理解。可用性和可访问性

一Web标准简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM).ECMAScript等. 1.结构标准 xml可扩展标记语言(标准通用标记语言下的一个子集.外语缩写:XML) WEB标准组…

Web前端知识技能大汇总

项目起源还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 可视化效果前端开发知识结构前端工程师浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chromium (Blink) Safari (WebKit) Op…

alt属性和title属性差异---终于分清楚了！

凡是接触过前端的开发者,相信都会接触到<img>标签,自然alt title更是不会陌生,但对他们真正的含义和使用方法,你确定了解吗? 参考: http://www.junchenwu.com/2005/05/alttitle.html 当浏览器卖主扭曲了标准并且自顾自的不按规则去做一些事,他们可能会造成一些问题,或者至少产生了混淆.例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器. 替换文字(alt text)并不是用来…

优秀前端工程师应该掌握的内容（转自：github）

程序标准规范 ECMAScript HTTP 知识储备作用域/闭包数据结构算法编程范式函数式面向对象基于原型面向方面设计模式软件架构 MVC MVVM 安全 XSS CSRF 富互联网应用程序编程语言 JavaScript ActionScript CoffeScript 页面标准规范 W3C 知识储备网页设计排版响应式 SEO WCAG 微数据/微格式网页语言标记语言 HTML XHTML XML 样式表 CSS XSL 软技能项目及工程管理开发工具 I…

web标准的可用性和可访问性

在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成任务,效率如何,以及这过程中用户的主观感受可好,是从用户的角度来看产品的质量.可用性好意味着产品质量高,是企业的核心竞争力. 可维护性一般包含两个层次,一是当系统出现问题时,快速定位并解决问题的成本,成本低则可维护性好.二是代码是否容易被人理解,是否容易修改和增强功能.可维护性和可复用性.可扩展性等…

干货：Web应用上线之前程序员应该了解的技术细节

[伯乐在线注]:<Web 应用上线前,程序员应考虑哪些技术细节呢?>这是 StackExchange 上面的一个经典问题贴. 最赞回复有 2200+ 顶,虽然大多数人可能都听过其中大部分内容,但应该会有你没有深入了解的内容.一起来看看. 问题 Web 应用上线前,程序员应考虑哪些技术细节呢? 如果 Jeff Atwood 忘记把 HttpOnly cookies.sitemaps 和 cross-site request forgeries 放在同一个网站,那我会把什么重要的东西也会忘掉呢?…

使用 HTML5 设计辅助功能

使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的技术更易于实现辅助功能. 当前,这意味着使用 HTML5. 为了具备易访问性,您需要在多种设备上提供您的内容,如使用键盘或鼠标的普通计算机.屏幕阅读器.音频浏览器.具有有限带宽的设备.旧式浏览器和计算机以及手机和触摸设备. 而且,它应覆盖最广泛的人群,包括残障人士.老年人.文化水平不高或暂时患病的人…

雅虎UED--无障碍网页设计

转自:http://www.sharetk.com/html/ued/Interactive-Design/1394.html 随着web使用量的增加和人们网络意识的增强,一些特殊用户开始被我们所关注.其中有些人很难看清或根本无法看到电脑屏幕:有些人无法使用鼠标: 有些人有阅读障碍:而年长者经常同时具有上述这些障碍,但仍需要使用网站.让每个人更容易地浏览,并协助这些特殊人士无障碍的使用网站,是非常有价值的. 互联网让世界发生了翻天覆地的变化,那么,它给盲人带来了什么?出乎绝大多数明眼人的意料——…

IE8“开发人员工具”使用详解上(各级菜单详解)

来源: http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html IE8“开发人员工具”使用详解上(各级菜单详解) IE8正式版已经发布了.本篇文章不会非常扯蛋地去进行什么评测,然后给出什么“Chrome运行JavaScript能力是IE8的15倍”.什么“IE8页面渲染速度是Safari的2.456倍”.什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论.我管谁比谁强…

WEB 开发者应该具备的 6 大技能？

1. 界面和用户体验注意,浏览器的实现标准是不一致的,请确保你的网站能够兼容所有主流的浏览器.最少需要测试的有 Gecko 引擎 (Firefox),WebKit引擎(Safari以及一些手机浏览器),Chrome,你所要支持的 IE 浏览器,以及 Opera.此外,你还需要了解不同系统下,浏览器是如何渲染网页的. 考虑一下人们不使用主流浏览器的情况,如手机,屏幕阅读器和搜索引擎.一些可用的辅助信息:WAI 和 Section508,移动开发:MobiForge. 阶段:如何在不影响用户的情况…

[UWP]浅谈按钮设计

一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不会对性能有多大影响,所以不少注重细节的设计师最为热衷修改按钮.(例如这位 ) 目前UWP只提供了基础款的按钮样式,网上相关资源也较少,所有写了这篇文章用于介绍在UWP上设计按钮的入门知识. 1. VisualStates Button的CotrolTemplate(可以参考这里 )中包含四个Vi…

Less的内置函数

杂项函数 color 解析颜色,将代表颜色的字符串转换为颜色值. 参数: string: 代表颜色值的字符串. 返回值: color 案例: color("#aaa"); 输出: #aaa convert 将数字从一种单位转换到另一种单位. 第一个参数为带单位的数值,第二个参数为单位.如果两个参数的单位是兼容的,则数字的单位被转换.如果两个参数的单位不兼容,则原样返回第一个参数. 兼容的单位是: 长度: m, cm, mm, in, pt and pc, 时间: s and ms, 角…

前端的UI设计与交互之字体篇

跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好的阅读体验的同时,使页面的视觉层次更加清晰.使用时有以下三点需要注意:合理的使用不同的字重.字号和颜色来强调界面中最重要的信息:尽可能的使用单种字体,混合使用多种字体会让界面看起来零散和草率:遵循 WCAG 2.0 标准,字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准. 一.字体家族优秀的字…

SCSS & SASS Color 颜色函数用法

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3); background-color: $linkColor; } 生成的 CSS 代码 .box{ box-shadow:0 2px 6px 0 rgba(32,160,255,.3)…

x(3)0905第二天__W3C标准集合

World Wide Web Consortium 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合. 创建于 1994 年,是 Web 技术领域最具权威和影响力的国际中立性技术标准机构. 到目前为止,W3C 已发布了 200 多项影响深远的 Web 技术标准及实施指南: 如广为业界采用的超文本标记语言(标准通用标记语言下的一个应用,外语缩写:HTML). 可扩展标记语言(标准通用标记语言下的一个子集,外语缩写:XML,最初设计目的是弥补 HTML 的不足,以强大的扩展性…

Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）

Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改建站有很多技术,如 HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.http://ASP.NET.Web Services.浏览器脚本.服务器脚本等.它们的区别是什么?新手一点不懂,想理清所有这些技术之间的关系和应用范围.修改举报13 条评论分享 • 邀请回答默认排序按时间排序 62 个回答 10K赞…

W3C规范

连接:https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html W3C 代码标准规范由路飞创建, 最后一次修改 2017-01-03 W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组.社区组.商务组等).W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置.截至2014年7月,W3C共设立5个技术…

什么是web标准、可用性、可访问性

前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? 一.web标准简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括XHTML和XM…

itemscope itemtype="http://schema.org/AggregateRating"

Review Canonical URL: http://schema.org/Review Thing > CreativeWork > Review A review of an item - for example, of a restaurant, movie, or store. Usage: Between 250,000 and 500,000 domains [more...] Property Expected Type Description Properties from…

【转载】这样去写你的HTML

昨天在 twitter 上说,怎么忍心把页面写得这么难用?是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢.比如那些需要读屏软件的用户.作为一个前端,我们又怎么会忍心呢.之前就一直想写这样的一篇文章,分享一下如何去创造一个可访问性更好的页面.今天的计划里有一条把 2HTML T2ag 和 WCAG标准结合起来.我推荐你这样去写你的 HTML,让某些人的生活可以更容易. 今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的…

【WCAG】的更多相关文章