Front End Accessibility Development Guide

Header

  • Carefully write heading(h1,h2,h3) for screen reader.

Alternative Image

  • Provide alt text for both essential and functional images.
  • Provide empty alt text (alt=””) for decorative images.
  • Don’t repeat the alt text of an image in the adjacent text.
  • Define decorative image as CSS background images.
  • CSS be used instead of spacer images.

Labeling Form Elements

  • Must ensure the forms can be navigated and completed using keyboard.
  • Ensure “for” and “id” attributes are associated in the label and form element.

  • Use a fieldset to group several associated form elements such as checkboxes and radio buttons. Legend text should be visible and concise.

Use html buttons, input or button element for

  • submitting a form
  • Opening model dialogs
  • Dynamic page updates



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/570550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详细的Windows下安装 binwalk

1. https://github.com/ReFirmLabs/binwalk到这里下载binwalk,下载后解压。 2. 找到下载后的文件夹, 在这里要进行安装步骤,一边按着shift,一边按着鼠标右键,点击在此处打开命令窗口。 输入python setup.py install 安…

各大浏览器清除缓存(cache)详细步骤

1. Firefox 1.1 选择“Options”: 1.2 选择“Advanced”->“Network”->“Cached Web Content”,点击“Clear Now”: 2. Chrome 2.1 选择“Settings”: 2.2 点击页面底部“Show advanced settings”: 2.3 选择…

python部分 + 数据库 + 网络编程

PS:附上我的博客地址,答案中略的部分我的博客都有,直接原标题搜索即可。https://www.cnblogs.com/Roc-Atlantis/第一部分 Python基础篇(80题)为什么学习Python?Omit通过什么途径学习的Python?OmitPython和J…

使用 angular directive 和 json 数据的 D3 带标签 donut chart示例

