Introduction to WAI-ARIA for Beginners

ARIA landmarks are attributes you add to elements to create semantically defined sections of a page that allow users of assistive technologies to navigate the page more easily. Think of ARIA landmarks as building a set of “skip to” links like “skip to main content”. In this lecture, we will discuss what landmarks are, explore practical examples, and provide landmark coding information.

A banner landmark identifies site-oriented content at the beginning of each page within a website and a contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements. In this quick lecture, we will look at banner and contentinfo examples and explore the code for both.

Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. In this lecture, we will explore the code, best creation practices, and look at examples of navigation landmarks.

Navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. In this lecture, we will explore the code, best creation practices, and look at examples of navigation landmarks.

The main landmark contains what is between the header and footer of a webpage. The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. In this quick lecture, we will discuss these landmarks and how they relate to each other, and look at the code for both.

The form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form. This is a form that collects and saves a user's contact information. The search landmark role is used to identify a section of the page used to search the page, site, or collection of sites. In this quick lecture, we will have a look at both and explore the code.

A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. In this lecture, we will discuss the region landmark and provide examples and code.

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). In this lecture, we will discuss what ARIA roles, states, and properties are in depth and provide practical examples.

The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons. In this lecture, we will discuss the button role and its purpose, while providing practical examples and code.

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use the aria-labelledby attribute instead. In this lecture, we will discuss the aria-label attribute and provide practical examples and code.

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. In this lecture, we will discuss what aria-labelledby is and when it's used, while providing practical examples and code.

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. In this lecture, we will discuss aria-describedby and provide practical examples and code in order to better understand its functions.

aria‑label, aria‑labelledby, and aria‑describedby can all be used to bring extra clarity to a given element when it's exposed to assistive technology.

• aria‑label overrides an element's name with contents you specify.

• aria‑labelledby replaces an element's name with contents from another node on the page. You'd use this when you already have a visible label anyways.

• aria‑describedby sets your element's description to the contents of another node on the page. This is great for noncritical, supplemental information.

In this lecture, we will discuss the differences among the functions of these three ARIA attributes with practical examples.

The aria-hidden attribute can either expose or hide non-interactive content from the accessibility API. In this lecture, we will discuss what aria-hidden is, while providing practical examples and code to better understand its functions.

The presentation role is used to remove semantic meaning from an element and any of its related child elements. Presentational roles are used when elements need to be in the DOM, but the semantics of them are inaccurate or unnecessary. We’re basically telling a screen reader that the semantics of an element are wrong, so ignore them. In this lecture, we will explore and discuss the presentation role with practical examples and code.

The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned. In this lecture, we will explore the aria required attribute with practical examples and code.

The aria-expanded attribute provides information about whether an element is in an expanded or collapsed state. For example, if you have a collapsible element which contains a text, then a screen reader would know that the text is not currently displayed on the screen when the aria-expanded attribute is set to true. In this lecture, we will discuss and explore the aria-expanded attribute, while providing practical examples and code.

The hamburger menu or hamburger icon is a name given to the menu icon found in newer programs and websites that hides the traditional file menu. Using the hamburger menu makes it easier to view program options on mobile devices, but this often comes at the cost of accessibility. In this lecture, we will explore the step by step procedure used to code an accessible hamburger menu using ARIA.

Congratulations on completing the course and thank you so much for taking the initiative to learn about web accessibility! If you'd like to learn more and interact with me and other web accessibility developers and students, I highly encourage you to join my web accessibility Facebook group and/or Discord server. See you there!

Facebook Group:
https://www.facebook.com/groups/webaccessibilityeducation

Discord: https://discord.gg/H3tGnKnGka