4️⃣ARIA

This page provides an introduction to understanding ARIA and step-by-step guide for implementing and fixing ARIA issues with Flowy.

ARIA(Accessible Rich Internet Applications) was introduced as an extension to HTML5 to address the need for improved web accessibility for people with disabilities and ensure a more inclusive online experience for all users.

Introduction to ARIA

What exactly is ARIA?

ARIA provides meaning for custom components and web applications that can be easily understood by assistive technologies (ATs) and presented to users in a way that makes sense to them. To better understand what ARIA is, we will use a building as an example. Picture yourself inside of a large building. There are no signs or directions to guide you. You become completely confused about where to go. But hey, along with a guide(ARIA) who shows you how to navigate and understand the different areas of the building easily.

ARIA Main Components: Roles, States and Properties

To create custom components/elements using ARIA, you need to define the roles, states and properties. Of course, you don't have to use all three elements of ARIA in a single line of code. It's optional, and you can use them separately if needed. ARIA consists of three important attributes: roles, states and properties.

1. Roles: describes what a component does and how assistive technologies recognize and understand how it functions. For example, a component may be presented as a dialog, a button, a heading, a slider, or an accordion.

2. States: States describe the current condition of an element. They always change when a user is interacting with a component. For example, a toggle button changes to true when in an open state and false when in a closed state.

3. Properties: They show what an element is like or how it relates to other elements in your web page. Think of properties as labels for rooms in a building. Just like labels help you understand which rooms are bedrooms, bathrooms, or kitchens, properties help you learn about the features and how elements are connected to each other on your web page.

ARIA Naming Conventions

These are techniques for providing components with names/labels so that Assistive Technologies can communicate the purpose of the element and distinguish between elements.

• aria-label: Use this when you want to provide a label to an element whose text is not visually present.

• aria-labelledby: Use this when you want to connect an element to other parts of the web page to provide a clear and accessible name.

• ariadescribedby: Use this when you want to reference longer content that provides a description.

Importance of ARIA

• Improved Accessibility: ARIA enhances web content and applications for people with disabilities by providing extra semantic information.

• Wider Reach: By making websites more accessible, ARIA expands audience reach and may fulfill legal requirements and guidelines like ADA or WCAG.

• Modern Web Application Support: ARIA is particularly useful for dynamic, JavaScript-heavy sites, where traditional HTML falls short in conveying structure and behavior.

• Cross-Browser and Cross-Device Consistency: ARIA attributes are consistently understood across different browsers and devices.

• Future-Proofing: As assistive technologies evolve, ARIA helps ensure your site remains accessible.

• Ethical and Social Responsibility: Beyond business benefits, ARIA helps in making the web more inclusive, fulfilling a human right.

• Not a Substitute for Semantic HTML: ARIA should complement, not replace, well-structured HTML. Incorrect usage can make a site less accessible.

ARIA Best Practices

1. Use the appropriate roles, states, and properties for custom widgets.

2. Keyboard Interaction: Ensure custom widgets have intuitive keyboard interaction based on standard HTML elements.

3. Focus Management: Programmatic focus handling for widgets like modals and menus to enable logical navigation on a web page.

4. Dynamic Changes: Use the appropriate ARIA states and properties to reflect dynamic changes in widgets.

How to Implement ARIA on Div and Span Elements with Flowy

Introduction

This section provides a general overview of how to use Flowy with generic HTML elements like 'divs' and 'spans'. By following these guidelines, you can create content that is more accessible, including better screen reader compatibility and keyboard navigation.

Div

A <div> element in HTML is a generic container that groups and organizes content on a web page. It doesn't have an effect on the content or layout. The div element is quite flexible for adding accessibility features in cases where semantic HTML has not been used.

Using ARIA on a div will depend on the context of your web page.

Span

A <span> element is a simple HTML container. It doesn't have any special meaning by itself. It is mainly used to group elements together so that you can style them in a specific way. The span element is quite flexible for adding accessibility features in cases where semantic HTML has not been used.

