Accessibility Handbook

最新推荐文章于 2024-05-22 10:09:45 发布

Joyce的前端日常

最新推荐文章于 2024-05-22 10:09:45 发布

阅读量869

点赞数

本文链接：https://blog.csdn.net/joyce_lcy/article/details/106812982

版权

本文档详述了前端、后端、内容编辑者和质量保证在实现网站可访问性方面的职责，包括语言设定、页面标题、地标使用、跳转链接、面包屑导航等24个检查点。前端需要确保正确使用HTML和属性，并提示后端动态内容需求；后端负责替换占位符并提供内容管理系统支持；内容编辑者需确保无障碍内容的完整性；质量保证则需全面测试并确保代码中没有遗留占位符。

摘要由CSDN通过智能技术生成

文章目录

By Joyce, Frank and Shirley

1. Overall duty of all parties (for details please refer to the checklist)

1.1 Role: FE

Implement the correct HTML and attributes, for dynamic parts, use a placeholder to make BE aware of the necessity of creating CMS fields or apply translations.

Use “#BE” as the placeholder text whenever the accessibility related content is dynamic:

image alt text e.g. <img src="xxx.png" alt="#BE">

aria-label e.g. <a href="xxx" aria-label="#BE">Learn More</a>

id and aria-controls e.g.

<h3>
  <button aria-controls="#BE1" id="#BE2" aria-expanded="true" class="Accordion-trigger">
    <span class="Accordion-title">
      Personal Information
      <span class="Accordion-icon"></span>
    </span>
  </button>
</h3>
<div id="#BE1" role="region" aria-labelledby="#BE2" class="Accordion-panel">

The placeholder can also be used in comments to make a more detailed explanation:

e.g.


A Jira ticket can be created to track integration issues between FE and BE

Never hardcode accessibility-related text without BE placeholder, otherwise, they will likely be neglected.

1.2 Role: BE

Once BE receive HTML from FE, search for all BE placeholders “#BE”, replace them with dynamic logic.

for any CMS fields, make CE aware of the necessity of populating the content. There should be something like a CMS manual to list all accessibility-related CMS fields to be provided to the CE.

others things to check (details can be found in the following checklist) :

headings (h1, h2, h3…) may need to be configurable in case they are in the flexible modules

external links can be configured correctly

when a list (ul or ol) contains only one item, it should be changed to div

the page title is dynamic, iframe titles are editable

1.3 Role: CE

CE should understand that accessibility-related content is usually not visible, but is as important as regular copy deck, hence we should actively chase the front office/client if it’s missing.

Before the dev work, CE should find out the aria-labels and alt texts which are needed from the design and ask the creative team to provide.

1.4 Role: QA

In order to conduct a complete test, QA needs to understand the knowledge of web accessibility to the same level as developers and then use Web Accessibility Checklist (Dev/Content/Design) and the following checklist to check the website. QA should do a search of the code for stray #BE etc tags before sending the pages to ADA for review.

2. Checklist

2.1 Checkpoint: Language

Solution
Make sure lang=“xx-xx” is specified with the “Html” tag

For any content within the page that are not in the page-wise language, it needs to be explicitly marked.

Example:

<html lang="en-US">
  ...
  <p>Hello World</p>
  <span title="Spanish">
    <a lang="es" href="qa-html-language-declarations.es">Español</a>
  </span>
  ...
<html>

Reference：

https://www.w3.org/International/questions/qa-html-language-declarations

Visual Examples
Language selection items should have corresponding lang attribute:
在这里插入图片描述 Who should care
FE: use placeholder to tell BE if the language list needs to be dynamically populated.

BE: if the content in a foreign language is populated by BE logic, such as a dynamic language selection dropdown, make sure the lang attribute is specified for each language.

CE: For any content within the page that are not in the page-wise language, it needs to be explicitly marked with a lang attribute.

2.2 Checkpoint: Page Title

Solution
<title>Always include meaningful and unique page title</title>

Best practice: the content in the title tag should match the content in the H1 tag.
Visual Examples
在这里插入图片描述
Who should care
FE: include page title as example in the HTML

BE: provide ways to input page title in CMS

CE: Provide a meaningful and unique title for each web page to enable users to identify the web page content.

2.3 Checkpoint: Landmark

Solution

Make sure all key landmarks exist:
- for page header, it should not be nested in other landmarks like main
  
  <nav> - can have multiple on a single page
  
  <main> - can have one on a single page
<role="contentinfo"> - can have one on a single page

(footer can represent the conteninfo role when its context is the body element.)
- for footer, as the tag is not supported in legacy browsers/ screen readers, we define both the contentinfo role and the tag as:

<footer role="contentinfo">...</footer>

https://www.w3.org/TR/wai-aria-practices/examples/landmarks/contentinfo.html

For landmark which appears multiple times on a page, use aria-label to mark them

for example, header nav, footer nav, and breadcrumbs

<nav aria-label="breadcrumb" >

<nav aria-label="in-page navigation">

When using the <br> tag for layout purposes (such as in a header), adding aria-hidden attribute is necessary. otherwise the screen reader will read it. <br aria-hidden="true">

Visual Examples
header landmark, should not be nested in main:
在这里插入图片描述
header landmark, should not be nested in main:

footer landmark <footer role="contentinfo">...</footer>
在这里插入图片描述

2.4 Checkpoint: Skip links

Solution

Skip links should be added for keyboard users to jump to main content and footer
They should be put at the beginning of the page, usually right after the opening <body> tag, and before navigation.
They should be hidden by default (screen reader only style, not display: none) and display while focused through the keyboard tab key.
The skip link target should not be set font-size: 0; otherwise, the focus will not move on the target. (If the font size of HTML element has been set).
According to the TC-92 solution, the content of the skip link content can be reduced to avoid the situation where the screen reader is tuned to the anchor position to repeatedly read the content.
The wrapper element should be adding the attribute tabindex = “-1”, otherwise, the screen reader can’t read out the target’s value when the IOS environment.

Reason: This is caused by a bug in Android that stops the focus event from being triggered. Please refer here for details

https://www.nomensa.com/blog/2004/what-are-skip-links

Visual Examples
在这里插入图片描述

<body>
  <div class="skip-links-nav">
    <a class="l-offscreen" href="#kp-main">
      Skip to page main content
    </a>
    <a class="l-offscreen" href="#kp-footer">
      Skip to page footer
    </a>
  </div>
  
  <!-- header, navigation, etc. go here -->
  
  <main class="main-container">
    <a class="l-offscreen" id="kp-main" tabindex="-1">
      Main
    </a>
  </main>
  
  <footer class="footer" role="contentinfo">
    <a class="l-offscreen" id="kp-footer" tabindex="-1">
      Footer
    </a>
  </footer>
</body>

在这里插入图片描述

.l-offscreen {
   
  opacity: 0;
  position: absolute;
  left: -9999px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

最低0.47元/天解锁文章

Joyce的前端日常

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Accessibility Handbook

文章目录1. Overall duty of all parties (for details please refer to the checklist)1. 1 Role: FE1.2 Role: BE1.3 Role: CE1.4 Role: QAChecklist2.1 Checkpoint: Language2.2 Checkpoint: Page Title2.3 Checkpoint: Landmark2.4 Checkpoint: Skip links2.5 Checkpoint: Brea
复制链接

扫一扫