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

前端无障碍开发指南

未定义标签的alt属性,影响辅助技术(Assistive technologies, ATs) 如屏幕阅读器等设备获取图片信息。 3....在了解了无障碍的基本概念后,我们分别从 HTML、开发框架以及 CSS等角度,一起来看看无障碍页面的实现方式吧。...参考上图,ATs 设备完全可以正确地渲染滑动输入框,即便我们没有在HTML 标签上添加 WAI-ARIA 属性。...为表单元素设置原生的校验属性 required、minlength、pattern 等表单的原生校验属性,不但可以满足正常的表单校验需求,也具有更好的无障碍支持 规则 4:注意页面的焦点管理,允许用户仅通过键盘完成交互...规则 6:为 添加 alt 属性,明确链接和按钮的信息 往往一张表情包图片就可以抵千言万语,但对于读屏软件来说,读取 标签的有效信息,只能靠 alt 属性。

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

    【JavaScript】解决 JavaScript 语言报错:Uncaught TypeError: Cannot read property ‘X‘ of undefined

    这个错误通常发生在尝试访问一个未定义或未初始化对象的属性时。...常见场景 访问一个未定义的变量或对象 调用一个函数并试图访问其返回值中的属性,而该返回值是未定义的 操作 DOM 元素时,可能由于元素未正确加载或选择器错误导致无法访问元素属性 了解错误发生的背景和根本原因是解决此类问题的第一步...错误信息指示无法读取该属性。 of undefined: 这是关键部分,表明代码试图访问的对象是未定义的(undefined)。 三、常见原因分析 1....'name' of undefined 此例中,user.profile 是未定义的,因此尝试访问 name 属性会抛出错误。...Uncaught TypeError: Cannot read property 'name' of undefined 函数 getUser 返回未定义的值,访问其 name 属性自然会报错。

    1.8K50

    bootstrapValidator 中文API

    如果没有定义,这些选项将通过以下方式合并:从字段的HTML属性解析的选项调用插件时设置的当前选项 从字段的HTML属性解析的选项 调用插件时设置的当前选项 如果要添加新字段后要执行其他任务,则触发added.field.bv...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法将返回所有字段的所有错误消息 validator 串 验证器的名称如果未定义验证器,则该方法返回所有验证器的错误消息...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator 串 验证器的名称如果未定义验证器,则该方法返回所有字段选项。...option 串 选项名称如果未定义,则该方法返回给定验证器的选项 getSubmitButton getSubmitButton(): jQuery - 返回显示点击的提交按钮的jQuery元素。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素 resetValue 布尔 如果true,该方法将字段值重置为空或删除检查/选择的属性(用于收音机和复选框)。

    13.2K50

    1000多个项目中的十大JavaScript错误以及如何避免

    当你读取一个属性或调用一个未定义对象的方法时,Chrome 中就会报出这样的错误。 [image.png] 导致这个错误发生的原因有很多,常见的一种情况是在渲染 UI 组件时,不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误,这与 Chrome 的上述错误基本相同,只是 Safari 使用不同的错误消息。...这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误,因为读取了未定义长度属性的变量。...我们也无法获取或设置 undefined 的任何属性。在这种情况下,应用程序将抛出“Uncaught TypeError cannot set property of undefined”。

    6.2K30

    JavaScrip最容易犯的十大错误及其避免方法()

    Uncaught TypeError: Cannot read property 如果你是一个javascript开发者,你肯定看到过此错误 读取属性或调用方法的对象的未定义 这可能由于许多原因而发生,...反过来,这意味着ItemList将项目定义为未定义,并且您在控制台中收到错误 - “Uncaught TypeError:无法读取未定义的属性’map’”。 这很容易解决。...对于使用JavaScript命名空间的Web应用程序中的IE,这是一个常见问题。 在这种情况下,99.9%的问题是IE无法将当前命名空间中的方法绑定到this关键字。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时,它总是返回undefined,我们无法获取或设置undefined的任何属性。...在这种情况下,应用程序将抛出“Uncaught TypeError无法设置未定义的属性”。 10.

    18910

    1000多个项目中的十大JavaScript错误以及如何避免

    当你读取一个属性或调用一个未定义对象的方法时,Chrome 中就会报出这样的错误。 ? 导致这个错误发生的原因有很多,常见的一种情况是在渲染 UI 组件时,不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误,这与 Chrome 的上述错误基本相同,只是 Safari 使用不同的错误消息。 ? 3....这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 ?...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生的错误,因为读取了未定义长度属性的变量。 ?...Uncaught TypeError: Cannot Set Property 当尝试访问未定义的变量时,总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。

    8.4K40

    来自1000多个项目的10大JavaScript错误浅析

    在Chrome里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在Chrome开发者控制台可以很容易地重现这个错误。...TypeError: ’undefined’ is not an object 在Safari里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在Safari开发者控制台可以很容易地重现这个错误...TypeError: null is not an object 在Safari里读取空(null)对象的属性或调用空对象的方法时就会发生这个错误,在Safari开发者控制台可以很容易地重现这个错误。...TypeError: Object doesn’t support property 在IE里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在IE开发者控制台可以很容易地重现这个错误。...Uncaught TypeError: Cannot set property 我们无法对undefined变量进行赋值或读取操作,否则的话会抛出“Uncaught TypeError: cannot

    6.2K80

    被迫开始学习Typescript —— vue3的 props 与 interface

    defineProps() 虽然可以单独定义 interface ,而且可以给整体 props 设置类型约束,但是只能在组件内部定义,目前暂时不支持从单独的文件里面读取。...而且不能“扩充”属性。 也就是说,基本无法实现复用。 这个缺点恰恰和我的目的冲突,等待新版本可以解决吧。...似乎应该可以用 interface ,但是看官方文档,好像思考角度不是这样的。 应对方式 先定义组件需要哪些属性的 interface: /** * 表单子控件的共用属性。..., /** * 表单的 model,含义多个属性,any */ model: IPropsValidation, /** * 字段名称,string */ colName.../types/type' /** * 基础控件的共用属性,即表单子控件的基础属性 */ const itemProps: ItemProps = { /** * 字段ID、控件ID

    5K30

    字典服务的设计与管理

    ,将公司名称复制到搜索框中,这样就可以正常命中索引,那么问题也就很清楚了,这种数据"隐身"的情况,即看着是同一个字,但是实际上不是,通常由特殊编码引起的; 通过表单进行数据采集是常用的业务手段,但是如果表单存在多个任意输入的文本框...;常规情况下,在业务表单加载的时候,从字典服务中读取各维度枚举值,在表单提交的时候,校验相关枚举字段,以此提高内容的质量; 在字典服务中提供的枚举值,根本目的是为了确保数据值的统一性,尽可能的避免同一个信息用两种方式描述...,比如编程标签:"JAVA"与"Java",虽然从程序角度可以规避识别,但实际上是可以避免的; 从字典服务常见的内容管理来看,通常包括:常量、状态描述、业务标识;行业、标签、地址、学校等数据码表;其最大的特点就是在系统中被全局复用和识别...; 码表:通常数据具有层次或者级联关系,比如地址和行业中的多级联动; 参数表:即时要求很高,例如字段枚举值的定义,需要动态实时管理; 不管使用那种方式管理字典数据,都需要增强业务语义的描述,这样在业务表单中通过相应标识读取对应枚举选项即可...,还是采用任意输入的方式,都会面对一个无法避开的问题,字段值在业务开发中不断优化,则需要对数据进行清洗,至于数据清洗的流程在之前有详细的总结过,这里不再赘述。

    1.1K50

    前端 50 道面试题与答案邀你轻松拿到Offer

    主要原理: 通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令 防止: 1、使用预编译,绑定变量,避免出现执行拼接字符的情况; 2、过滤特殊字符和语句...表单域要用 fieldset 标签包起来,并用 legend 标签说明表单的用途; 7....当需要设置的样式很多时设置 className 而不是直接操作 style 5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作 6....2. get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。...post 是通过 HTTP post 机制,将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。 3.

    1.6K20

    GenshinPlayerQuery_qeriuwjhrf

    继承类必须实现的静态方法 包 – form QForm 是一种创新的表单封装模式,完美分离了表单的数据、行为和表现。...QForm 的主要特征: 完美分离表单的数据、行为和表现 自定义过滤器 自定义验证规则 可以从配置文件构造表单 完善的错误处理机制 100% 可定制的表单渲染 QForm_Element QForm_Element...Control_Password 密码输入框 Control_Radio 构造一个单选按钮 Control_RadioGroup 构造一组单选按钮 Control_Reset 构造一个表单重置按钮 Control_Static...Q_FileNotFoundException Q_FileNotFoundException 异常指示文件没有找到错误 Q_FileNotReadableException Q_FileNotReadableException 异常指示文件无法读取错误...QDB_ActiveRecord_UndefinedPropException 异常指示未定义的属性 QDB_ActiveRecord_ValidateFailedException QDB_ActiveRecord_ValidateFailedException

    1.4K20

    HTML表单和组件

    表单 基本所有的网页无非就是在做两件事情:1.呈现数据给客户看,2.接收用户输入的数据。所以表单就是用来收集用户输入的数据,然后提交给服务器。 示例图: ?...表单组件介绍 表单组件就是用来让用户输入信息、接收用户输入信息的组件,我们经常会在网页上看到的文本框、按钮、单选框、复选框等等,这些就是所谓的组件。...hidden 隐藏域,隐藏域在网页上是看不到的,只有在代码里看得到,示例: ? 运行结果: ? 以上就是type属性里常用的组件 name属性,当数据提交到服务器时会读取这个属性里的数据。...这个属性还有一个作用,在使用单选框要实现单选时也需要使用这个属性,如果没有加上这个属性的话,就无法实现单选,示例: ? 运行结果: ?...readonly,声明此属性表示此组件只能够读取,不能够进行修改或者输入: ? 运行结果: ?

    2.7K60
    领券