网站入门_网站可访问性入门

最新推荐文章于 2024-05-12 09:39:29 发布

weixin_26751591

最新推荐文章于 2024-05-12 09:39:29 发布

阅读量426

点赞数

文章标签： python php https 大数据

原文链接：https://medium.com/@rachitabansal/getting-started-with-web-accessibility-93a1241dda79

版权

网站入门

Web Accessibility

网络可访问性

Website development can be broken down into smaller features that can be accomplished individually and are indispensable for a full fledged app which can cater to all users. Accessibility is one such chunk and is actually a mammoth in its own. In this article, we’ll explore some tooling and concepts that can help you getting started with basic accessibility of your app.

网站开发可以细分为较小的功能，这些功能可以单独完成，对于可以满足所有用户的完整应用程序而言，这是必不可少的。可访问性就是其中之一，实际上它本身就是一个庞然大物。在本文中，我们将探索一些工具和概念，这些工具和概念可帮助您开始使用应用程序的基本可访问性。

ESLint plugin
ESLint插件

Eslint is a great tool for controlling the code quality during web app development. For accessibility, react-a11y is an awesome eslint plugin which informs the developer of a11y issues during compile time.

Eslint是在Web应用程序开发过程中控制代码质量的出色工具。为了实现可访问性， react-a11y是一个很棒的eslint插件，可在编译时通知开发人员有关a11y的问题。

For e.g <img src="/images/image1.jpg" /> ← eslint will warn the user of missing alt text that’s also read by assistive technology in place of visual image itself.

例如， <img src="/images/image1.jpg" /> ←eslint将警告用户丢失alt文本，该alt文本也由辅助技术代替了可视图像本身进行读取。

It can be installed using npm as below:

可以使用npm安装，如下所示：

npm i eslint-plugin-jsx-a11y — save-dev

We need to then extend it to our eslint configuration file by adding the following code:

然后，我们需要通过添加以下代码将其扩展到我们的eslint配置文件：

.eslintrc:

.eslintrc：

{ 
  extends: [
    “plugins:jsx-a11y/recommended”
  ],
  plugins: [
    “jsx-a11y”
  ]
}

And that’s it! Now, you’ll see some warnings in your code editor if you’re using VSCode and have installed the eslint extension or after running the lint command from command line.

就是这样！现在，如果您使用的是VSCode并已安装eslint扩展名，或者在命令行中运行lint命令后，将在代码编辑器中看到一些警告。

2. React axe

2.React斧

React axe is another great tool that can be installed via npm. With very minimal configuration to be added at the top level of the app, it shows compile time a11y problems in dev-tools e.g color contrast issues etc. along with the severity levels.

React ax是可以通过npm安装的另一个很棒的工具。在应用程序的顶层添加了非常少的配置，它显示了开发工具中的编译时所有问题，例如颜色对比问题等，以及严重性级别。

Installation:

安装：

npm i — save-dev react-axe

Needs to be initialized at the top level of the app like so:

需要在应用程序的顶层进行初始化，如下所示：

if(process.env.NODE_ENV === "development") {
  const axe = import(() => "react-axe");
  axe(React, ReactDOM, 1000)
}

Pros and cons:

利弊：

Works best with Chrome.
与Chrome搭配使用效果最佳。
De-dupes findings.
重复数据删除结果。
See errors with severity levels in dev-tools.
在开发工具中查看严重性级别错误。
Can be configured by adding own config. that takes rules which is an array of objects. This is useful when you want to set custom rules accessibility for your app. For e.g.
可以通过添加自己的配置进行配置。它采用的规则是对象数组。当您要为应用程序设置自定义规则可访问性时，此功能很有用。例如

const config = {
  rules: [{
    id: "radio group"
    enabled: true
  }]
}if(process.env.NODE_ENV === "development") {
  const axe = import(() => "react-axe");
  axe(React, ReactDOM, 1000, config)
}