Using ARIA on a span element will depend on the context of your web page.

Implementing with Flowy

The following is a step-by-step guide for implementing Flowy on <div> and <span> elements to create accessible content for your site.

How to implement ARIA on your Div or Span Element with Flowy

Step 1: Start by identifying the `div` or ‘span’ element you want to enhance with ARIA.

Step 2: Determine the role of the `div` or ‘span’ element in the context of your web page. Examples include the role of banner, navigation, main, region, tabpanel, or button.

Step 3: Click on the Elements tool and select the element.

Step 4: Click on ‘roles’ and choose the most appropriate role for your `div` or ‘span’ element.

Step 5: Click on ‘ARIA’ to add any necessary ARIA states and properties to the `div` or ‘span’ element. Choose the ones that best suit addressing the accessibility needs. Examples include ‘aria-hidden, aria-expanded’, ‘aria-label’, `aria-describedby`, and many more.

Step 6: Ensure the ARIA attributes accurately represent the element's semantics and behavior. It's crucial to provide meaningful and useful information to assistive technologies.

Step 7: Click rock and roll and that’s it. You are done!

Repeat the above steps for the rest of the web pages on your site.

How to Implement ARIA Landmarks with Flowy

This section provides a brief introduction to ARIA Landmarks and a step-by-step guide for implementing and fixing ARIA issues with Flowy.

Using ARIA on landmarks assists in improving the user experience and the accessibility of web pages for people including people using assistive technologies. Think of landmarks as a shortcut or quick access to various sections of a web page.

It is important to note landmarks should be used sparingly. Using too many landmark roles can make it confusing for screen readers to understand the layout of the page, creating unnecessary distractions.

Banner

Introduction

Adding an ARIA to make an element a Banner landmark is pretty simple. The Banner landmark functions exactly as the HTML header landmark. You need to add the role attribute and set its value to ‘banner’. As shown in the code sample below.

<div id="headerContent" role="banner"> your header content </div>

Step 1: Determine the section or element in your HTML code that represents the banner(header) content area of your web page and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element that will identify a banner landmark on your web page. Only one banner element should be on a page because this is a top-level element (must not be contained within another landmark.)

Step 3: Click on the Elements tool and select the element.

Step 4: Select the CSS selector that represents the banner landmark for the page.

Step 5: Click on ‘roles’ and choose the ‘banner’ as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labeling and add aria-label or aria-labelledby (depending on your use case). Alternatively, you can add the ‘banner’ role manually clicking on the ‘edit button’. Add role="banner" on your element.

Step 7: Click rock and roll and you are done. Your element now represents a banner landmark.

Complementary

Introduction

Adding an ARIA to make an element a complementary landmark is pretty simple. A complementary landmark does the same functions as an HTML aside landmark. You need to add the role attribute and set it’s value to ‘complementary as shown in the code below.

<div id="complementaryContent" role="complementary">
Your complementary content
</div>

Things to Keep in mind when using role=”complementary”

1. If you have one complementary landmark in your web page, you do not need to provide a label to it.

2. If you have several complementary landmarks on your page, you need to provide a label for each landmark and each label must be unique. This will allow assistive technology users to understand the purpose of each complementary landmark.

3. Use aria-label when there is no visible heading (h2-h6) in the complementary content area as shown in the code sample below.

<div role="complementary" aria-label="Equally Services">
... complementary content area
</div>

4. Use aria-labelledby to as to associate the visible heading title(s) with the complementary landmarks on you page using the id/class of the heading.

<!-- First complementary landmark on the webpage-->
<div role="complementary"
<h2 id="complementary1">Equally
... complementary content area 1 ...
</div>
aria-labelledby="complementary1">
Services</h2>
<!-- Second complementary landmark on the webpage -->
<div role="complementary" aria-labelledby="complementary2">
<h2 id="complementary2">Equally Products</h2>
... complementary content area 2 ...
</div>

How to Fix and Implement Complementary Landmark using Flowy

