首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于无障碍设计的七件事

当根据WCAG来设计和开发时,可以使网站内容更易被有障碍的人士所接受。 换句话来说,当文本大小是24px或18px加粗或者更大时,在白色文本背景上使用的最浅的灰色是#959595。 ?...WebAIM颜色对比度检查器(https://webaim.org/resources/contrastchecker/)根据你输入的字体颜色和背景颜色,检查是否符合WCAG标准。 ?...当焦点在输入框内时,如今常见的用“占位文本”来替代标签是一种不太好的做法。占位文本通常对比度不高。在下面的7个例子中,只有一个满足上文第4点中提到的4.5:1的比例。 ?...下面是另一个Evernote的例子。这是笔记的列表视图。当用户的鼠标悬停在一行时,会出现四个可操作的图标。 ? 在这个例子中,怎么始终显示四个图标呢?...一种方案就是,它们在白色背景上可以是绿色,在鼠标悬停时颜色反过来。 ? 这个解决方案也可能会被称为“重”。但是,请记住,我们不是为设计师而设计。我们在为不同的用户设计。

3K30

WordPress 主题教程 #10:十六进制颜色代码和样式化链接

颜色属性,跟着的是一个十六进制代码,是用于给文本上色,如 body { color: #000000;} 意思是你页面 body 内所有文本将是黑色的。...背景颜色属性,跟着的是一个十六进制代码,是给除背景上色,如 body{ background: #ffffff; } 意思是为 body 上白色背景。...这是不是纯正的蓝色,但它确实是蓝色是因为最后两个数字(代表蓝色)是最高值的数字。 a:link 用于样式化链接。当你想把一个词转变为链接的时候,用什么实现呢?...第2步:添加链接悬停颜色 在 a:link, a:visited{ } 下输入以下代码: a:hover{ text-decoration: none; } 这些代码是干吗用的呀?...如果你想更改你链接悬停时的颜色,那么就增加 color: 和任何你想要的十六进制代码,如: a:hover{ text-decoration: none; color: #ff0000;

80630
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    C++ Qt开发:PushButton按钮组件

    类似于HTML和CSS中的样式表,QSS允许开发者通过简单的样式规则来定义Qt界面的外观,包括控件的颜色、字体、边框、背景等。...的背景颜色为黄色 ui->pushButton->setStyleSheet("background:yellow"); 当然了如果我们将ui->指定传入this->则会对当前整个页面生效,当如下界面被执行时则整个页面会变成蓝色...:3px; } 此时会呈现三种状态,当默认未被选中时会使用QPushButton来渲染,而QPushButton:hover则用于悬停时的显示,最后的QPushButton:pressed则是被按下是的颜色渲染...下面是悬停态的背景图: 下面是按下态的背景图: 接着就是要把这些图片添加到Qt中的资源中去,在项目主目录上右键选中Add New...按钮,并找到Qt下的Qt Resource File选项卡,并点击Choose...,并输出如下图所示; 当然,此类按钮的美化完全可以使用QSS来实现并不需要导入样式图,这种方法比上面用图标作为背景的好处就是可以不需要设计背景图,而且在样式不设置字体的情况下,可以随意更改文字以及文字的大小

    1K10

    那些关于DOM的常见Hook封装(二)

    判断是否是全屏。 .isEnabled。判断当前环境是否支持全屏。 来看该 hook 的封装: 首先是 onChange 事件中,判断是否是全屏,从而触发进入全屏的函数或者退出全屏的函数。...,调用上面两个方法,达到切换全屏状态的效果。...即此页面在前景标签页中,并且窗口没有最小化。 'hidden' : 此时页面对用户不可见。即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' 。...'prerender' : 页面此时正在渲染中,因此是不可见的。文档只能从此状态开始,永远不能从其他值变为此状态。...典型用法是防止当页面正在渲染时加载资源,或者当页面在背景中或窗口最小化时禁止某些活动。

    87620

    Word VBA实战应用:给文本添加屏幕提示

    标签:Word VBA 本文提供的Word VBA程序可以在Word中制作类似网站中的屏幕提示,即将鼠标悬停在特定文本上时显示包含相关信息的小框。...'如果指定的字符会包含在屏幕提示文本中, '那么将该字符更改为屏幕提示文本中不使用的字符....'光标必须处于超链接中或者所选内容必须包括超链接 Sub RemoveScreenTipFromText() Title = "从所选内容中删除屏幕提示" '如果所选内容中不是只有一个超链接则停止...此时,当用户将鼠标悬停在所选文本上时,输入的文本将显示在屏幕提示中。文本也应用了指定的背景色,以便于用户容易识别包含有屏幕提示的文本。...而正常的超链接样式将自动从超链接中删除,以便用户可以将屏幕提示超链接与普通超链接区分开来。如果需要,可以更改程序中背景色的颜色。

    1.8K20

    UI界面中阴影绘制完全攻略!

    首先,咱们谈谈阴影使用的场景。 ? 我们使用阴影来强调特定的组件,创建深度以在屏幕中来创造一个特别的世界,并给出某些组件的特定状态。但是,我们在哪里,以及如何明智地使用它们呢?...默认状态和悬停状态按钮 场景02.卡片阴影 卡片是UI中重要且可操作的组件。要使它们具有一定的深度,并将其视觉上放置在最上层,此时我们可以使用阴影。记住!要让它们漂浮起来。 ?...卡片中的阴影 场景03.特定图层阴影 如下图类似的操作会让用户去了解有关屏幕上特定元素的其他信息。它们将在几秒钟内处于活动状态,因此您需要使它们清晰并与背景中的元素产生最佳对比。...带有阴影的提示图形 场景04.活动项目(如开关) 当涉及到活动状态(例如切换或选定的列表项)时,一种不错的做法是为它们提供视觉层次结构,例如颜色,当然还有阴影。另外,使它们简单而柔软。 ?...两种不同状态的开关 场景05.重叠项目 如果要在UI界面中重叠两个或者多个元素,则需要添加阴影以便让元素之间具有更多的对比度和深度。 ?

    2.6K20

    10 个你需要熟悉的 CSS3 属性

    让我们模拟一个常见的效果,一旦您将链接悬停在侧边栏中,文本将略微向右滑动。...在鼠标移出时,元素将立即返回其初始状态。 因为我们只是增强了效果,所以我们绝对没有对旧浏览器造成任何伤害。 最终项目 让我们结合我们在本文中学到的大部分技术,为显示翻转卡片创建一个简洁的效果。...第 1 步.标记 我们会保持简单;在我们的 .box 容器中,我们将添加两个 divs:一个用于正面,另一个用于背面。...font> position: relative; transition: all 1s; } 请注意,我们还指示此元素 侦听元素 状态的任何更改...当它们发生时,我们将在一秒钟 ( ) 的过程中转换更改(如果可能transition: all 1s)。 第 4 步。

    2.2K00

    12.1版本中的全新数据交互控制和格式选项功能

    如果一个Dataset有多个不同的数据,你可以同时对多列数据进行排序: ? 将鼠标悬停在行标题列上方的空白单元格角落可以对行标题进行排序。当菜单指示标记( ?...当Dataset有滚动条时,你可以用ScrollPosition指定初始滚动条的位置,可以给出初始竖直和水平位置: ?...所以{"Eva","age"}和{"Deb","sex"}这两个格子是绿色的,因为叠加了黄色和青色: ? 在Grid中,你还可以指定某个层级的元素在开始、中间和末尾需要使用的背景颜色。...且在Background选项值中,通常只有在同为某一规格说明的一部分时,颜色才会叠加。在这个例子中,列的颜色覆盖了行的颜色,只有在列的颜色为None时,才会显示行的颜色: ?...当你将鼠标悬停在一个Dataset元素上方,你会在数据组框架的下方看见其路径被显示出来。想要对该元素应用一个背景颜色,只需在Background值中某规则的左手边指定该路径即可: ?

    1.6K30

    Matlab系列之GUI设计基础

    用指定的颜色填充 uicontrol 界定的区域。 RGB 三元数是三元素行矢量,其元素分别指定颜色中红、绿、蓝分量的强度。强度必须处于范围 [0,1] 之间,例如 [0.4 0.6 0.7]。...•'inactive' – 控件未处于工作状态,但其外观与当 Enable 设置为 'on' 时相同。 Enable 属性的值和按钮点击的类型共同确定响应。...'popupmenu' 孤立菜单,在点击它时,它将展开以显示选择列表。它处于折叠状态时,菜单显示当前选择。...如果控件回调是运行中回调,则 Interruptible 属性将决定它是否可以被另一回调中断。Interruptible 属性具有下列两个可能的值: •'on' - 运行中回调可以被另一个回调中断。...'checkbox' 当取消选中复选框时,Value 属性更改为 Min 属性的值。 'radiobutton' 当取消选择单选按钮时,Value 属性更改为 Min 属性的值。

    5.9K10

    CSS Transitions

    「触发过渡:」 过渡通常在「元素的状态发生变化时触发」。 例如,当我们悬停在按钮上时,可以更改其背景颜色,过渡效果将使颜色平滑地在指定的持续时间内变化。...「颜色分离」: 子像素渲染允许文本和图像中的颜色分离到每个子像素。这样,一个像素可以显示多种颜色,提供更丰富的颜色表示能力。...当计算机关闭时,视频内存中的任何图形数据都会被清除。 ❞ ---- backface-visibility backface-visibility 是一个CSS属性,用于控制元素的背面是否可见。...规范明确规定,当传递多个数字时,第一个是持续时间,第二个是延迟。 ---- 元素快闪 当在悬停时将一个元素向上或向下移动时,我们需要非常小心,以确保不会出现「快闪」现象。...这个 span 元素包含了所有的样式(背景颜色、字体等等)。 当我们悬停在这个普通的按钮上时,它会导致子元素从上方露出。然而,按钮本身是静止的。

    32430

    纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    :1 ・深度:当元素处于相对较高的位置上的时候,通过较浅的表层颜色来呈现这种纵深上的差异。...注意 确保背景颜色足够深,才能正文处于最高高程(24dp)的情况下,达到至少 4.5:1(AA)的对比度。 在使用纯黑色的界面下,有写硬件设备的电池效率会更高。...容器底色使用基准色而文本使用白色的时候,被启用、悬停、长按、按下和拖动时的不同状态。 ? 容器底色使用基准色而文本使用主色的时候,被启用、悬停、长按、按下和拖动时的不同状态。...使用主色的容器 当控件容器的底色使用主色的时候,用来指示状态的叠加层应该使用白色。不同的状态下,叠加层的不透明度的状态各不相同,正常状态下是未叠加,其他状态下的叠加透明度则从4%到12%不等。 ?...底部容器使用半透明主色的时候,被启用、悬停、长按、按下和拖动时的不同状态。 ? 底部容器使用主色的时候,被启用、悬停、长按、按下和拖动时的不同状态。

    9.8K10

    android-drawable子类介绍

    ) 当StatListDrawable资源作为组件的背景或者前景Drawable资源时,可以随着组件状态的变更而自动切换相对应的资源,例如,一个Button可以处于不同的状态(按钮按下、获取焦点) 我们可以使用一个...StateListDrawable资源,来提供不同的背景图片对于每一个状态。...,当组件的状态变更时,会自定向下遍历StateListDrawable对应的xml文件来查找第一个匹配的Item 当有通知栏被拉下来或者一个对话框弹出的时候应用程序就不在前台了 注意:如果有多个item,那么程序将自动从上到下进行匹配,最先匹配的将得到应用。...(不是通过最佳匹配)如果一个item没有任何的状态说明,那么它将可以被任何一个状态匹配。 ShapeDrawable(圆角) ShapeDrawable资源绘制一个特定的形状,比如矩形、椭圆等。

    46010

    成为一名高级 React 需要具备哪些习惯,他们都习以为常

    当状态更新很简单时,useState是非常好的。例如,可以用 usestate跟踪复选框是否被选中,或者跟踪文本输入的值。 话虽如此,当状态更新变得稍微复杂时,您应该使用一个reducer。...特别是,当你在存储一个处于状态的数组时,你应该使用一个reducer。...在决定是否应该编写一个测试时,问自己,“这个测试的影响是否足够大,足以证明我花在编写它上的时间是值得的?”如果答案是肯定的,那就写测试吧!...将你的光标移动到一个可点击的元素上应该会稍微改变元素的颜色,并使光标变成一个“指向手”,也就是CSS中的指针。将鼠标悬停在一个引导按钮上,看看这些最佳实践的运行情况。 不要隐藏重要的UI元素。...想象一下,在一个待办事项列表应用程序中,“X”按钮删除待办事项时是不可见的,直到你将鼠标悬停在该待办事项上。有些设计师喜欢这样的“整洁”,但这需要用户四处搜寻,弄清楚如何执行基本操作。

    4.7K40

    Vs Code 2020年6月(1.47版)

    查看和排序挂起的更改 -以树或列表的形式查看文件,按名称,路径或状态排序。 编辑复杂设置 -从“设置”编辑器中编辑对象设置。...)中添加了两个新参数,以允许按键绑定配置新搜索编辑器的行为: triggerSearch-打开搜索编辑器后是否自动运行搜索。...编辑 正则表达式替换中的大小写更改 VS Code现在支持在编辑器中进行查找/替换时更改正则表达式匹配组的大小写。...查看和排序 我们增加了对使用列表视图选项时按名称,路径(默认)和状态对源控件视图中的更改进行排序的支持。我们将视图选项(列表或树)和排序选项合并到上下文菜单中的新“ 视图和排序”菜单项中。 ?...:单元格悬停时单元格的背景颜色 notebook.cellInsertionIndicator:笔记本电池插入指示灯的颜色 notebook.focusedCellBackground:单元格聚焦时单元格的背景色

    4.5K30

    前端开发必备之Chrome开发者工具(上篇)

    快速向样式规则添加背景色或颜色 Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式 样式规则的右下角有一个由三个点组成的图标...这是因为开发者很少需要在 top 以外的任意环境中操作。 输入一个变量,期待返回一个值,只是为了查看该变量是否为 undefined(因为该变量是在不同环境中定义的),这会非常令人困惑 ?...DOM更改断点 当您想要更改DOM节点或其子节点的代码时,使用DOM更改断点 设置DOM更改断点: 切换到 Elements 面板。 找到您想设置断点的元素并右键单击该元素。...输入你想要打断的字符串。当此字符串出现在XHR的请求URL中的任何位置时,DevTools会暂停。 按Enter确认。 ?...选中这些类别中的一个可以暂停该类别的任何事件,或者展开类别并检查特定事件。 ? 异常断点 当您想暂停引发捕获或未捕获异常的代码行时,使用异常断点 设置异常断点: 点击 Sources 选项卡。

    8.3K111

    HTML详解连载(5)

    ,网页开发建议使用无衬线字体 font 复合属性 使用场景 设置网页文字公共样式 复合属性 属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开 font:是否倾斜 是否加粗 字号/行高...表示透明度 取值0-1 十六进制表示法-#RRGGBB 提示 只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色。...属性},选择器之间用,隔开 交集选择器 选中同时满足多个条件的元素 写法 选择器1选择器2{CSS属性},选择器之间连携,没有任何符号 注意 如果交集选择器中由标签选择器,标签选择器必须书写在最前面...伪类选择器 伪类表示元素状态,选中元素的某个状态设置样式 鼠标悬停状态 选择器 hover{CSS属性} 强调 任何标签都可以设置鼠标悬停状态 伪类-超链接 状态 :link 访问前 :visited访问后...:hover 鼠标悬停 :action 点击时(激活) 注意 如果要给超链接设置以上四个状态,应按照LVHA的顺序书写

    16620

    如何使用CSS创建按钮悬停动画效果?

    opacity − 这个属性设置元素的透明度级别,其中1表示完全可见,0表示完全透明。 background-color − 这个属性设置元素的背景颜色。...color − 这个属性设置元素的文本颜色。 transition − 此属性控制两个状态之间的动画效果,例如默认状态和悬停状态。 bottom 和 top - 属性将元素相对于其容器定位。...示例1 - 悬停放大 在这个示例中,按钮将具有蓝色背景和白色文本。当鼠标指针悬停在按钮上时,按钮将使用 transform 属性以平滑的过渡在0.5秒内缩放20%,背景颜色将变为绿色。...在这个例子中,按钮将具有蓝色背景和白色文本,初始不透明度为0.5。...在这个例子中,按钮将具有蓝色背景和白色文本,位置设置为相对。

    31310

    Qt Designer中的QWidget属性表介绍

    ---- sizePolicy属性用于说明部件在布局管理中的缩放方式,当部件没有在布局管理器中时,该设置无效。...当父部件保持禁用状态时,不可能显式启用不是窗口的子部件。...没启用的情况下,对应部件只接收在鼠标移动同时至少一个鼠标按键按下时的鼠标移动事件; 启用鼠标跟踪的情况下,任何鼠标移动事件部件都会接收。...这个属性也有国际化属性 ---- accessibleName是辅助阅读中显示的部件名称,对于大多数小部件,是无需设置此属性的,因为Qt会调用部件相关属性显示,如按钮将显示按钮的文本,但当小部件不提供任何文本时...当部件的状态切换时,默认的图标绘制函数会自动根据部件的状态重绘图标 Ⅱ、enum State { Off, On } 某些部件还有所谓的开关状态(比如一个按钮可以有按下和弹起两个状态), 则还可以根据

    11.3K20
    领券