101-advanced-React易用性,概述
React完全支持构建可访问的网站,通常使用标准的HTML技术。
1、可访问小部件
ARIA文档包含用于构建完全可访问的JavaScript小部件的技术。
JSX完全支持所有aria- * HTML属性。尽管React中的大多数DOM属性和属性都是camelCased的,但这些属性应该是小写的:
<input
type="text"
aria-label={labelText}
aria-required="true"
onChange={onchangeHandler}
value={inputValue}
name="name"
/>
2、html语义
语义HTML是Web应用程序可访问性的基础。使用各种HTML元素来加强我们网站中信息的含义通常会使我们免费获得可访问性。
有时我们在向我们的JSX添加<div>元素以使我们的React代码正常工作时,特别是在处理列表(<ol>,<ul>和<dl>)和HTML <table>时,会破坏HTML语义。在这些情况下,我们应该使用React Fragments将多个元素组合在一起。
当使用一个key prop 时可以使用<Fragment>
import React, { Fragment } from 'react'; function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Without the `key`, React will fire a key warning
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
))}
</dl>
);
}
也可以在任何地方使用<></>
function ListItem({ item }) {
return (
<>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</>
);
}
3、label for
<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>
的
101-advanced-React易用性,概述的更多相关文章
- React框架概述
一.React框架概述 官网:https://reactjs.org/ 最新版V16.10 中文网:https://zh-hans.reactjs.org/ 中文社区网:https://r ...
- React——相关工具概述
Create a New React App Use an integrated toolchain for the best user and developer experience. This ...
- React之概述(待续)
原文链接 MDN上有关JavaScript的内容 箭头函数, 类, 模板字符串, let, const Babel REPL
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React之key详解
一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...
- React JS和React-Native学习指南
自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...
- 【优质】React的学习资源
React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- React Native资料汇总
React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...
- 成为高级 React 开发你需要知道的知识点
简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点. 使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只 ...
随机推荐
- Python学习笔记(一)——基本知识点
主要记录学习Python的历程和用于复习.查阅之用. 知识点: 数据类型(列表.元组.字典.集合) 帮助文档 函数(默认参数.可变参数.关键字参数.参数组合) 数据类型: 列表:list ...
- Ubuntu 12.04.2 安装 Oracle11gR2
#step 1: groupadd -g 2000 dbauseradd -g 2000 -m -s /bin/bash -u 2000 griduseradd -g 2000 -m -s /bin/ ...
- 如何在浏览器控制台(console)里输出彩色样式调试信息
console.log(XX,XX,XX) log 的第一个参数声明第二.第三个参数的作用,第二个参数就是样式,第三个参数是要输出的字符串 console.log("%c%s", ...
- Extjs学习笔记--(四,基本函数介绍)
Ext是Extjs的命名空间,为Extjs框架提供唯一的全局变量 这样做可以避免冲突,便于代码维护 1,apply和applyif方法 apply=function(object, config, d ...
- Android 5.0 API新增和改进
开始开发 要构建 Android 5.0 版应用,您必须先下载 Android SDK,然后使用 SDK 管理器下载 Android 5.0 SDK 平台和系统映像. 更新您的目标 API 级别 要进 ...
- C++11新特性之五——可变参数模板
有些时候,我们定义一个函数,可能这个函数需要支持可变长参数,也就是说调用者可以传入任意个数的参数.比如C函数printf(). 我们可以这么调用. printf(); 那么这个函数是怎么实现的呢?其实 ...
- 微信小程序实现文字跑马灯
wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...
- Set集合遍历方式
for(String str : set) { System.out.println(str); } for (Iterator iter = set.iterator(); iter.hasNext ...
- iOS设计模式之类族(class cluster)
类族模式在UIKit(user interface framework)使用的范围已经远远超过我们的想象,比如,UIButton,NSArray,NSString,NSNumber等, 例如NSNum ...
- poj_1182 并查集
题目大意 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B,B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人 ...