Step 1: Determine the section or element in your HTML code that represents the complementary content area of your web page and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element(s) that will identify as a complementary landmark(s).

Step 3: Click on the Elements tool and select element.

Step 4: Select the CSS selector that represents the complementary landmark for the page.

Step 5: Click on ‘roles’ and choose the ‘complementary’ as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labeling and add ‘aria-label’ or ‘aria-labelledby’ (depending on your use case)

Step 7: Click rock and roll and that’s it. Your element now represents a complementary landmark.

ContentInfo

Introduction

Adding an ARIA to make an element a contentinfo landmark is pretty simple. A contentinfo landmark does the same functions as an HTML footer landmark. You need to add the role attribute and set its value to ‘contentinfo’ as shown in the code below.

<div role="contentinfo">
.... contentinfo area content
</div>

Things to Keep in mind when using role=”contentinfo”

1. If you have one footer landmark in your webpage, you do not need to provide a label to it.

2. If you have several footer landmarks on your page, you need to provide a label to each landmark and each label must be unique. This will allow assistive technologies users to understand the purpose of each complementary landmark.

3. Use aria-label when there is no visible heading (h2-h6) in the contentinfo area.

4. Use aria-labelledby to as to associate the visible heading title(s) with the contentinfo landmarks on your page using the id/class of the heading.

How to Fix and Implement Contentinfo Landmark using Flowy

Step 1: Determine the section or element in your HTML code that represents the contentinfo content area of your web page and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element(s) that will identify as contentinfo landmark.

Step 3: Click on the Elements tool and select element.

Step 4: Select the CSS selector that represents the contentinfo landmark for the page.