Read more about the configuration object API here: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure

在此处阅读有关配置对象API的更多信息： https : //github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure

3. Axe browser extension for Chrome / Addon for Firefox

3.适用于Chrome的斧头浏览器扩展/适用于Firefox的插件

Add the React axe web extension to Chrome and you’ll see a new tab in dev-tools that’s available called axe and any page can be analyzed for accessibility issues in Chrome browser here. Try this out, it’s very interesting!

将React ax Web扩展添加到Chrome，您将在dev-tools中看到一个名为ax的新标签，可以在此处浏览任何页面以了解Chrome浏览器中的可访问性问题。试试看，这很有趣！

4. Tota11y from Khan academy — browser extension

4.汗学院的Tota11y-浏览器扩展

Enables different plugins with the Chrome browser extension that can be run on a page to provide a11y issues and also prompts about the possible code to fix those issues. It’s also available as an add-on in Firefox.

使用可在页面上运行的Chrome浏览器扩展程序启用不同的插件，以提供所有问题，并提示有关解决这些问题的可能代码。它也可以作为Firefox中的附件使用。

5. High contrast — web extension

5.高对比度-网络扩展

This Chrome extension enables color themes and provides color usage clarity in different modes. Download it here.

此Chrome扩展程序启用了颜色主题，并在不同模式下提供了清晰的颜色用法。在这里下载。

6. VoiceOver training in MacOS

6. MacOS中的VoiceOver培训

Before getting started to test with SRs, VO training is a great material to be able to understand how the assistive technology should behave when reading different elements. Goto Settings → Accessibility → VoiceOver → Start the training!

在开始使用SR进行测试之前，VO培训是一本很好的材料，能够理解阅读不同元素时辅助技术应如何表现。转到设置→辅助功能→VoiceOver→开始训练！

Some tips:

一些技巧：

To enable VoiceOver in Mac press cmd + f5
要在Mac中启用VoiceOver，请按cmd + f5
To move through the web page and get into the web page use ctrl + option keys.
要浏览网页并进入网页，请使用ctrl + option键。
To bypass verbosity of the VO use ctrl key
要绕过VO的详细程度，请使用ctrl键

7. Landmark regions

7.具有里程碑意义的地区

Landmark regions define the main areas of the app e.g main, navigation, headers and footers which are given specific roles in Aria.

地标区域定义了应用程序的主要区域，例如main，导航，页眉和页脚，这些区域在Aria中具有特定的角色。

We can define the app to contain these elements with these roles for e.g.

我们可以定义应用程序以包含具有这些角色的这些元素，例如

<div role="main">
  <div role="navigation">
    Back
  </div>
  <div role="contentinfo">
    Footer
  </div>
</div>

These landmarks can replaced with HTML5 sectioning elements for e.g. header, nav, footer and main which implicitly have the same aria roles as the elements above.

这些地标可以替换为HTML5分段元素，例如，header，nav，footer和main，它们隐式具有与上述元素相同的aria角色。

// Same as above code. 
// Converted to html5 elements.
<main>
  <nav>
    Back 
  </nav>
  <footer>
    Footer
  </footer>
</main>

8. Adding Aria-label attributes

8.添加Aria标签属性

Sometime the labels of the elements are not very clear to the user when using VO like a button with only image. In that case we should explicitly add a property to the element called aria-label — a label that can be read by assistive technology as the label text for that element.

有时，当使用VO(例如仅带有图像的按钮)时，元素的标签对用户来说不是很清楚。在这种情况下，我们应该为元素显式添加一个名为aria-label的属性，该属性可以被辅助技术读取为该元素的标签文本。

The aria-label property is useful when there is no visible text content that will serve as an appropriate accessible name.

当没有可见的文本内容作为适当的可访问名称时， aria-label属性将非常有用。

