Drupal编辑

Editoria11y ("editorial accessibility") is a user-friendly web accessibility tool that addresses three critical needs for content authors:

  1. 它运行 自动. As spellcheck does, Editoria11y works so well because it is 总是 running; whenever Drupal content editors are authenticated, 编辑11y是活跃的, 所以没有必要 记得运行它!
  2. 它运行 在上下文中. Drupal uses views, Layout Builder, 媒体, and other modules to assemble a complex page. Editora11y can interact with all of these modules 在上下文中 and check for web accessibility issues 自动.
  3. 它集中 专门 on content issues: Drupal content editors can only affect the content of their webpage and not the website template. The Editoria11y tool only focuses on those things you can change.

Editoria11y is already available to all employees who are Drupal content editors. Once you have authenticated and are on a webpage for which you have access as a content editor, Editoria11y is present and checks for accessibility issues 自动. Note that Editoria11y does not check while you are editing a page. 然而, when looking at a page you have content editor access to, Editoria11y will alert you to accessibility barriers and suggest items requiring manual verification. The alerts are provided within the context of the webpage for ease of use. Editoria11y runs through accessibility issues in the same manner that a spell checker runs through a document. This functionality means that content editors easily comprehend information on the fly as they edit their web pages.

使用编辑器:显示切换按钮 

Drupal内容编辑器登录时, the "show" toggle button is present at the bottom of the page (remember that Editora11y does not check while you are actively editing a page.) The toggle button has three states based on the page's accessibility status:

  1. No issues (blue with human icon): there are no 自动-detected issues found by Editoria11y.
  2. Manual review needed (gold with a question mark): these are warnings that require you to check items such as video, 文档, 等.手动,. If your manual check requires it, correct the errors.
  3. Errors detected (red with an exclamation point): these are issues Editoria11y found 自动 and are errors that create barriers to content; you should correct these errors right away.
Editoria11y Toggle State: no issues, manual check, and errors found.

使用面板

A panel area appears when activating the show button and can flag issues on the page, 这样编辑就知道在哪里进行修改. The panel also includes a "show tags" control that reveals heading structure and alt text to make things easier. These lists can be toggled with the "content outline" and "media" buttons near the beginning of the widget.

Clicking "Show tags" on the control panel visualizes 图像的替代文本 (“alt”)和 文档大纲.

加州大学洛杉矶分校 webpage showing the Editoria11y Outline panel at right of page

发行类型和检查

 

当按钮被点击时, 编辑器的控制面板打开, and elements with issues are given tooltips explaining what actions are needed. If the site admins choose (via the module configuration page), this can happen 自动 whenever new issues are detected:

 

Editoria11y Control Panel showing errors for alt-text

 

 

快速检查中标记的问题

  • 标题
    • 跳过的标题关卡
    • 空的标题
    • 很长的标题
    • Suspiciously Short Blockqutes that may actually be headings
  • 图像的替代文本
    • 没有alt元素的图像
    • Images with an empty alt element (flagged for manual review)
    • 以文件名作为alt文本的图像
    • 带有很长的alt文本的图像
    • Alt text that contains redundant text like "image of" or "photo of"
    • Embedded visualizations that usually require a text alternative 
  • 有意义的链接
    • 不带文本的链接
    • 以文件名命名的链接
    • Links only titled with only generic text: "this link," "click here," "learn more," "download," 等.
    • Links that open in a new window without an external link icon
    • Images in links with alt text that appears to be describing the image instead of the link destination
  • 表
    • 表 without headers and tables with document headers ("Headers 3") instead of table headers ()
    • 空的表格单元格
    • 用于布局的表格
  • 一般内容质量保证
    • Lists made from asterisks, numbers, and letters rather than list elements
    • 避免大量的大写锁定文本
    • pdf和其他文档的链接, reminding the user to test the download for accessibility or provide an alternate, 可访问的格式.

我无法核实的事情

有些事情需要老式的校对. Common content issues that require manual review:

  • 避免使用图片或文字. They scale poorly for mobile devices and screen magnifiers.
  • 颜色对比 needs to be strong enough for low vision or colorblindness users. Avoid using color alone to give meaning, especially in charts and graphs.
  • Do not use sensory characteristics that disappear when layout or color perception changes. 例如, the sentence "the items in the right-hand column are required" won't make sense to a user hearing it read. It also loses meaning when the page becomes a single column on a mobile device.
  • If your site does not use Google Translate, identify languages other than English. Screen readers need to know the language to work properly. 例如, with a language tag, a screen reader pronounces "Español" as "A Spaniel."

编辑演示

编辑器将看到的可点击演示.