Standards: WAI‐ARIA 1.2 Standards

Abstract

2.1.1 All interactive elements within the web application, such as buttons, links, and form controls, modal openers, dropdown menus shall comply with the WAI-ARIA 1.2 Standards.

The rules defined by Information for Authors applies here.

Goal

The goal of this requirement is to ensure that all interactive elements within the web application, such as buttons, links, and form controls, modal openers, dropdown menus, are accessible to users with disabilities. This includes ensuring that the elements are properly labeled, have appropriate keyboard and mouse interactions, and are navigable using assistive technologies.

Labeling an interactive elements is important for accessibility. It helps users understand what action will occur when they interact with the element. For example, a button with the label "Start Quiz" is more understandable to users than a button with no label.

Attaching a role gives assistive technologies information about how to handle each element. When WAI-ARIA roles override host language semantics, there are no changes in the DOM, only in the accessibility tree.

Usable keyboard navigation in a rich internet application is different from the tabbing paradigm among interactive elements, such as links and form controls, in a static document. In rich internet applications, the user tabs to significantly complex widgets, such as a menu or spreadsheet, and uses the arrow keys to navigate within the widget. The changes that WAI-ARIA introduces to keyboard navigation make this enhanced accessibility possible. In WAI-ARIA, any element can be keyboard focusable. In addition to host language mechanisms such as tabindex, aria-activedescendant provides another mechanism for keyboard operation. Most other aspects of WAI-ARIA widget development depend on keyboard navigation functioning properly.

Relevant Tags

• <button> : A button is an interactive element that triggers an action when clicked.
• <a> : An anchor element is an interactive element that triggers a navigation when clicked.
• <input> : An input element is an interactive element that allows users to enter data.
• <select> : A select element is an interactive element that allows users to select one or more options from a list.
• <textarea> : A textarea element is an interactive element that allows users to enter multiple lines of text.
• <label> : A label element is used to associate a form control with a form label.
• <fieldset> : A fieldset element is used to group related form controls.
• <legend> : A legend element is used to provide a caption for a fieldset element.
• <form> : A form element is used to create a form for user input.
• <figure> : A figure element is used to group elements that are related and can be described as a whole.
• <figcaption> : A figcaption element is used to provide a caption for a figure element.
• <img> : An img element is used to embed an image in the document.
• <svg> : An svg element is used to embed an SVG (Scalable Vector Graphics) image in the document.
• <hr> : An hr element is used to create a horizontal rule.
• <main> : An element to describe the primary content of a website.
• <aside> : An element to describe secondary content and sidebar.
• <nav> : An element to describe navigational content.
• <header> : An element to describe the header of a section.
• <footer> : An element to describe the footer of a section.
• <article> : An element to describe an article or post. (e.g. A post component)
• <section> : An element to describe a section of a page. (e.g. The comments section in the forum page)
• <ul> : An element to describe an underordered list. (e.g. The list of tags)

Examples:

Relevant Attributes

• aria-role : The aria-label to describe the mission for an interactive component.
• aria-label : The aria-label attribute provides a label for an element that is not visible on the screen.
• aria-labelledby : The aria-labelledby attribute provides a label for an element that is not visible on the screen.
• aria-describedby : The aria-describedby attribute provides a description for an element that is not visible on the screen.
• aria-hidden : The aria-hidden attribute is used to hide an element from assistive technologies.
• aria-disabled : The aria-disabled attribute is used to indicate that an element is disabled.
• aria-required : The aria-required attribute is used to indicate that a form control is required.
• aria-checked : The aria-checked attribute is used to indicate that a checkbox or radio button is checked.
• aria-selected : The aria-selected attribute is used to indicate that an option in a select element is selected.
• aria-modal : The aria-modal attribute is used to indicate that an element is a modal dialog that blocks interaction with the rest of the page until closed.
• aria-live : The aria-live attribute is used to indicate that updates to an element's content should be announced by assistive technologies.
• aria-description : The aria-description attribute provides a description for an element that is not visible on the screen.

Examples:

<nav aria-label="Main navigation"></nav>
<a aria-label="How to Improve Vocabulary for English Learners by Emre Yıldız" href="/forum/forum/1"></a>
<div role="region" aria-labelledby="start-quiz-heading">
 <div role="region" aria-labelledby="start-quiz-heading">
        <div>
            <h1 id="start-quiz-heading">
                Ready to start the quiz?
            </h1>
            <p>
                The quiz consists of {quiz.questions.length} questions. You can
                move the next or previous question using the buttons below. will
                be provided 10 minutes to complete the quiz.
            </p>
        </div>
        <button onClick={onStart} aria-describedby="start-quiz-heading">
            <span/>
            Start Quiz
        </button>
    </div>
 <div
       aria-hidden={order !== length - 1}
       role="alert-dialog"
       aria-modal="false"
       aria-description={toast.data.message}
       aria-live="polite"
    >
<button
       disabled={order !== 0}
       aria-roledescription="close button"
       aria-disabled={order !== 0}
       onClick={() => {
          useToastStore.getState().remove(toast.id);
       }}>
</button>

Use Cases

Quiz

• Search by quiz name (input field)
• Filter by quiz type (radio button)
• Take Quiz (button)

Forum

• Open a forum page (card as a button)
• Bookmark a forum (button)

Requirements

• Every tag in the markup complies with Accessible Name Calculation. (For)
• No interactive elements are simple <div> elements. They must be converted to or wrapped within a <button> or <a> element.
• Any interactive element that switches between states must have a visible label that describes the state.
• Any interactive element that redirects to another page must have a visible label that describes the action.

Accessible Name Calculation

Roles Supporting Name from Author

• alert

• alertdialog (name required)

• application (name required)

• article

• banner

• blockquote

• button (name required)

• cell

• checkbox (name required)

• columnheader (name required)

• combobox (name required)

• command

• complementary

• composite

• contentinfo

• definition

• dialog (name required)

• directory

• document

• feed

• figure

• form

• grid (name required)

• gridcell

• group

• heading (name required)

• img (name required)

• input

• landmark

• link (name required)

• list

• listbox (name required)

• listitem

• log

• main

• marquee (name required)

• math

• meter (name required)

• menu

• menubar

• menuitem (name required)

• menuitemcheckbox (name required)

• menuitemradio (name required)

• navigation

• note

• option (name required)

• progressbar (name required)

• radio (name required)

• radiogroup (name required)

• range

• region (name required)

• row

• rowgroup

• rowheader (name required)

• scrollbar

• search

• searchbox (name required)

• sectionhead

• select

• separator

• slider (name required)

• spinbutton (name required)

• status

• switch (name required)

• tab

• table (name required)

• tablist

• tabpanel (name required)

• term

• textbox (name required)

• time

• timer

• toolbar

• tooltip (name required)

• tree (name required)

• treegrid (name required)

• treeitem (name required)

• window

• Roles Supporting Name from Content

• button (name required)

• cell

• checkbox (name required)

• columnheader (name required)

• gridcell

• heading (name required)

• link (name required)

• menuitem (name required)

• menuitemcheckbox (name required)

• menuitemradio (name required)

• option (name required)

• radio (name required)

• row

• rowheader (name required)

• sectionhead

• switch (name required)

• tab

• tooltip (name required)

• treeitem (name required)

Roles which cannot be named (Name prohibited)

• caption
• code
• deletion
• emphasis
• generic
• insertion
• paragraph
• presentation
• strong
• subscript
• superscript