Improving The Accessibility Of Your Angular App
Tags: Angular, Web Design, Accessibility, Web Development, React

Improving The Accessibility Of Your Angular App

Accessibility plays a vital role in any Single Page Applications. As Angular growing by leaps and bounds, supporting the accessibility in Angular Application becomes quite complex until we know all accessibility concepts.

Here I am coming with the different guidelines to implement accessibility in Angular Applications.

One of the main concepts to support accessibility is Skip to Main Content. When we are dealing with multiple pages it is better to have one place where we can maintain the whole reusable accessibility feature.

Before starting the implementation techniques, Let’s check common rules to follow while implementing accessibility.

By the way before jumping into the sea what is accessibility? Let’s check the official definition published in www.w3.org

The power of the Web is in its universality.

Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.

source: https://www.w3.org/standards/webdesign/accessibility

If you want to learn How to create reusable components to support accessibility, check out this.

You can also checkout how to create reusable functions to implement accessibility in Angular Application.

Let’s continue our discussion

Below are the approaches we need to focus on as a developer while developing any website to support Accessibility.

1. Form controls

Associating form inputs with text labels.

Approach 1: (label for and id)

<label for="name">Name</label> <input id="name" type="text" name="name">

Approach 2: (aria-label)

<input type=”text” name=”enter” aria-label=”Enter”> <button type=”submit”>Enter</button>

Approach 3: (aria-labelledby)

<input type=”text” name=”enter” aria-labelledby=”enterbutton”> <button id=”enterbutton” type=”submit”>Enter</button>

Approach 4: (title)

<input title=”Enter” type=”text” name=”enter”> <button type=”submit”>Enter</button>

2. Associating alert boxes with error messages:

<div role="alert">

<h4>There are two errors in this submission</h4>

<ul>

<li>

<a href="#firstname" id="firstname_error">

The First Name field is empty; it is a required field and must be filled in.

</a>

</li>

<li>

<a href="#birthdate" id="birthdate_error">

The Date field is in the wrong format; it should be similar to 17/09/2013 (use a / to separate day, month, and year).

</a>

</li>

</ul>

</div>

Also, form fields can be associated with the corresponding error message using aria-describedby.

<label for=”firstname”>First Name:</label> <input type=”text” id=”firstname” aria-describedby=”firstname_error”>

3. Include alternative text for images

Approach 1: (alt-text)

<img src="test.png" alt= "This is test image.It will be help to test anything">

Approach 2: (aria-labeled-by)

<img src=”test.png” aria-labelledby=”test-label”> <p id=”test-label”>This is test image.It will be help to test anything</p>

4. Defining Links

· Ensure links have: focus state.

· Ensure links are recognizable (underlined).

· Provide a “Skip to main content” link.

Approach 1: (Simple Link)

<a href=”https://www.abc.com/data" title=”Go to abc data section”>Visit our ABC Website</a>

Approach 2: (Link that opens the content on a new page)

<a href=”page.html” title=”View more details about this person (opens in a new window)” onclick=”JavaScript:return openInNewWindow(this)”>Test Test</a>

Approach 3: (Skip to main content link in a page)

<div id=”skip_menu”><a href=”#content” title=”Skip the navigation menus and go directly to the main page content”>Skip to content</a></div>

5. Defining radio buttons and checkboxes using fieldset and legend

Ensure grouping related form elements with fieldset and describe the group with a legend.

<fieldset> <legend>Select<abbr title=”This field is mandatory”>*</abbr></legend> <input type=”radio” required name=”title” id=”r1" value=”abc”><label for=”r1">abc</label> <input type=”radio” required name=”title” id=”r2" value=”cde”><label for=”r2">cde</label> </fieldset>

6. Defining validations in HTML forms

Approach for pattern:

<form> <label for=”choose”>Would you prefer a milk or a tea?</label> <input id=”choose” name=”i_like” required pattern=”milk|tea”> <button>Enter</button> </form>

Approach for setting validations:

<form>

<div>

<label for="choose">Would you prefer a milk or a tea?</label>

<input id="choose" name="i_like" required minlength="6" maxlength="6">

</div>

<div>

<label for="number">How many sugar would you like?</label>

<input type="number" id="number" name="amount" value="1" min="1" max="10">

</div>

<div>

<button>Enter</button>

</div>

</form>

7. Tables

When tables have a header row and/or column, use the TH tag for header cells, and the SCOPE attribute to mark header cells as the header of that row or the header of that column.

• Table should have a summary attribute decided.

• Use <th scope=”col”> for cells in a header row along the top of the table.

Use <th scope=”row”> for cells in a header column along the left-hand side of the table.

<table summary="List of contacts">

<caption>Contact information</caption>

<thead>

<tr>

<td></td>

<th scope="col">Name</th>

<th scope="col">Phone number</th>

<th scope="col">City</th>

</tr>

</thead>

<tbody>

<tr>

<td>1.</td>

<th scope="row">Test1 Test1</th>

<td>111–212–1231</td>

<td>Toronto</td>

</tr>

<tr>

<td>2.</td>

<th scope="row">Test2 Test2</th>

<td>233–444–2234</td>

<td>Hamilton</td>

</tr>

<tr>

<td>3.</td>

<th scope="row">Test3 Test3</th>

<td>123–444–0230</td>

<td>Sudbury</td>

</tr>

</tbody>

