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易用性,概述的更多相关文章

  1. React框架概述

    一.React框架概述 官网:https://reactjs.org/       最新版V16.10 中文网:https://zh-hans.reactjs.org/ 中文社区网:https://r ...

  2. React——相关工具概述

    Create a New React App Use an integrated toolchain for the best user and developer experience. This ...

  3. React之概述(待续)

    原文链接 MDN上有关JavaScript的内容 箭头函数, 类, 模板字符串, let, const Babel REPL

  4. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  5. React之key详解

    一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...

  6. React JS和React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...

  7. 【优质】React的学习资源

    React的学习资源 github 地址: https://github.com/LeuisKen/react-collection https://github.com/reactnativecn/ ...

  8. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  9. React Native资料汇总

    React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...

  10. 成为高级 React 开发你需要知道的知识点

    简评:除了常见的 HOC 和 RenderProp 技巧,作者介绍了 7 个有用的知识点. 使用 Fragment 而不是 div 很多时候我们想要处理多个 component,但是 render 只 ...

随机推荐

  1. Python学习笔记(一)——基本知识点

    主要记录学习Python的历程和用于复习.查阅之用. 知识点: 数据类型(列表.元组.字典.集合) 帮助文档 函数(默认参数.可变参数.关键字参数.参数组合) 数据类型: 列表:list       ...

  2. 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/ ...

  3. 如何在浏览器控制台(console)里输出彩色样式调试信息

    console.log(XX,XX,XX) log 的第一个参数声明第二.第三个参数的作用,第二个参数就是样式,第三个参数是要输出的字符串 console.log("%c%s", ...

  4. Extjs学习笔记--(四,基本函数介绍)

    Ext是Extjs的命名空间,为Extjs框架提供唯一的全局变量 这样做可以避免冲突,便于代码维护 1,apply和applyif方法 apply=function(object, config, d ...

  5. Android 5.0 API新增和改进

    开始开发 要构建 Android 5.0 版应用,您必须先下载 Android SDK,然后使用 SDK 管理器下载 Android 5.0 SDK 平台和系统映像. 更新您的目标 API 级别 要进 ...

  6. C++11新特性之五——可变参数模板

    有些时候,我们定义一个函数,可能这个函数需要支持可变长参数,也就是说调用者可以传入任意个数的参数.比如C函数printf(). 我们可以这么调用. printf(); 那么这个函数是怎么实现的呢?其实 ...

  7. 微信小程序实现文字跑马灯

    wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...

  8. Set集合遍历方式

    for(String str : set) { System.out.println(str); } for (Iterator iter = set.iterator(); iter.hasNext ...

  9. iOS设计模式之类族(class cluster)

    类族模式在UIKit(user interface framework)使用的范围已经远远超过我们的想象,比如,UIButton,NSArray,NSString,NSNumber等, 例如NSNum ...

  10. poj_1182 并查集

    题目大意 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B,B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人 ...