Step 5: Click on ‘roles’ and choose the ‘contentinfo’ as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labeling and add ‘aria-label’ or ‘aria-labelledby’ (depending on your

Step 7: Click rock and roll and that’s it. Your element now represents a Contentinfo landmark.

Main

Introduction

Adding ARIA to make an element a main landmark is pretty simple. An ARIA main landmark does the same functions as an HTML Main landmark. You need to add the role attribute and set it’s value to ‘main’ as shown in the code sample below.

<div role="main" id="mainContent">
...main content area...
</div>

Things to Keep in mind when using role=”main”

Each page should only have one main landmark. This is to avoid confusion for assistive technology users.

How to Fix and Implement Main Landmark using Flowy.

Step 1: Determine the section or element in your HTML code that represents the main content area of your webpage and is relevant to assistive technologies and user experience.

Step 2 : Pick the most appropriate element that will identify as an ARIA main landmark

Step 3: Click on the Elements tool and select element.

Step 4: Select the css selector that will represent the main landmark for the page.

Step 5: Click on ‘roles’ and choose the ‘main’ as the corresponding attribute.

Step 6: Altenatively you can add the ‘main’ role manually clicking on the ‘edit button’. Add 'role="main" on your element.

Step 7: Click rock and roll and that’s it. Your element now represents a Main landmark.

Form

Introduction

Adding an ARIA to make an element a form landmark is pretty simple. An ARIA form landmark does the same functions an HTML form landmark. You need to add the role attribute and set its value to 'form’ as shown in the code sample below:

<div role="form" id="contactInfo" aria-label="Contact information">
...form content...
</div>

Things to Keep in mind when using ARIArole=”form”

1. Do not add role=’form on individual elements such as inputs, text areas, or selects. Instead, you should add it to the HTML element or container that contains all the form elements.

2. Provide all form landmarks with labels. This will allow assistive technology users to understand the purpose of each form on your web page. Labeling techniques to use:

3. Use aria-label when there is no visible heading (h2-h6) in the form content area.

4. Use aria-labelledby to as to associate the visible heading title(s) with the form landmarks on your page using the id/class of the heading.

How to Fix and Implement Form Landmark using Flowy.

Step 1: Determine the section or element in your HTML code that represents the form content area of your web page and is relevant to assistive technologies and user experience.

Step 2: Click on 'Select Element'.

Step 4: Inside the 'Attribute' placeholder, click the 'plus' icon.

Step 5: Navigate to the 'Landmark' tab and select 'Form'

Step 6: Click on the 'Save' button

Step 7: Click on 'Add to Editor'. From the 'Test on Screen' drop-down, select 'Quick Fix'. Click on 'Quick Fix', and that's it.

Additional Resource: Using aria-required for required form fields

Navigation

Introduction

Adding an ARIA to make an element a navigation landmark is pretty simple. An ARIA navigation landmark does the same functions as an HTML navigation landmark. You need to add the role attribute and set its value to ‘navigation’ as shown in the code below.

<div role="navigation" id="navContent">
... website navigation...
</div>

Things to Keep in mind when using role=”navigation”

1. If you have one navigation landmark in your web page, you do not need to provide a label to it.

2. If you have several navigation landmarks on your page, you need to provide a label for each landmark and each label must be unique.

3. Use the 'aria-label’ attribute to provide labels to each navigation item so that assistive technology users can understand the purpose of each item. If a heading element (h2-h6) is present, use aria-labelledby.

How to Fix and Implement Navigation Landmark using Flowy.

Step 1: Determine the section or element in your HTML code that represents the navigation items of your web page, and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element(s) that will identify as the navigation landmark(s)..

Step 3: Click on the Elements tool and select element.

Step 4: Select the CSS selector that represents the navigation landmark(s) for the page.

Step 5: Click on ‘roles’ and choose the ‘navigation’ as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labeling and add ‘aria-label’ to provide a label to your landmark.

Step 7: Click rock and roll and that’s it. Your element now represents a navigation landmark.

Search

Introduction

Adding an ARIA to make an element a search landmark is pretty simple. You need to add the role attribute and set its value to ‘search’ as shown in the code sample below.

<div role="search" id="searchContent">
...search content...
</div>

Things to Keep in mind when using role=”search”

1. When you have a form on a web page that is specifically used for searching purposes, use the "search" landmark for that section instead of the "form" landmark.

2. Provide all search landmarks with labels. This will allow assistive technology users to understand the purpose of each landmark on your web page.

3. Use an aria-label when there is no visible heading (h2-h6) in the search content area.

4. Use an aria-labelledby to as to associate the visible heading title(s) with the search landmarks on your page using the id/class of the heading.

How to Fix and Implement Navigation Landmark using Flowy.

Step 1: Determine the section or element in your HTML code that represents the search content area of your web page, and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element(s) that will identify as search landmark(s).

Step 3: Click on the Elements tool and select element.

Step 4: Select the CSS selector(s) that represent the search landmark(s) for the page.

Step 5: Click on ‘roles’ and choose the ‘search’ as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labelling and add ‘aria-label’ or ‘aria-labelledby’ (depending on your use case).

Step 7: Click rock and roll and that’s it.

Region

Introduction

Adding an ARIA to make an element a section landmark is pretty simple. An ARIA region landmark does the same functions as an HTML section landmark. You need to add the role attribute and set it’s value to ‘navigation’ as shown in the code below.

<div role="navigation" id="regionContent"> ...content for region...
</div>

Things to Keep in mind when using role=”region”

1. Use role=”region” sparingly. Use it only when there is no appropriate landmark role.

2. if a web page has multiple with role="region", each section should have a distinct and unique label. Use ‘aria-label’ or ‘aria-labelledby’ attributes depending on your use case.

How to Fix and Implement Region Landmark using Flowy.

Step 1: Determine the section or element in your HTML code that represents a region, and is relevant to assistive technologies and user experience.

Step 2: Pick the most appropriate element(s) that will identify as an ARIA region landmark(s).

Step 3: Click on the Elements tool and select element.

Step 4: Select the CSS selector that represents the ARIA regions for the page.

Step 5: Click on ‘roles’ and choose the ‘region as the corresponding attribute.

Step 6: Click on ‘ARIA’ for labeling and add ‘aria-label’ or ‘aria-labelledby’ (depending on your use case)

Step 7: Click rock and roll and that’s it. Your element now represents a region landmark.