Note: When aria-label is applied to elements that are given a role that supports naming from the string value in child elements for e.g. <button>close</button>, the descendent content is hidden from the SR and replaced by the aria-label attribute. For all other elements, both the descendent content as well as aria-label is read. For e.g. the SR will read only “change theme” for the button element shown below.

注意：将aria-label应用于具有支持从子元素中的字符串值命名的角色的元素时，例如<button>close</button> ，后代内容对SR隐藏，并由aria-label属性。对于所有其他元素，将读取后代内容以及aria-label 。例如，SR将仅显示如下所示的按钮元素的“更改主题”。

<button aria-label="Change Theme" class="simple-button">
  light
</button>

9. Adding more accessible and contextual labels

9.添加更多可访问的上下文标签

aria-labelledby is a property used to group elements by taking in a list of ids separated by space.

aria-labelledby是一种属性，用于通过获取以空格分隔的ID列表来对元素进行分组。

This is useful where the sentence is formed of two elements but seems to be making more sense contextually when read together using assistive technology. For e.g.

这在句子由两个元素组成的情况下很有用，但是当使用辅助技术一起阅读时，在上下文上似乎更有意义。例如

<p>You don’t have any movies in your wishlist</p>
<link>Add some!</link> // is read separately as 2 sentences by SR

Can be re-written as:

可以重写为：

// Read as a single sentence.
<div aria-labelledby="id-no-movies id-link">
  <span id=“id-no-movies”>
    You don’t have any movies in your wishlist
  </span>
  <link id=“id-link”>
    Add some!
  </link>
</div>

aria-labelledby has the highest precedence when browser calculates accessible names which means it overrides names from attributes like aria-label. It also incorporates hidden attributes or elements which have a CSS property of {display: none;}.

aria-labelledby在浏览器计算可访问名称时具有最高优先级，这意味着它会覆盖aria-label类的属性中的名称。它还包含CSS属性为{display: none;}隐藏属性或元素。

<span id="id-night-mode" hidden>Night mode</span>
<input aria-labelledby="id-night-mode" type="checkbox" role="switch" />

10. aria-describedby label text

10. 标签 aria-describedby 文字

aria-describedby can be used as similar to aria-labelledby. This property references the elements that describe an element as one single element.

aria-describedby可以类似于aria-labelledby 。此属性引用将一个元素描述为一个元素的元素。

For e.g. error text or validation text in a form field. When the VO reads the form input field, the error text and validation text is read with it as given below.

例如，表单字段中的错误文本或验证文本。当VO读取表单输入字段时，将如下所示读取错误文本和验证文本。

const helperId = helperText ? `{name}-helper` : "";
const errorId = errorText && !isValid ? `{name}-error`: "";return (
  <div>
    <input
      id="username-id"
      name="username"
      aria-describedby={`${helperId} ${errorId}`}
    />
    {errorText &&
      <div id={errorId}>
        {errorText}
      </div>
    }
    {helperText &&
      <div id={helperId}>
        {helperText}
      </div> 
    }
  </div>
);

11. Alternative text for images

11.图片的替代文字

Images need a meaningful text to read through the assistive technology. If an alternative text is not present, the VO just reads the filename of the image which can be less descriptive and provides less context.

图像需要有意义的文本才能阅读辅助技术。如果不存在替代文本，则VO只会读取图像的文件名，而文件名的描述性较低，提供的上下文也较少。

In some cases, images don’t provide an additional context than the text and are really just decorative in nature. For those scenarios, we may want the images to not be read by assistive technology.

在某些情况下，图像不提供文本以外的其他上下文，实际上本质上只是装饰性的。对于这些情况，我们可能希望辅助技术不读取图像。

This can be achieved by passing the alternate text prop with a blank string. This would let the screen reader not announce the images while reading though the text.

这可以通过将备用文本prop与空白字符串一起传递来实现。这将使屏幕阅读器在阅读文本时不会宣布图像。

// this image is not announced by the screen reader.
<img src=“/images/gladiator” alt="" />

12. Color contrast ratios

