1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 2. The HTML & CSS Workmanship M
Accessibility,通常缩写为 A11Y ,这缩写取的是首字母 + 中间字母长度 + 结尾字母,译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念,通过这个概念,让互联网访问公平变得可能。
信息无障碍,英文词语来自“Accessibility”,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息(注意是任何人,无论是健全人还是残疾人,无论是年轻人还是老年人等等)。
A11y(Accessibility)指的是用来帮助身心障碍者(残疾人)更加便利的使用先进技术的能力。目前世界上主要由各种人权组织和政府通过一些民间规则和政府规则来保障这方面权益。以Web Content为例,比较常见的规则有W3C组织在2008年出台的WCAG2.0,和美国国家标准的Section508等等。 这些规则数量比较多,涉及的检查范围从规定网页元素的颜色对比度,到元素的属性是否缺失等,内容十分丰富。对一个网站的内容进行完整的A11y检查,通常需要针对网站的每一个页面的每一个元素走查,这样的检查
信息无障碍,我们能为视障人士做什么? The Unbounded Information Flow:What Have We Done for the Visually Impaired? 黄希
设计师有机会保持事物的同质化;字体、元素、布局和大小都可以保持一致,世界不会结束。
如果你创建了 Web 内容,那么即使从未写过一行代码或登录 CMS,你也可以在可访问性方面发挥作用。
截至 2017 年 6 月,中国网民规模达 7.51 亿,中国手机网民规模达 7.24 亿, 中国网民中农村网民占比 26.7%,规模为 2.01 亿。
本文为联合撰稿,作者为携程国际业务研发部UED团队静静,公共研发团队祥星、旭仔、俊仔、增翼。
网络是向所有人开放的,作为一个测试者(也是人),我们有责任检查它是否对所有用户开放。反过来,这将为业务的成功做出很大贡献,因为我们努力让每个用户都能访问应用程序。
关于可访问性的错误观念 可访问性影响所有用户,而不仅仅是那些有特定障碍的用户。接受这一点意味着实现可访问性就是建立压力案例。压力案例指的是影响任何一个人的任何医疗或任何情境状况,无论是什么场景时间点。一些常见的压力案例原因是:
严格意义上来说,我是一名前端开发,清楚地记得我参与过的项目曾花费大量的人力和时间对网站的UI进行重新改版设计,尽可能多地吸引用户,也曾花费大量人力和时间优化网站的性能,想方设法地提高首屏加载速度,追求极致的性能体验。
WordPress 5.7 发布,新版本改善了古腾堡编辑器的编辑体验,并使用户能够轻松创建更多高级块,并为块编辑器添加更强大的自定义项,还有 HTTPS 切换等其他功能改进。
作者 | 凌敏 W3C(World Wide Web Consortium,又称“万维网联盟”)12 月 19 日发布官博称,在担任 W3C 首席执行官 12 年后,Jeffrey Jaffe 博士正式卸任。 从 2010 年 3 月到 2022 年 12 月,作为研究人员、经理和执行官,Jaffe 博士以多种不同的职业为目标和技能领导了 W3C。他负责 W3C 的所有全球运营,维护 W3C 所有利益相关者的利益,并维持合作和透明的文化,使 W3C 继续成为 Web 技术开发和管理的领先论坛。 资料显示,
作者简介:Jesse Hausler,Salesfoce无障碍设计专家。旨在通过教育大家「通用设计」来实现为所有用户而设计。
你是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素的特定区域,它才会响应?
MD规范里说:文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。
开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。
尽管一些网页设计工具为按钮等元素指定了 CSS 高度值,但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.
碰见过真正难相处的人,才知道身边的伙伴们多么值得珍惜。 前端开发人员应掌握以下核心网络技术(考虑按此顺序学习): 统一资源定位器(又名URL) 超文本传输协议(又称HTTP) 超文本标记语言(又名HT
最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》,也就是 CSS 现状调查,去年年底发布了《State Of CSS 2021》。其中关于特性这一章,会列出一些比较新的 CSS 特性在当年的使用情况概览:
作为目前最主流的设计风格和主题规范之一,Material Design 的深色主题设计规范非常值得参考学习。这是一套高度自恰的设计规范,有着相当严密的内部逻辑,在 Material Design 的内在隐喻逻辑的推动下,严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。
本文列举出 50 个能够帮你提高开发效率,节省开发时间的 Chrome 扩展和 Web 应用,它们很有可能会在什么时候派上用场。老规矩,先转发、点赞、点再看三连,最后再慢慢阅读,千万别让它在收藏夹里吃灰。
上篇《Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要》概述了Web无障碍设计,先来复习一下概念:
Joomla项目宣布推出Joomla 4.0 Alpha 第10个版本,公开进行测试。
@shadow 老师老师!想投稿一篇关于SpringVibe的文章在mixlab,这次保证不鸽辽!
本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel,并且介绍如何更好地利用这个面板。通过 CSS Overview Panel,可能可以帮助我们:
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
大家好,我是 ConardLi, W3C 年度全球技术大会(TPAC 2021)在今年10月份举办,随后他们发布了今年 10 月份的 W3C工作重点报告。
我们列出了十条关于网站无障碍功能的准则,它们能保证你的网站对任何人(包括残疾人)都是可用的。
通过这篇文章,我将向大家介绍下关于设计的一些基本知识,让广大开发者在平时的开发中,可以更好的和设计、产品合作(撕逼)。
国务院办公厅在去年11月份印发了 《关于切实解决老年人运用智能技术困难的实施方案》,发改委、卫健委、工业信息化部、交通运输部、中国人民银行部委联合出动,在国内数字化服务行业掀起了一阵波澜,这也让我们对正在探索的手机银行方案进行重新的审视。 “老年版”之困 我们相信未来产品的设计,一定是更加跨梯度、跨年龄兼容的,产品能为更多的用户带来便捷友好的使用体验。我们正是以这样的思路去理解和探索适老化设计,持续为用户创造更加有温度的手机银行产品。 作为金融领域的“小学生”,在设计之初,我们仔细阅读了工信部牵头响应国务院
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊。。。。。。于是通过本篇来一探究竟:) line-height到底有多height? 行距、行间距傻傻分不清 首先看看“有道词典”的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本行基线和下一文本行
30年前,Tim Berners-Lee 在欧洲核子研究中心创建了第一个 Web 网页,宣告了万维网的诞生。自此,万维网就承载着开放平等的愿景。
英文 | https://uxplanet.org/top-9-ux-trends-to-watch-ut-in-2022-9dfc1eeb25a8
在设计的世界里,色彩不仅仅是视觉的点缀,更是传达情感、构建品牌和增强用户体验的关键元素。但找到那个完美的色彩搭配,往往就像在无尽的色彩海洋中寻找珍珠一样困难。幸运的是,ColorBox——一个全新的在线色彩工具,正悄然改变设计师和创意工作者的工作方式。
嗨,大家好,我是徐小夕。之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
无障碍网页设计(A11Y)不仅是提升用户体验的关键举措,更是我们作为开发者、设计师和内容创作者,积极践行社会责任的重要体现。在这篇文章中,将探讨无障碍网页设计的核心价值,分享一些实用的设计原则与技巧,并通过代码示例来展示如何将这些理念融入到实际项目中。
1.8 动画(Animation) 细微、精美的动画遍布iOS的用户界面,他们使应用的体验更具吸引力,更具动态性。适当的动画可以: 传达状态和提供反馈 增强直接的操纵感 将用户的操作可视化
PrimeVue 是一套非常优秀的 Vue UI 组件库,组件丰富,定制性很强,官网文档清晰,代码例子充足。
配色在整个UI设计中占有举足轻重的地位,它可以直接影响用户对UI界面的体验感。作为UI设计师的你还停留在苦苦比对色卡,一个一个不停的尝试中?今天咱们来看看这8个优秀设计师私藏的配色工具,速度放到自己的收藏夹里吧!好用又高效!
|导语 我们正处于以互联网为代表的现代科技发展迅猛的时代,各种智能化服务都得到了广泛的应用。同时我国老龄化人口的数量又有快速的增长,基数庞大的年长者面临“数字鸿沟”的问题日益凸显,怎样降低老人的互联网接触门槛、帮助他们融入科技生活是我们在设计中应该关注的一个重点方向。本文章通过电子健康码项目中的适老化设计,讲述了在政务行业中我们是如何帮助互联网时代的老年人消除数字鸿沟,让互联网产品更好地“适老”,不让老人“掉队”的。 老年人的数字之困 因为突如其来的疫情的关系,健康码针对于防控疫情已经展现出了它强大的
自适应色板的整个概念源于我们在Adobe的设计系统Spectrum中解决颜色问题的经验。在做这项工作的时候,我们支持六种不同的颜色主题,所有颜色主题都需要与美学相关,与背景颜色具有相似的感知对比度,并遵循统一的可访问性指南。
我们正处于以互联网为代表的现代科技发展迅猛的时代,各种智能化服务都得到了广泛的应用。同时我国老龄化人口的数量又有快速的增长,基数庞大的年长者面临“数字鸿沟”的问题日益凸显,怎样降低老人的互联网接触门槛、帮助他们融入科技生活是我们在设计中应该关注的一个重点方向。本文章通过电子健康码项目中的适老化设计,讲述了在政务行业中我们是如何帮助互联网时代的老年人消除数字鸿沟,让互联网产品更好地“适老”,不让老人“掉队”的。 老年人的数字之困 因为突如其来的疫情的关系,健康码针对于防控疫情已经展现出了它强大的威力。防疫健康
作为一个前端工程师,如果你对 HTML 和 CSS 有基本的了解,并希望在浏览器中创建美观的用户界面,那就别到处乱找资料了!在本文中,你将通过了解以下七个基本知识来提高 UI 设计技能:
前言 在《腾讯文档-构建科学有效的色彩系统》这篇文章中,我们阐述了腾讯文档如何升级了新的品牌色,为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知,以及如何构建一个科学有效的调色板。 在设计系统的实际运行中,我们也需要着眼于如何应用调色板,建设协同工作流,并给各个角色提供有关色彩的扩展指导,以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。 在建设腾讯文档色彩系统的工作中,我们首先构建了一个包含品牌色、灰色、辅助色的调色板,但仅有这个调色板不足以支撑我们流畅、无障碍的协
是时候来更新一下我们需要选择的工具或技术了。请欣赏我们的文档和指南系列的第五部,别忘了让我们知道任何其他我们尚未列入该系列的其他文档或指南。 1.SitePoint Sass Reference Si
底部标签栏(也称为导航栏)是移动设计中最流行的导航类型之一。它位于易于触及的区域,使用户的拇指可以轻松访问。尽管它相对简单,但要正确设计可能会很棘手。
Web开发设计是一个很有前途的职业。然而,这其中也有许多挑战。现在的企业和品牌正在朝网络进军。这给了web开发者非常多的机会来展示他们的技能,并在他们的职业上取得成功。然而,随着web开发需求的不断增长,web开发人员的数量也越来越多。这就是为什么这一领域的竞争开始变得愈演愈烈。但好消息是,如果你有天赋和意愿,那么你总能找到新的方法来创造独特的设计和想法。
领取专属 10元无门槛券
手把手带您无忧上云