Accessibility on the Web Part 2: Accessible content

Native HTML elements and easy-to-learn ARIA specifications can be used to convey the content of a web application without barriers. The first part of the series described the structure of a barrier-free website using the example of the fictitious insurance company “Crimson Assurance”. Knowledge of the article helps to understand this second part, but is not a mandatory requirement.

Here, too, the code examples do not represent the only implementation option, but the ideal solution within the scope of the example application. They are intended to explain the most important elements of barrier-free communication of the content of a web application and give an insight on a technical level. The names of the employees shown are fictitious, as is the insurance.

Breadcrumb Navigation

The main area of ​​each page of the web application starts under the landmark <main> with a breadcrumb navigation. A user can use this to identify his position within the website structure and, in addition to the main heading, also check there whether he has actually called up the desired page. Using this navigation, a user can also return to the start page on the path previously taken. In addition to easier orientation, it also provides more detailed information about the website structure than in the main navigation.

In terms of accessibility, breadcrumb navigation should be clearly labeled as such. A designation like “You are here:” is often read for this purpose. The label should not only be visible for screen readers, but for everyone, since the visibility of the label enables the navigation and thus the current position to be found quickly.

In the source code, the entire area should be under one <nav>-Landmark located. Like the main navigation, this one should <nav>-Landmark per aria-label be designated. In Crimson Assurance, this navigation is called “navigation path”; the designation is not visually visible. “ARIA” stands for “Accessible Rich Internet Applications” and is an extension of HTML to mark UI elements semantically. It should only be used if HTML does not already provide the required semantic information natively.

The path should start with the <ol>-Tag appear as a sorted list. The list is by means aria-label just like them <nav>-Landmark labeled “Navigation Path”. The last entry will be sent by aria-label="page" marked as the current page.

The redundant designation of the landmark and the list show directly which area of ​​the website you are in, both when you jump directly to the landmark and when you jump directly to the list.

Here is the breadcrumb navigation on the Crimson Assurance customer overview page:

<nav aria-label="Navigationspfad">
   <span>Sie befinden sich hier: </span>
   <ol aria-label="Navigationspfad">
      <li>
         <a href=".../portal">Startseite</a>
      </li>
      <li>
         <a href=".../portal">
             Kundenübersicht
         </a>
      </li>
      <li>
         <a href=".../portal/customers/a2" aria-current="page">
             Kundendeckblatt
         </a>
      </li>
   </ol>
</nav>

search fields

Crimson Assurance offers a customer lookup on the customer overview page. As the label of the search field, it sets per <label for=""> “Customer Name”. The link with the search field is made via the ID, which uniquely assigns the label to an element. A label can be assigned to exactly one element and an element can have exactly one label. Labels provide a unique and assistive technology-readable labeling of an item.

In addition, the label of an interactive element can be clicked like an input field in order to place the cursor in the input field. A screen reader often reads a label on its own line. Focusing on an element is much more efficient, as you can simply click on these rows to set the focus on the corresponding input field.

Even if the label is in front of an input field on the same line, it is easier to jump to the beginning of the line and click than to focus on the input field first. HTML labels are very useful for users with motor disabilities, as they increase the clickable area. The syntax of the Crimson Assurance Customer Name label search field is:

<form id="customer-search-form">
   <label for="customer-search-input">Kundenname</label>
   <input id=" customer-search-input">
</form>

A search box will appear with the <input>-Type attribute search semantically distinguished. An assistive technology can communicate this information to users. This tells you directly which special type of input field it is and which action can be carried out using it.

Auto-completion is particularly useful for a search field on a personal website. On the one hand, it supports users with poor concentration and, on the other hand, generally speeds up searches for frequently contacted customers.

A placeholder, on the other hand, does not explicitly improve accessibility. On the contrary, its use is often discouraged, since all the information offered there as support should better appear on the label. For Crimson Assurance, the placeholder is a customer name as an example of a possible entry. Since this does not require a specific format, the placeholder is actually not necessary. However, it serves as an example for the use of a placeholder. For example, if a placeholder should point to a certain date format, it would be better to specify this in the label of the input field. This means that if you enter an incorrect format, you can still see which format you want, even if you make a correction. Since a placeholder does not appear again after you have entered it, you are otherwise forced to remember the required format.

At Crimson Assurance, Customer Search is the first main activity on the Customer Overview web page, above the second main activity, Recent Customers. The attribute autofocus of the search field places the cursor directly in the search field when the page loads, so that a user can search for a customer immediately after loading the page, without having to navigate to the search field.

The syntax for the Crimson Assurance search field is:

<input type="search" autocomplete="on" placeholder="Johnnie Summers" autofocus>

Crimson Assurance shows results of searching for customers after entering at least two characters in the search field. The list of found customers is created dynamically and changes as more letters are entered. A screen reader does not initially recognize that content is changing in an area other than the one currently in focus. Without further information, which the application transmits to a screen reader, a user has to leave the search field after entering two characters and each additional character and check how many customers were found; a tedious and unsatisfactory process.

To convey to an assistive technology such as a screen reader that an area of ​​a web page is dynamically changing based on user activity, developers can add the ARIA attribute to the changing area aria-live with the value "assertive" to assign. aria-live Marks the area of ​​a website that changes dynamically and that a screen reader should “observe”. As a result, it is not necessary to repeatedly reload the entire page and have it read out in order to be able to track changes.

The value "assertive" specifies that the changes are urgent information that the site must communicate to users immediately. With a dynamic search, for example, it makes sense for the page to immediately report the number of search results while a user is still typing or if she only stops typing for a very short time to hear the number of search results.

With Crimson Assurance, the search results area is marked as a dynamic region and as a "assertive" prioritized. From the second letter typed, the page immediately displays a message about the number of search results. In addition, all search results are read out. A user thus has the option of having the number of search results as well as the search results read out to her without having to change the cursor focus. If she is satisfied with the sheer number of search results, she does not have to listen to the complete output of the search results in order to be able to continue searching, but can interrupt the output at any time.