12.色彩对比度

Chrome dev tools color picker tells the contrast ratio when inspecting an element.

Chrome开发人员工具的颜色选择器会在检查元素时告知对比度。

Usually both standards AA and AAA ratios of the WCAG standards need to be met, if AA is met but AAA doesn’t meet then the background needs to be updated and visa versa. At a minimum, color contrast ratio of the foreground to background must be 4.5:1.

通常，必须同时满足WCAG标准的标准AA和AAA比率，如果满足AA但不满足AAA，则需要更新背景，反之亦然。前景与背景的颜色对比度至少必须为4.5：1 。

Level access accessibility browser extension for Chrome provides useful suggestions on the background and foreground color combination which can help achieve both AA and AAA standards.

Chrome的级别访问可访问性浏览器扩展针对背景和前景色的组合提供了有用的建议，可以帮助达到AA和AAA标准。

Another website for testing color contrast — https://color.review/

另一个测试色彩对比度的网站-https: //color.review/

13. Live regions and aria-live attribute

13.生活区域和 aria-live 属性

There are four types of live-regions: aria-live, aria-relevant, aria-atomic, and aria-busy . Live regions dynamically get updated on the changes made to the element even if the focus is not on that element for e.g. error updates from AJAX request, live score updates of baseball match etc.

有四种类型的活动区域： aria-live ，与aria-relevant ， aria-atomic和aria-busy 。实时区域会动态更新对元素所做的更改，即使焦点不在该元素上，例如来自AJAX请求的错误更新，棒球比赛的实时比分更新等。

aria-live attribute notifies assistive technologies to announce the changes made on the element when the focus is not on that element.

aria-live属性通知辅助技术，以在焦点不在该元素上时宣布对该元素所做的更改。

It has 3 values, “off”, “polite” and “assertive” . The politeness levels differ from each other in the order of updates. SR completes what it’s reading and then announce the changes when “polite” is used and interrupts whatever the SR is reading to announce the change when using “assertive”.

它具有3个值， “off” ， “polite”和“assertive” 。礼貌级别在更新顺序上彼此不同。 SR完成其读取的内容，然后在使用“polite”时宣布更改，并在使用“assertive”时中断SR正在读取的任何内容以宣布更改。

By default aria-live attribute value is assertive.

默认情况下， aria-live属性值是assertive 。

<div>
  {errorText &&
    <span
     id={errorId}
     aria-live=“polite”
     aria-atomic=“true”
    >
      {errorText}
    </span>
  }
</div>

aria-live is accompanied by two other attributes — aria-atomic and aria-relavant.

aria-live具有其他两个属性aria-atomic和aria-relavant 。

aria-atomic ensures that the element is read as a whole even if the changes are done to a part of the element. By default its value is true.

aria-atomic确保即使对元素的一部分进行了更改，也可以整体读取元素。默认情况下，其值为true 。

aria-relevant decides when to announce aria-live region updates. It can take multiple space delimited string values of“additions”, “text” or “removals” otherwise it can also be “off” .

aria-relevant决定何时宣布咏叹调生活区域更新。它可以采用多个以空格分隔的字符串值，例如“additions” ， “text”或“removals”否则也可以为“off” 。

By default aria-relevant has value “additions text” which means announce the changes if there are any new DOM node additions or text updates.

默认情况下，与aria-relevant值是“additions text” ，这意味着如果有任何新的DOM节点添加或文本更新，则宣布更改。

Note: The aria-live regions must always be present in the DOM before they are announced otherwise they don’t always work for all assistive technologies.

注意： aria-live区域必须在声明之前始终存在于DOM中，否则它们并不总是适用于所有辅助技术。

If the element is added dynamically or the aria-live attribute is added dynamically then, there is a chance that they may not be announced.

如果动态添加元素或动态添加aria-live属性，则有可能无法宣布它们。

<div>
  <FormInput
    errorText=“Please provide a password”
  />
