本文参考 WCAG 2.1 、WAI-ARIA 和 Web 可访问性与无障碍最佳实践,在京喜小程序首页无障碍优化开发中,总结了一些“无障碍优化”在小程序端的实践,希望以此推动无障碍在小程序更多地落地。
我们期望的媒体播放器应该是能被尽可能多的用户使用,不管他们处于何种环境,而不是假设每个用户以完全相同的方式与媒体播放器交互。如何实现?我们分解成了三个步骤。
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的。
任何 UI 框架或库最期望目标之一是帮助我们建立通用的模式或约定。
| 导语 这里谈到的svg回退,不针对于动画的回退,针对于面对高清屏的日益普及项目中所利用svg矢量图形,所做的图片和图标的回退。目前类似的高清处理方案还有icon fonts,也有多倍图,经过项目中不断尝试和总结,svg目前可能是最符合我们预期的方案,无论是浏览器渲染后的效果,还是出于对设计师的工作成本的考虑,以及后期各个环节人员配合的效率来看,svg都有过人之处。(具体推演过程参看ISUX博文) 1. 为什么使用SVG 体积小,可压缩 与同类图片相比,在体积上有优势,同时作为一种XML文件,对gzip
这是一个新坑的开始,弃坑的事情其实也做过,当年考虑把Jmeter用7天速成宝典的方式重新写一遍,最后也不了了之了,毕竟一旦这事情做起来没乐趣了,也就少了动力了。
三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。
Web 平台概念有时可能完全不同,但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。 我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似,至少在我看来是这样的,那就让我们开始吧!
Bootstrap 是一个强大的前端框架,为网页和应用程序开发提供了丰富的组件和工具。其中,导航条和分页条是两个常用的组件,用于创建网站的导航和分页功能。本篇博客将深入探讨 Bootstrap 导航条和分页条的使用,适用于那些希望提升网页设计技能的初学者。
注:由于 HTML 里面写了很多下载的 css 文件地址,路径总是报错,最后还是 建议引用 CDN 写法,相关库地址查询https://www.bootcdn.cn/
30年前,Tim Berners-Lee 在欧洲核子研究中心创建了第一个 Web 网页,宣告了万维网的诞生。自此,万维网就承载着开放平等的愿景。
Selenium简单介绍 https://selenium-python.readthedocs.io/ https://python-selenium-zh.readthedocs.io/zh_CN/latest/ 什么是selenium 通过浏览器驱动来自动化操纵浏览器的工具 selenium -> 传输指令 -> webdriver -> 转换指令 -> 浏览器 webdriver的出现是为了兼容各语言各版本, 使java或者python都可以通过同一个webdriver达到操纵浏览器的目的. se
Youtube 是一个非常流行的视频分享平台,有时候我们可能想要爬取一些视频的信息,比如标题、播放量、点赞数等。但是有些信息并不是直接显示在网页上的,而是需要我们将鼠标悬停在某个元素上才能看到,比如视频的时长、上传时间等。这些信息被称为悬停文本,它们是通过 JavaScript 动态生成的,所以我们不能用普通的 HTML 解析方法来获取它们。那么,我们该如何用爬虫来获取 Youtube 的悬停文本呢?本文将介绍一种方法,使用 Selenium Chrome Webdriver 来模拟浏览器操作,获取 Youtube 的悬停文本。
随着互联网的不断发展,越来越多的人开始依赖于网络,如何让网站更加易于访问、易于阅读是一个至关重要的问题。本文将从多个方面介绍如何使用CSS来提升网站的可访问性。
优秀的无障碍设计,不仅能让残疾人用户正常地与产品交互;还会为普通人提供更好的使用体验。
随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。
ARIA (Accessible Rich Internet Applications) 是一组属性,用于定义使残障人士更容易访问 Web 内容和 Web 应用程序(尤其是使用 JavaScript 开发的应用程序)的方法。
css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性。
上节我们实现了分页功能,这节我们要实现对模糊查询后的结果进行分页。(引入了bootstrap框架)
常规类 标签文本 05不写一行代码来实现自动化由于技术的进步,各行各业的门槛越来越低。 以前别人说会selenium就是会自动化。好像很高大上的样子。现在会selenium估计是基本的。大家都忙着内卷,各种轮子越来越多,自动化的门槛也越来越低。02Django分页器分页功能是所有网页上都需要提供的功能,当要展示的条目比较多时,就需要进行分页,不但能减小数据库读取数据压力,也有利于用户浏览。 Django为我们提供了一个Paginator分页工具,这个类帮助我们来管理分页数据,该类存放在django/core/paginator.py它可以接收列表、元组或其他可迭代对象。03Python进阶31-Django 分页器-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。02做了七年前端开发,我最近才意识到可访问性的必要......作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。03Fluid -39- 自定义右键菜单博客的右键菜单,本质上很简单,就是在当前 Html 界面劫持右键单击事件,禁止默认右键弹出,把自己的右键菜单在当前鼠标位置展示出来。01干货:CSS 专业技巧CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:05小程序开发新能力解读 - 2021.12- request/download 新协议 enableHttp2 / enableQuic / enableCache03[Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传递。通过学习我们可以发现,在实现路由间的参数传递时,我们将 Vue Router 与我们的组件强耦合在一起,这无疑是不合适的,那么本章我们就来学习,如何实现组件和 Vue Router 之间的解耦。01写前端代码时请多为残障人士思考之『Accessibility』Accessibility,通常缩写为 A11Y ,这缩写取的是首字母 + 中间字母长度 + 结尾字母,译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念,通过这个概念,让互联网访问公平变得可能。02一个侧边栏导航组件实现思路翻译:布兰 作者:Adam Argyle 来源:https://web.dev/building-a-sidenav-component/04VOID3.1开发版OwO表情BUG最近在用VOID主题,不得不说很好看而且开发者也很用心去写这个主题。 但是在用VOID发布版时在Chrome浏览器时会出现点击闪烁,开发者熊猫小A在发布版中解决了这一问题,但是在换用开发版时出现了发布版中没有出现的问题(如下图)02Spring Security 自定义登陆页面在这个 Spring Security 教程中,我们将学到怎么创建一个自定义登陆页面来实现 Spring Security 基于表单的验证。01如何用120行代码,实现一个交互完整的拖拽上传组件?于是我又用React Hooks 重写了一版,除CSS的代码总数 120行。 效果如下:03WebComponent魔法堂:深究Custom Element 之 面向痛点编程前言 最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语无所谓,最重要是UI/UX上符合要求,技术的事你说了算。",于是我只好乖乖地去学UI/UX设计的事,木有设计师撑腰的前端是苦逼的:(嘈吐一地后,还是挤点时间总结一下WebComponent的内容吧,为以后作培训材料作点准备。 浮在水面上的痛 组件噪音太多了! 在使用Bootstrap的Modal组件时,我们不免要Ctr05bootstrap input框回车后重新刷新页面问题在给bootstrap页面form表单中的input搜索框绑定回车事件后,输入完成点击回车搜索,页面会向后台发起两次请求,且会自动取消第一次请求,自动刷新页面导致不是你输入搜索条件查询到的结果,效果图如下01如何测试你做的项目的可访问性编者按:本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。01电子科技大学/UESTC积极分子培训视频自动播放python脚本 python 的selenium 库可模拟人的行为去操作浏览器, 是web自动化测试工具, 同时也可定制一些特定脚本去模拟人观看视频.01分页功能我们在浏览很多网页的时候,由于数据太多,很多时候不能放在一个页面上,此时就需要分页功能。比如我们看到的博客园最下面的分页栏,它是动态的显示的,比如虽然说总页数会是100页,但我们不能把100页都显示出来,始终显示当前页的前5页和后5页,然后还有首页、尾页、上一页、下一页等功能,今天我就来实现这一功能,我们可以把它封装成一个类,以后哪里需要了,直接引用就行了。 一、把分页功能定义成一个类 pagination.py class Pagination(object): def __init_02Selenium Python使用技巧(二)您可能需要在多种情况下针对不同的浏览器(例如Firefox,Chrome,Internet Explorer,Edge)测试代码。跨不同浏览器测试网站的做法称为自动浏览器测试。要使用Selenium自动化测试执行自动浏览器测试,您应该在单元测试代码或pytest代码中合并对这些浏览器的选择性处理。下面显示了一个代码片段(利用pytest)来处理多个浏览器:03从老漏洞到新漏洞---iMessage 0day(CVE-2016-1843) 挖掘实录文/SuperHei(知道创宇404安全实验室) 2016.4.11 注:文章里“0day”在报告给官方后分配漏洞编号:CVE-2016-1843 一、背景 在前几天老外发布了一个在3月更新里修复的iMessage xss漏洞(CVE-2016-1764)细节 : https://www.bishopfox.com/blog/2016/04/if-you-cant-break-crypto-break-the-client-recovery-of-plaintext-imessage-data/ https05动手练一练,做一个响应式的后台管理面板作为一名前端开发者,我们或多或少都会接触后台管理系统的制作,你是否会亲自纯手工制作做还是从网上找源码改一个呢?今天我们将从零开始纯手工制作一个后台管理面板的首页,通过这个案例你将会学习到如何制作一个响01一些DevTools的小技巧-让你不止会console.log()在开发过程中,你可能会经常用到控制台命令console.log(),但是,其实除了这个命令外,还有一些其他的命令和技巧可供我们使用,让我们看看它们究竟是什么,会不会为你的调试能力带来一点新的启发。05SSM项目总结发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148614.html原文链接:https://javaforall.cn02Larave-vue-crud-laravel-和vue-增删改查看到successfully代表laravel安装成功,如果没有成功请换淘宝镜像重写安装.03Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点在 Web 开发中出于多种原因,我们需要隐藏元素。 例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态:03Django分页器的用法Django中利用orm实现批量插入一般有两种方式:单条插入或者利用bulk_create批量插入01动手练一练,做一个现代化、响应式的后台管理首页大家好,今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板,每个公司的要求都不一样,有的能用就行也丑不丑无所谓,或者用个开源模板凑合下就行啦。如果接到这样后台管理需求,我也是从网上下载改改而已,从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了,交互样式的代码量不亚于业务代码的工作量。00【php增删改查实例】第二十七节 - 个人密码修改当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用bootstrap提供的javascript插件。(modal) 我们就使用这个模态窗口。 模态窗口的代码: 04Django自定义实现分页器思路:浏览器携带页码发送get请求,获取当前页信息。后端从get请求中获取响应的页码数,查询对应数据并返回0210条提高网站可访问性的建议我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。01
由于技术的进步,各行各业的门槛越来越低。 以前别人说会selenium就是会自动化。好像很高大上的样子。现在会selenium估计是基本的。大家都忙着内卷,各种轮子越来越多,自动化的门槛也越来越低。
分页功能是所有网页上都需要提供的功能,当要展示的条目比较多时,就需要进行分页,不但能减小数据库读取数据压力,也有利于用户浏览。 Django为我们提供了一个Paginator分页工具,这个类帮助我们来管理分页数据,该类存放在django/core/paginator.py它可以接收列表、元组或其他可迭代对象。
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
博客的右键菜单,本质上很简单,就是在当前 Html 界面劫持右键单击事件,禁止默认右键弹出,把自己的右键菜单在当前鼠标位置展示出来。
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:
- request/download 新协议 enableHttp2 / enableQuic / enableCache
在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传递。通过学习我们可以发现,在实现路由间的参数传递时,我们将 Vue Router 与我们的组件强耦合在一起,这无疑是不合适的,那么本章我们就来学习,如何实现组件和 Vue Router 之间的解耦。
Accessibility,通常缩写为 A11Y ,这缩写取的是首字母 + 中间字母长度 + 结尾字母,译为 “可访问性”。这是一种让尽可能多的人访问我们所开发的网站的技术概念,通过这个概念,让互联网访问公平变得可能。
翻译:布兰 作者:Adam Argyle 来源:https://web.dev/building-a-sidenav-component/
最近在用VOID主题,不得不说很好看而且开发者也很用心去写这个主题。 但是在用VOID发布版时在Chrome浏览器时会出现点击闪烁,开发者熊猫小A在发布版中解决了这一问题,但是在换用开发版时出现了发布版中没有出现的问题(如下图)
在这个 Spring Security 教程中,我们将学到怎么创建一个自定义登陆页面来实现 Spring Security 基于表单的验证。
于是我又用React Hooks 重写了一版,除CSS的代码总数 120行。 效果如下:
前言 最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语无所谓,最重要是UI/UX上符合要求,技术的事你说了算。",于是我只好乖乖地去学UI/UX设计的事,木有设计师撑腰的前端是苦逼的:(嘈吐一地后,还是挤点时间总结一下WebComponent的内容吧,为以后作培训材料作点准备。 浮在水面上的痛 组件噪音太多了! 在使用Bootstrap的Modal组件时,我们不免要Ctr
在给bootstrap页面form表单中的input搜索框绑定回车事件后,输入完成点击回车搜索,页面会向后台发起两次请求,且会自动取消第一次请求,自动刷新页面导致不是你输入搜索条件查询到的结果,效果图如下
编者按:本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员。
python 的selenium 库可模拟人的行为去操作浏览器, 是web自动化测试工具, 同时也可定制一些特定脚本去模拟人观看视频.
我们在浏览很多网页的时候,由于数据太多,很多时候不能放在一个页面上,此时就需要分页功能。比如我们看到的博客园最下面的分页栏,它是动态的显示的,比如虽然说总页数会是100页,但我们不能把100页都显示出来,始终显示当前页的前5页和后5页,然后还有首页、尾页、上一页、下一页等功能,今天我就来实现这一功能,我们可以把它封装成一个类,以后哪里需要了,直接引用就行了。 一、把分页功能定义成一个类 pagination.py class Pagination(object): def __init_
您可能需要在多种情况下针对不同的浏览器(例如Firefox,Chrome,Internet Explorer,Edge)测试代码。跨不同浏览器测试网站的做法称为自动浏览器测试。要使用Selenium自动化测试执行自动浏览器测试,您应该在单元测试代码或pytest代码中合并对这些浏览器的选择性处理。下面显示了一个代码片段(利用pytest)来处理多个浏览器:
文/SuperHei(知道创宇404安全实验室) 2016.4.11 注:文章里“0day”在报告给官方后分配漏洞编号:CVE-2016-1843 一、背景 在前几天老外发布了一个在3月更新里修复的iMessage xss漏洞(CVE-2016-1764)细节 : https://www.bishopfox.com/blog/2016/04/if-you-cant-break-crypto-break-the-client-recovery-of-plaintext-imessage-data/ https
作为一名前端开发者,我们或多或少都会接触后台管理系统的制作,你是否会亲自纯手工制作做还是从网上找源码改一个呢?今天我们将从零开始纯手工制作一个后台管理面板的首页,通过这个案例你将会学习到如何制作一个响
在开发过程中,你可能会经常用到控制台命令console.log(),但是,其实除了这个命令外,还有一些其他的命令和技巧可供我们使用,让我们看看它们究竟是什么,会不会为你的调试能力带来一点新的启发。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148614.html原文链接:https://javaforall.cn
看到successfully代表laravel安装成功,如果没有成功请换淘宝镜像重写安装.
在 Web 开发中出于多种原因,我们需要隐藏元素。 例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态:
Django中利用orm实现批量插入一般有两种方式:单条插入或者利用bulk_create批量插入
大家好,今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板,每个公司的要求都不一样,有的能用就行也丑不丑无所谓,或者用个开源模板凑合下就行啦。如果接到这样后台管理需求,我也是从网上下载改改而已,从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了,交互样式的代码量不亚于业务代码的工作量。
当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用bootstrap提供的javascript插件。(modal) 我们就使用这个模态窗口。 模态窗口的代码:
思路:浏览器携带页码发送get请求,获取当前页信息。后端从get请求中获取响应的页码数,查询对应数据并返回
我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。
领取专属 10元无门槛券
手把手带您无忧上云