利用angular resource加载priorityData.json中的json数据,结合D3画出甜甜圈图。运行index.html结果如图所示: priorityData.json中json数据如下: { "priority":{ "Blocker":12,"Critical":18,"Major&qu…

第一个express app 详细步骤

1. 全局安装node.js(请参考网上教程)。 如何判断是否全局安装成功?打开命令行终端,进入任意文件夹,输入node,不报错。 2. 安装express 2.1 创建app文件夹。并在此文件夹下创建文件package.json如下&#…

【scarletthln 关于算法的一点总结】

1. 分解问题的角度: fix 某一维度,尝试另一维度上的所有可能 a. 可能是array的(i, j)pointers, b. 可能是矩形的长与宽, c. 可能是tree的每一个subtree, d. 可能是情景题的每一对pair...2. 求所有解的, 暴力上backtracking吧3. 如果问最短/最少的, 先想BFS、DP这对…

Angularjs Nodejs Grunt 一个例子

做了一个简单的示例,目的是记录环境配置以及这套框架的结构流程。 1.配置环境 默认nodejs已安装。 安装以下模块:express(nodejs框架),grunt(javascript task runner),grunt-contrib-watch(g…

【C#/WPF】用Thumb做可拖拽的UI控件

【C#/WPF】用Thumb做可拖拽的UI控件 原文:【C#/WPF】用Thumb做可拖拽的UI控件需求&#xff1a;简单的可拖拽的图片 使用System.Windows.Controls.Primitives.Thumb类 前台&#xff1a; <Canvas x:Name"g"><Thumb Canvas.Left"10" Canvas.Top"…

PHP 常用设计模式 (转载)

1.单例模式 单例模式顾名思义&#xff0c;就是只有一个实例。作为对象的创建模式&#xff0c; 单例模式确保某一个类只有一个实例&#xff0c;而且自行实例化并向整个系统提供这个实例。 单例模式的要点有三个&#xff1a; 一是某个类只能有一个实例&#xff1b;二是它必须自行…

Angularjs切换网站配色模式简单示例1(切换css文件)

一个网站可以有多种配色方案&#xff0c;例如正常模式&#xff0c;夜间模式等。 简单示例一个通过点击按钮&#xff0c;更换css文件&#xff0c;达到切换配色模式的angularjs 小app。 主要文件有三个&#xff1a;index.html&#xff08;主文件&#xff09;&#xff0c;white.…

【转】在树莓派上实现人脸识别

教程参考地址&#xff1a;http://shumeipai.nxez.com/2018/08/12/facial-recognition-identification-on-raspberry-pi.html 转载于:https://www.cnblogs.com/little-kwy/p/9481259.html

Angularjs切换网站配色模式简单示例2(切换body元素的class)

一个网站可以有多种配色方案&#xff0c;例如正常模式&#xff0c;夜间模式等。 简单示例一个通过点击toggle 按钮&#xff0c;切换body元素的class&#xff0c;达到切换配色模式的angularjs小app。 1. Live范例可以在以下Codepen网址查看&#xff1a; http://codepen.io/Chris…

Eclipse中Maven项目出现红色感叹号问题

在Eclipse环境下&#xff0c;有时我们会遇到Maven项目出现红色感叹号的情形&#xff0c;而一旦项目出现感叹号&#xff0c;Eclipse便无法帮我们进行自动编译等工作&#xff0c;尽管有时候不会影响运行&#xff0c;但每次只能手动启动Maven重新编译&#xff0c;非常不便&#xf…

GitHub 配置及简单使用

一. 初始化 1. 初始化 git 目录 终端中进入到项目文件夹&#xff0c;然后输入以下命令。 git init 命令执行后&#xff0c;文件夹中会多一个.git 文件夹 2. 设置本机关联 GItHub 的用户名和邮箱 git config --global user.name "<username>" git conf…

斐波那契数列 (C#)

斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列、因数学家列昂纳多斐波那契&#xff08;Leonardoda Fibonacci&#xff09;以兔子繁殖为例子而引入&#xff0c;故又称为“兔子数列”&#xff0c;指的是这样一个数列&#xff1a;1、1、2、…

Javascript 处理 JSON 数据 示例

最近做了一个 MEAN stack 的 app 。后台用 NodeJS 从 Jira rest api 获得JSON数据并做处理&#xff0c;然后前端用 AngularJS Ajax call 获得处理后的 JSON 数据&#xff0c;显示到 App 上。处理了很多 JSON 数据&#xff0c;决定编一个例子&#xff0c;写一个总结。 JSON 数据…

ansible常用命令

一、ansible常用命令 一、ansible命令的常用参数 ansible 默认提供了很多模块来供我们使用。在 Linux 中&#xff0c;我们可以通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块&#xff0c;通过 ansible-doc -s 模块名 又可以查看该模块有哪些参数可以使用。 1、…

2018.08.16 洛谷P2029 跳舞(线性dp)

传送门 简单的线性dpdp。 直接推一推就行了。 貌似三个状态会卡空间啊。。。 笔者分了两个阶段考虑状态转移。 代码&#xff1a; #include<bits/stdc.h> #define N 5001 #define inf 0x3f3f3f3f using namespace std; char xxx; int n,t,f[N][N],s[N],b[N],ans0; ch…

第一个 Rails App 从安装到创建(windows版本)

1. 在以下网址下载并运行 Rails 安装包&#xff1a; 点击打开链接 2. 检查 ruby&#xff0c;sqlite 和 rails 是否安装成功 2.1 查看 ruby 版本&#xff0c; 在命令行中输入&#xff1a; ruby -v 运行截图如下&#xff1a; 2.2 查看 sqlite 版本&#xff0c;在命令行中输入&…

Ruby Variable Scope 简单讲解

Name Begins WithVariable Scope$A global variableAn instance variable[a-z] or _A local variable[A-Z]A constantA class variable 以一个简单例子示例各种变量的区别&#xff1a;class Female# ConstantSEX female# Class variable: shared among all instances of this …