Practice: Building an accessible front-end application

Accessibility (A11y for short) is a topic of vital importance in modern web development. Building an accessible front-end app means we make sure our app is accessible to all users, including people with disabilities. Not only is this a moral responsibility, but it also brings out a wider user base, improves user experience, and helps comply with laws and regulations.

This article will introduce the basic concepts and techniques for building accessible front-end applications, including semantic HTML, focus management, ARIA attributes, accessible forms and images, etc. We will combine code examples to show step by step how to create a front-end application with good accessibility in actual combat.

1. Semantic HTML

Semantic HTML is the foundation for building accessible front-end applications. Using semantic markup provides screen readers and search engines with more information, making website content easier to understand and navigate. Here are some common semantic tags:

<header>: Used to define the header of the page or block.
<nav>: Area used to define navigation links.
<main>: Used to define the main content area of the page.
<article>: Used to define standalone articles or content blocks.
<section>: Used to define a section or block in a document.
<aside>: Used to define the sidebar content of the page.
<footer>: Used to define the footer of the page or block.

Using these semantic tags can make the page structure clearer and allow screen readers and search engines to better understand the content of the page.

1.1 Example: Using Semantic Tags to Build a Page Structure

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>欢迎来到我们的网站</h2>
      <p>这里是网站的主要内容。</p>
    </section>

    <section>
      <h2>最新文章</h2>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
      <article>
        <h3>另一篇文章标题</h3>
        <p>文章内容...</p>
      </article>
    </section>
  </main>

  <footer>
    <p>版权所有 © 2023，可访问的前端应用</p>
  </footer>
</body>
</html>

In the above examples, we used semantic tags such as <header>, <nav>, <main>, <section>, <article>and to build the basic structure of the page. <footer>Not only is such a structure easier to read and understand, it also helps with accessibility.

2. Focus management

Focus management is another key point in building accessible front-end applications. Focus management ensures that users can use the keyboard and screen reader to navigate and operate the app without relying on the mouse. In order to achieve good focus management, we need to add appropriate focus styles to interactive elements (such as links, buttons, form controls, etc.) and ensure that the focus moves correctly when the user operates.

2.1 Example: Adding CSS styles for focus styles

/* 在用户使用键盘导航时，为可交互元素添加焦点样式 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #007bff; /* 添加一个蓝色的边框作为焦点样式 */
}

In the above example, we added focus styles to interactable elements such as <a>, <button>, <input>, <select>and . <textarea>In this way, when the user uses the keyboard to navigate, the focus will have a blue border, so that the user can clearly know the element where the current focus is.

2.2 Example: Using `tabindex`attributes to control focus order

In HTML, we can use tabindexattributes to control the order of focus. tabindexThe value of the attribute determines the position of the element in the focus order, and the smaller the value, the earlier it gets the focus. At the same time, we can also use tabindex="-1"to allow elements to get focus through JavaScript scripts, but not participate in the normal focus order.

<button>第一个按钮</button>
<button tabindex="-1">不参与焦点顺序的按钮</button>
<button>第二个按钮</button>

In the above example, although the second button has a negative tabindex, it can still get focus via the JavaScript script without affecting the focus order of the other buttons.

3. Using ARIA attributes

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes used to enhance accessibility. ARIA attributes allow us to provide more information to screen readers so they can better understand and navigate our app. ARIA attributes are often used to fix components that don't have semantic meaning, or to provide more contextual information to screen readers.

3.1 Example: Using `aria-label`attributes to add descriptions to icons

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <ul>
        <li><a href="/" aria-label="回到首页">首页</a></li>
        <li><a href="/about" aria-label="查看关于页面">关于我们</a></li>
        <li><a href="/contact" aria-label="联系我们">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <!-- 页面内容... -->

</body>
</html>

In the above example, we use aria-labelattributes to add a description to the navigation link, so that the screen reader will prompt the user what the link does when reading the link, which improves accessibility.

3.2 Example: Use `aria-labelledby`attributes to add label associations to form input boxes

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" aria-labelledby="username">
    <button type="submit">提交</button>
  </form>
</body>
</html>

In the example above, we use aria-labelledbyattributes to associate <input>elements with <label>elements so that the screen reader will prompt the user for a label for the input box when it reads it.

4. Accessible forms

Forms are one of the most common interactive elements in web applications. Building accessible forms makes it easier for users to fill out form content, navigate and manipulate forms correctly with a screen reader.

4.1 Example: Adding Labels to Form Elements

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name">

    <label for="email">邮箱：</label>
    <input type="email" id="email">

    <label for="message">留言：</label>
    <textarea id="message"></textarea>

    <button type="submit">提交</button>
  </form>
</body>
</html>

In the above example, we added labels to each form element, so that the screen reader will prompt the user to label each input box when reading the form, which improves accessibility.

4.2 Example: `aria-invalid`Marking invalid input with attributes

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" aria-invalid="true">

    <button type="submit">提交</button>
  </form>
</body>
</html>

In the example above, we aria-invalidmarked an invalid input box (eg, a required field was not filled) using an attribute. This will prompt the user when the screen reader reads the input box that the content of the input box is invalid.

5. Accessible images

Image is one of the important content in web application. Building accessible images allows screen reader users to understand what the image is about and to add appropriate alt text to the image.

5.1 Example: Adding Alt Text to Images

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
</head>
<body>
  <img src="example.jpg" alt="示例图像">
</body>
</html>

In the above example, we <img>added altattributes to the element to describe the image content. This will prompt the user for an alternate text for the image when the screen reader reads the image.

5.2 Example: Hide purely decorative images using CSS

<!DOCTYPE html>
<html>
<head>
  <title>可访问的前端应用</title>
  <style>
    .decorative-image {
      position: absolute;
      width: 1px;
      height: 1px;
      clip: rect(1px, 1px, 1px, 1px);
    }
  </style>
</head>
<body>
  <img src="decorative.jpg" alt="" class="decorative-image">
</body>
</html>

In the above example, we used CSS to hide a purely decorative image on the page. This way screen readers won't read the image and interfere with the user's reading experience.

6. Test for accessibility

Building an accessible front-end application is not just adding some attributes and styles, but also testing to ensure that the application will perform well in different environments.

6.1 Using accessibility testing tools

There are many accessibility testing tools that can help us check the accessibility of our apps. For example:

Lighthouse : Lighthouse is a testing tool developed by Google, which can test application performance, accessibility, best practices, etc., and give corresponding improvement suggestions.
ax : axe is an open source accessibility testing tool, which can be embedded in development tools to help developers discover and fix accessibility problems in time.
WAVE : WAVE is an online accessibility assessment tool that helps us check for accessibility issues in a page and provides detailed suggestions for fixes.

6.2 Conduct accessibility user experience testing

In addition to using tools for accessibility testing, we should also conduct accessibility UX testing. Invite some users with disabilities or screen readers to test your app and get their feedback. Their feedback will be very helpful for you to improve the accessibility of your app.

7. Summary

Building accessible front-end applications is an integral part of modern web development. By using techniques such as semantic HTML, focus management, ARIA attributes, accessible forms, and images, we can improve the accessibility of our applications so that all users, including people with disabilities, can use our applications without barriers. At the same time, we also need to test to ensure that the application can perform well in different environments.

Through continuous learning and practice, we can become better developers who know how to build accessible front-end applications, and contribute to building a more inclusive and friendly Web world. Hope this article helps you in building accessible front-end applications. Best of luck with your future developments!