</div>
...<div>
  {errorText &&
    <span
      id={errorId}
      aria-live=“polite”
      aria-atomic=“true”
    >
      {!isValid ? errorText: “”} // Don’t wanna display error message if not present.
    </span>
  }
</div>

14. Focus on navigation

14.专注于导航

If using React and hooks useRef hook can be used to associate an element and bring focus on it when navigated to it. For example a simple navigation list sets focus to the selected nav item is shown as below:

如果使用React和hooks，则useRef hook可用于关联元素并在导航至该元素时将焦点放在该元素上。例如，一个简单的导航列表将焦点设置到所选导航项目，如下所示：

useEffect(() => {
  if (activeRef.current) {
    activeRef.current.focus();
  }
}, []);<nav aria-label="Main menu">
  <ul>
    {items.map((item, index) => (
      <li key={`nav-link-${item.to}-${index}`}>
        <Link
          to={item.to}
          title={item.title}
          ref={window.location.pathname === item.to ? activeRef : undefined}
        >
          {item.title}
        </Link>
      </li>
  </ul>
</nav>

Tips:

提示：

Current focus on the page can be found directly by using document.activeElement in dev-tools.
当前在页面上的焦点可以通过使用dev-tools中的document.activeElement直接找到。

15. Hiding semantics with Presentation roles

15.使用Presentation角色隐藏语义

Sometimes we want to hide elements from being read by the assistive technologies because it may be not convey semantic meaning of the content. To accomplish this, roles called “presentation” or “none” are used. For e.g. a tablist built using ul & li elements where the li elements are only presentational while the a inside each li is focusable as shown below:

有时我们希望隐藏辅助技术无法读取的元素，因为它可能无法传达内容的语义。为此，使用了称为“presentation”或“none”角色。例如，使用ul ＆ li元素构建的标签列表，其中li元素仅是表示性的，而每个li内部的a是可聚焦的，如下所示：

<ul role="tablist">   
  <li role="presentation">     
    <a role="tab" href="#">Tab 1</a>   
  </li>   
  <li role="presentation">     
    <a role="tab" href="#">Tab 2</a>   
  </li>   
  <li role="presentation">     
    <a role="tab" href="#">Tab 3</a>   
  </li> 
</ul>

Tips:

提示：

Browsers can ignore this role if the element is focusable or has a tabindex attribute.
如果元素是可聚焦的或具有tabindex属性，则浏览器可以忽略此角色。
If this role is applied to an element which doesn’t have a condition that the browser can ignore it, any ARIA properties and states associated with that element are hidden from assistive technology.
如果将此角色应用于不具有浏览器可以忽略它的条件的元素，则与该元素相关联的任何ARIA属性和状态都将从辅助技术中隐藏。
The roles, states and properties of the descendant elements remain visible to the assistive technologies unless the descendant context requires the presentation role. e.g in case of ul/ol, li inherits the presentation role while the nested elements inside li are still accessible.
除非后代上下文需要表示角色，否则后代元素的角色，状态和属性对辅助技术仍然可见。例如，对于ul/ol ， li继承表示角色，而li内部的嵌套元素仍然可以访问。

References/Resources:

参考资料/资源：

https://a11y-style-guide.com/style-guide/section-structure.html https://www.w3.org/TR/wai-aria-practices-1.1/https://egghead.io/courses/develop-accessible-web-apps-with-react

https://a11y-style-guide.com/style-guide/section-structure.html https://www.w3.org/TR/wai-aria-practices-1.1/ https://egghead.io/courses / develop-accessible-web-appswithreact

翻译自: https://medium.com/@rachitabansal/getting-started-with-web-accessibility-93a1241dda79

网站入门

weixin_26751591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站入门_网站可访问性入门

网站入门Web Accessibility 网络可访问性 Website development can be broken down into smaller features that can be accomplished individually and are indispensable for a full fledged app which can cater to all use...
复制链接

扫一扫