</table>

8. Defining application menus

8.1 Menu representation

Approach 1: Unordered list

Use an unordered list (<ul>) when the menu items are not in a specific order. Most types of menus, such as website navigation, fall in this category.

CODE SNIPPET: UNORDERED LIST

<ul>

<li><a href="…">Home</a></li>

<li><a href="…">Tab1</a></li>

<li><a href="…">Tab2</a></li>

<li><a href="…">Tab3</a></li>

<li><a href="…">Tab4</a></li>

…

</ul>

Approach 2: Ordered list

Use an ordered list (<ol>) when the sequence of the menu items is important. In the following example, the menu items represent the steps of a construction manual:

CODE SNIPPET: ORDERED LIST

<ol>

<li><a href="…">List1</a></li>

<li><a href="…">List2</a></li>

<li><a href="…">List3</a></li>

<li><a href="…">List4</a></li>

<li><a href="…">List5</a></li>

…

</ol>

9. Identify menus

Identify the menu, ideally using the HTML5 <nav> element to allow users access to the menu directly. Other techniques to mark up a menu are described in the page regions tutorial.

<nav>

<ul>

…

</ul>

</nav>

10. Label menus

Label menus to make them easier to find and understand. Labels should be short but descriptive, to allow users to distinguish between multiple menus on a web page. Use a heading, aria-label, or aria-labelledby to provide the label. Those techniques are described in the labeling regions tutorial.

<nav aria-labelledby="mainmenulabel">

<h2 id="mainmenulabel" class="visuallyhidden">Main Menu</h2>

</nav>

11. Indicate the current item

Use markup to indicate the current item of a menu, such as the current page on a website, to improve orientation in the menu.

Approach 1: Using invisible text

Provide an invisible label that is read aloud to screen reader users and used by other assistive technologies to mark the current item which allows custom label text.

Remove the anchor (<a>), so users cannot interact with the current item. That avoids misunderstandings and emphasizes that the current menu item is active.

In the following example, the menu item has the invisible text “Current Page:” and the <a> element is replaced by a <span> with a class current:

<li>

<span class="current">

<span class="visuallyhidden">Current Page: </span>

Space Bears

</span>

</li>

Approach 2: Using WAI-ARIA

Use the aria-current=”page” attribute to indicate the current page in the menu. This technique is particularly useful when the anchor (<a>) cannot be removed from the HTML.

In the following example the link in the navigation points to the main content of the page.

<li>

<a href="#main" aria-current="page">

Space Bears

</a>

</li>

12. Submenus

· aria-haspopup=”true” declares that a menu item has a submenu.

· aria-expanded=”false” declares that the submenu is hidden.

<nav aria-label="Main Navigation">

<ul>

<li><a href="…">Home</a></li>

<li><a href="…">Tab2</a></li>

<li class="has-submenu">

<a href="…" aria-haspopup="true" aria-expanded="false">

Space Bears

</a>

<ul>

<li><a href="…">Data 1</a></li>

<li><a href="…">Data 2</a></li>

</ul>

</li>

<li><a href="…">Tab3</a></li>

<li><a href="…">Tab4</a></li>

</ul>

</nav>

13. Page Regions

13.1 Page header

Most websites have a region at the top of every page that contains site-wide information, such as the website logo, search function, and navigation options. HTML5 provides the <header> element, which can be used to define such a region.

Note: If the <header> element is used inside <article> and <section> elements, it is not associated with the whole page, but only with that specific <article> or <section>.

<header>

…

<img src="/images/logo.png" alt="Patel Inc.">

…

</header>

13.2 Page footer

Similar to the page header, most websites also have a region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. HTML5 provides the <footer> element, which can be used to define such a region.

Note: If the <footer> element is used inside <article> and <section> elements, it is not identified as the footer for the whole page but only relates to that specific <article> or <section>.

<footer>

…

<p>© 2021 Patel Inc.</p>

…

</footer>

14. Navigation

The HTML5 <nav> element can be used to identify a navigation menu. A web page can have any number of navigation menus. Use labels to identify each navigation menu.

<nav aria-label="Main Navigation">

…

</nav>

…

<nav aria-labelledby="quicknav-heading">

<h5 id="quicknav-heading">Quick Navigation</h5>

…

</nav>

15. Main content

Use the HTML5 <main> element to identify the main content region of a web page or application.

<main>

<h1>Welcome to Medium</h1>

…

</main>

16. Complementary content

Use the HTML5 <aside> element to identify regions that support the main content, yet are separate and meaningful sections on their own; For example, a side note explaining or annotating the main content.

<aside>

<h3>Recent News</h3>

…

</aside>

17. Page Regions in HTML5 Using WAI-ARIA

Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles.

<header role="banner">…</header>

<main role="main">…</main>

<nav role="navigation">…</nav>

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

18. JavaScript

Unobtrusive JavaScript

Use unobtrusive JavaScript (never use in-line scripting).

No-JS Alternatives

Provide alternatives for users who do not have JavaScript enabled and for environments where JavaScript is unavailable.

Too much covered? Let’s take a break. In the Next Article, we will discuss how to check if your website is accessible or not and How we can implement common components to support web-accessibility.

References

https://a11yproject.com/checklist.html

https://alphagov.github.io/accessibility-tool-audit/test-cases.html

https://www.w3.org/WAI/tutorials/images/decorative/