# Creating custom ARIA widgets

We will begin by demonstrating how to use Flowy on simple components and then proceed to complex components.

### Simple Components 

These components are "simple" in that they typically serve a single, specific function and are easy to understand and integrate.

{% tabs %}
{% tab title="Buttons" %}

#### Introduction

A `button` element is typically used to trigger an action when activated by a user. Think of a button as a remote for doing cool stuff but cool stuff on a website.

#### Best Practices for Accessible Buttons:

1. Use a `button` for triggering actions such as submitting a form, opening a `dialog`, canceling an action, showing and hiding elements, inserting new information,or displaying information.
2.  Adding `role="button"` to an element informs assistive technologies to treat the element as a button.
3.  Keyboard support (`enter` and `space` keypress) must be provided especially when used on generic elements such as `divs` or `spans`. 
4. Ensure to add `tabindex="0"` on generic elements that have the `role="button"` so that they can receive keyboard focus and also appear in the tab order.
5. Elements with `role="button"` must have labels to identify them. This helps users who rely on assistive technologies to understand the purpose of the button:
6. Use aria-label to provide accessible labels to a button element or elements with `role="button"`  

How to Fix with Flowy

1. Determine the elements in your web page that will require to perform specific actions such as such as submitting forms, triggering navigation, triggering hidden content, initiating downloads, or executing JavaScript functions.
2.  Identify the appropriate elements for which you want to enable 'button' functionalities.
3.  Click on the Elements tool and select element.
4. &#x20;Select the CSS selectors that will represent the `<button>` elements for your web page
5. &#x20;Choose the attribute `<button>`, click rock and roll and  that’s it.

Sample Code Implementing Button Element Using ARIA

{% code overflow="wrap" %}

```html

<!-- Using aria-label on button or elements with role="button"--> 
<button type="button" aria-label="Add to Cart"></button>
<div role="button" tabindex="0" aria-label="Close"> X </div>
<span role="button" tabindex="0" aria-label="Save User Interface"> Save UI </span>
```

{% endcode %}

&#x20;

<br>
{% endtab %}

{% tab title="Links" %}

#### Introduction

A link `<a>` is an interactive element that allows you to navigate from one web page to another, an external document ,or to a different section within the same web page.

#### Best Practices for Accessible Links

1. &#x20;Links should have clear descriptions that tell users where they'll go when they click them. This provides context and helps users understand the link's purpose before they click.
2. &#x20;Avoid the use of terms such as ‘View here’, ‘Click here’, ‘more information’ or ‘read here’. If there isn't enough information around the link, people using assistive technologies may have trouble understanding the purpose of the link.
3. Adding `role=”link”` on elements  informs assistive technologies to treat the element as a link
4. Keyboard support(enter key to activate a link) must be provided especially when used on generic elements such as`divs` and `spans.`
5. Provide a clear visual focus indication for links when they receive keyboard focus.
6. &#x20;If the link text is not clear enough, you can use `"aria-label"` attribute to add more information. This provides context for users relying on assistive technologies to understand where the link will lead them or what it does.
7. Use `aria-label` to provide accessible labels to link elements or provide additional context for users relying on assistive technology.

**How to Fix with Flowy**

1. &#x20;Determine the elements in your web page that will require users to click, or tab to perform specific actions such as navigating from one web page to another, navigating to an external document, or to a different section within the same web page
2. &#x20;Identify the appropriate elements for which you want to enable`'link'`functionalities.
3. Click on the Elements tool and select element.
4. &#x20;Select the CSS selectors that will represent the link `<a>` elements for your web page
5. &#x20;Choose the attribute `<a>` (link), click rock and roll and that’s it.

Code Sample for Implementing Links with ARIA

{% code overflow="wrap" %}

```html
<!-- Using aria-label on link or elements with role="link" -->|
<a href="#" aria-label="Read more about Flowy"> Read More </a>
<div role="link" tabindex="0" aria-label="View more details about flowy"> View More 
</div>
```

{% endcode %}

<br>
{% endtab %}

{% tab title="Lists" %}

#### Introduction

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read and understand. Lists are like tidy to-do lists for websites. They keep things organized and easy to follow, like putting your similar items in pairs.

#### Best Practices for Accessible Lists

1. Use `<ul>` when the order of the items does not matter&#x20;
2. Use `<ol>` for when you want to show information in a specific sequence. Example recipe, steps, or instructions.
3. &#x20;Avoid using lists for layout purposes. Lists should only be used when representing related items or groups of content.
4. Avoid making paragraphs that look like lists using bullets symbols or numbers. Instead,  format the text content as an `<ul>` or `<ol>` depending on your use case.
5. &#x20;Adding `role="list"`(to parent element) and `role="listitem"`(to children elements) informs assistive technology to treat the element as a `list` of items. However, this does not differentiate between unordered`<ul>` or ordered`<ol>` lists.

#### How to Fix with Flowy

1. Determine the elements on your web page that need to be grouped together to associate related pieces of information clearly.&#x20;
2. Identify the appropriate elements for which you want to enable structure as list and `listitem.`
3. &#x20;Click on the Elements tool and select element.
4. &#x20;Select the css selectors that will represent the `list` (parent item) and `listitem` (child elements)&#x20;
5. Choose the ‘role’  and attribute \<list> for the parent item and `<listitem>` for the child element.
6. &#x20;Click rock and roll and that’s it.

#### Sample code for Implementing ARIA list

{% code overflow="wrap" %}

```html
<!-- using ARIA --> <div role="list">
<div role="listitem"> Monday </div> 
<div role="listitem">Tuesday</div> 
</div>
```

{% endcode %}

\
&#x20;
{% endtab %}

{% tab title="Alerts" %}

#### Introduction

The alert role is used to communicate important information to assistive technologies that are available for a specific period of time. Think of an alert role like an alarm, making sure important information reaches the you promptly so that you can take the necessary actions right away.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FXEJykhbKRf7TylNTeOfi%2Falert.png?alt=media&#x26;token=87f626f6-4ad5-4bae-9d3f-7a15ec83f898" alt="An sample image demonstrating an example of an alert component. The alert text reads &#x27; Your session will expire in 1 minute&#x22;"><figcaption><p>An example of an Alert Component</p></figcaption></figure>

#### Best  Accessibility Practices for using `role="alert"`&#x20;

1. Use  the "`alert"` attribute for information that requires the user's immediate attention. For example, a login session that is about to expire or a lost connection.
2. &#x20;Using `role="alert"` informs assistive technologies to treat an element as an ‘alert’ event.&#x20;
3. Avoid using "`alert"` on interactive contents (such as links or buttons). Use only on text content.
4. The `alert role` is added to the element containing an alert message.
5. The `alert role` does not require any focus management or user interaction.

#### How to Fix with Flowy

1. &#x20;Determine the element(s) on your web  page that need to communicate time-sensitive/important information.
2. Identify the appropriate elements that contain text content that requires a user’s immediate attention.
3. &#x20;Click on the Elements tool and select element.
4. Select the CSS selectors that will represent element(s) with `role="alert"`
5. Choose the  "`role"` and the `"alert"` attribute for your selected element(s)
6. Click rock and roll and that’s it.&#x20;

#### Sample code for implementing alert component with ARIA.

{% code overflow="wrap" %}

```html
<div role="alert">
    Your log in session will expire in 1   minute 
</div>
```

{% endcode %}

<br>
{% endtab %}
{% endtabs %}

<br>

<br>

{% tabs %}
{% tab title="Figure" %}
Introduction

The `figure role` attribute can be utilized in situations where an image, illustration, or diagram has a caption represented by a `'p'`, `'span'`, or `'div'` element.&#x20;

Think of it like a label that informs assistive technology that ‘Hey this is a diagram or picture that includes a short description for the image so that users can understand what it represents.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FWJSnpMk6VlRuYhKq8yzO%2FGroup%20427319480.jpg?alt=media&#x26;token=5de97951-13df-4b21-968e-3ae8a8116f22" alt=""><figcaption><p>Planet Earth</p></figcaption></figure>

#### Best  Accessibility Practices for using `role="figure"`

1. &#x20;Using r`ole="figure"` informs assistive technologies to treat an element as a figure element.
2. &#x20;Use ARIA `role="figure"` when providing short descriptions of images, illustrations, diagrams, audio, code snippets, video, or other multimedia elements.&#x20;
3. &#x20; Use an `aria-label` when there is no visible text caption.
4. &#x20;Use an `aria-labelledby` when there is a visible text caption.
5. &#x20;Use `aria-describedby` when the present text has a longer description

#### How to Fix with Flowy

1. &#x20;Determine the multimedia (images, code snippets, or diagrams) elements on your web page that need to be grouped together to associate related pieces of information clearly.&#x20;
2. &#x20;Identify the appropriate elements for which you want to implement  `role="figure"`
3. &#x20;Click on the Elements tool and select element.
4. &#x20;Select the CSS selectors that will represent the ARIA `"figure"` role.
5. &#x20;Choose the  "`role"` and the `"figure"` attribute for your selected element(s)
6. &#x20;Provide an accessible name or description depending on your use case. Use an `aria-label` when there is no visible text caption. Use `aria-labelledby` when there is a visible text caption.  Use `aria-describedby` when the present text has a longer description.
7. Click rock and roll and that’s it!

#### Sample code for creating a figure element with ARIA

{% code overflow="wrap" %}

```html
<!-- ARIA figure using aria-label -->
<div role="figure" aria-label="Planet earth known to support life "> <img src="earth.jpg" alt="A satelite view of Earth">
</div>
<!-- ARIA figure using aria-labelledby -->
<div role="figure" aria-labelledby="figure1">
<img src="earth.jpg" alt="A satelite view of Earth">
<p id="figure1">Planet earth known to support life </p> </div>
<!-- ARIA figure using aria-describedby -->
<div role="figure" aria-labelledby="">
<img src="earth.jpg" alt="A satellite view of Earth">
surface is
<p id="figure1">Planet Earth known to support life. It's divided into seven continents: Asia, Africa, North America, South America, Antarctica, Europe, and Australia</p>
</div>
```

{% endcode %}

<br>
{% endtab %}

{% tab title="Progress Bar" %}
Introduction

The progress bar role defines an element that displays the progress status for tasks that take a certain amount of time to complete. This ARIA role is like a progress navigator, letting you know exactly how far you've come and how much further you have to go, "You're 50% there! Keep going!".

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FYwtJgGr39IRB21RdvJY4%2Fprogressbar.png?alt=media&#x26;token=c3a73787-940b-408e-a38e-3042a7868134" alt="A progress bar showing 50% completion, marked with a blue color."><figcaption><p>An example of an ARIA progress bar component.</p></figcaption></figure>

#### Best  Accessibility Practices for using `role="Progress"`

1. &#x20;Using `role="progress"` informs assistive technologies that an element presents the progress status for tasks.
2. Use the `aria-valuenow` attribute to indicate the current value of the progress bar. This attribute is mandatory.
3. Use the `aria-valuemin` to indicate the minimum value of the progress bar. This attribute is optional.
4. &#x20;Use the `aria-valuemax` to indicate the maximum value of the progress bar. This attribute is optional.
5. Ensure to implement `role='status'` and `aria-atomic='true'` so that assistive technologies will automatically announce any updates to the status.&#x20;
6. &#x20;Use the aria-label attribute when the title is not visible.
7. &#x20;Use the `aria-labelledby` attribute when there is visible text to provide an accessible label to the ARIA progress bar.

#### Sample Code for Creating a Progress Bar with ARIA

{% code overflow="wrap" %}

```html

<!-- Using aria-label -->
<div role="progressbar" aria-valuenow="50" aria-label="Loading: 50%"
role="status" aria-atomic="true"></div>
<!-- Using aria-labelledby -->
<div role="progressbar" aria-valuenow="75" aria-labelledby="progress-label" role="status" aria-atomic="true"></div>
<p id="progress-label" class="sr-only">Uploading: 75% complete</p>
```

{% endcode %}

<br>
{% endtab %}

{% tab title="Radio and Radiogroup" %}

#### Introduction

The ARIA `radiogroup` is a role given to a group of ARIA radio buttons. On the other hand, an ARIA radio element allows users to make only one selection at a time.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FQkd3sxcEIBdteB45bDAp%2Fradio.png?alt=media&#x26;token=bbd5220f-b526-46b5-93d8-0fa1b708566d" alt="An example of ARIA radio group content. The content reads &#x22;What is your favorite color?&#x22;This is followed by two options ,&#x27;purple and Aubergine&#x27;. The option &#x27;purple is already selected."><figcaption><p>An example of an ARIA radio group component.</p></figcaption></figure>

Best  Accessibility Practices for using `role=”radiogroup”` and  `role=”radio”`

1. Using `role='radiogroup'` informs assistive technologies of the presence of a  set of related radio buttons.
2. Using `role=”radio”` informs assistive technologies to treat the elements as radio buttons.
3. The 'aria-checked' attribute, set to true or false, must be added to individual radio buttons. This will inform assistive technologies of the selected or unselected states.
4. The `radiogroup` must have an accessible name.It can be achieved through a visible label referenced by aria-labelledby or a label specified with aria-label
5. Use aria-describedby attribute to reference elements providing additional information about the `radiogroup.`
6. Tabindex `(tabindex=”0”)` must be implemented to ensure the elements are focusable and are included in the tab order of your website.
7. Ensure keyboard support: The space key checks or unchecks the button. The Right Arrow or Down Arrow moves focus to the next radio button, and the  Left Arrow or Up Arrow moves focus to the previous radio button.

#### How to Implement with Flowy

1. &#x20;Determine the elements in your page that provide ‘radio’ button functionalities..
2. &#x20;Identify the appropriate elements for which you want to implement  `role=’"radiogroup"`  and `role="radio".`
3. &#x20;Click on the Elements tool and select element.
4. &#x20;Select the CSS selectors that will represent the ARIA "`radiogroup"` and ‘ARIA radio buttons’.
5. Choose the  ‘role’ and the attribute  "`radiogroup"` attribute for element(s) serving as a container for the radio buttons.
6. &#x20;Choose the  "`role"` and the attribute  "`radio"` for element(s) serving individual radio buttons.
7. Provide an accessible name  or description depending on your use case. Use an `aria-label` when there is no visible text caption.  Use `aria-labelledby` when there is a visible text caption. Use `aria-describedby` when the present text has a longer description.
8. Click rock and roll and that’s it.

#### Sample Code for Implementing an ARIA radiogroup and radio

{% code overflow="wrap" fullWidth="true" %}

```html

<!--ARIA radiogroup and radio -->
<div role="radiogroup" aria-labelledby="question">
<div id="question">What is your favorite color?/div> <div id="radioGroup">
<span id="colorOption_0" tabindex="0" role="radio" aria-
checked="true"
aria-labelledby="purple"></span>
<span id="purple">Purple</span>
<span id="colorOption_1" tabindex="-1" role="radio" aria-
checked="false"
</div>
aria-labelledby="aubergine"></span>
<span id="aubergine">Aubergine</span>
</div>
```

{% endcode %}

<br>
{% endtab %}
{% endtabs %}

### Complex Components

These are components involve multiple functionalities, states, or even nested components. These are designed to handle more complex interactions

{% tabs %}
{% tab title="Combobox" %}
A combobox is a component/widget that allows users to select a value from a predefined set list of options presented in a dropdown list or popup item. Imagine a `combobox` as a magical box that lets you choose something from a bunch of cool options.&#x20;

A `combobox` can take the form of a widget that supports editing or typing, or it can be in the form of a widget that only displays content. A common component is the  `calender` or `datepicker.`

<div><figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FQTWfPf9XSWA4XKMm4KZg%2Fcombobox2.png?alt=media&#x26;token=5dad8782-eccf-4f58-aeba-8bf11a787891" alt="A screenshot of a combobox sample. The component has a search functionality and dropdown functionality that allows users to type or select items from the dropdown."><figcaption><p>A sample combobox component</p></figcaption></figure> <figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2Ffa9LKVlpywFnA9jwthpe%2FGroup%20427319478.jpg?alt=media&#x26;token=7ceef9c9-561c-4701-9b1c-2d43d8549200" alt="" width="375"><figcaption><p>A sample combobox component</p></figcaption></figure></div>

#### Best  Accessibility Practices for using `role="combobox"`

1. Using `role="combobox"` informs assistive technologies to treat an element as a `combobox.`
2. &#x20;The element with the `role "combobox"` must have the ‘aria-controls’ attribute to communicate to assistive technologies the relationship between the `combobox` and the popup element
3. The element with the `role "combobox"` must have an " `aria-expanded"` attribute to communicate to assistive technologies the shown and hidden states of the popup elements.
4. Tabindex (tabindex=”0”) must be implemented to ensure the elements are focusable and are included in the tab order of your website.

**How to Fix with Flowy**

1. Determine the element(s) on your web page that requires a user to select a value from a predefined set list of options presented in a `dropdown` list or popup item.
2. Identify the appropriate elements that contain items that users can select a value from a predefined set list of options presented in a  `dropdown` list or popup item.
3. Click on the Elements tool and select element.
4. Select the CSS selectors that will represent element(s) with `role=”combobox”`
5. Choose the  '`role'` and the ‘checkbox’ attribute for your selected element(s).
6. &#x20;Choose the  `'aria-controls'` attribute to match the `dropdown` list or popup item ID attribute.&#x20;
7. Choose the ‘aria-expanded’ attribute initially set to false. When the `popup/dropdown` element is visible, aria-expanded is set to true.
8. Provide accessible labels(names) with the ‘aria-label’ or ‘aria-labelledby’ attributes so that assistive technologies can understand the purpose of the checkboxes.
9. Click rock and roll and  that’s it.

#### Sample Code Snippet for Implementing a `Combobox Using ARIA.`

{% code overflow="wrap" %}

```html

<!-- ARIA combobox -->
<input type="text" role=" combobox" aria- expanded="false" aria-autocomplete="list" aria- controls="exl-grid" id="ex1-input">
<div aria-labelledby="cb-label" id="grid"></div>
```

{% endcode %}
{% endtab %}

{% tab title="Accordions" %}
An accordion is a component that helps organize content in a collapsible and expandable manner. Just like when you're trying to store a large musical instrument in a tiny closet, an accordion component allows you to tuck away a lot of content neatly, conserving precious space on your web page.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FeYUXnmbuSpgJfa2p4leI%2Faccordions.png?alt=media&#x26;token=86430468-7325-4bbd-9c60-f61b2ed8813b" alt="A sample accordion with collapsible panels. The accordion consists of three headings titled &#x27;Heading 1,&#x27; &#x27;Heading 2,&#x27; and &#x27;Heading 3.&#x27; Each heading is succeded by some &#x27;Lorem Ipsum&#x27; texts" width="563"><figcaption><p>A sample Accordion component</p></figcaption></figure>

#### Best Accessibility Practices for an Accordion

1. &#x20;Ensure that the button element is nested inside the header element.
2. Tabindex `(tabindex=”0”`) must be implemented to ensure the elements are focusable and are included in the tab order of your website.
3. &#x20;Ensure that each button within an accordion header, is associated with its corresponding panel by using aria-controls.
4. &#x20;Ensure that each button has the aria-expanded attribute to communicate the visibility and hidden states of the panel.

#### How to Fix with Flowy

1. Determine and identify the element(s) on your web page will serve as the accordion headers, buttons and the corresponding `<div>` elements will be the content panels that expand and collapse.
2. &#x20;Click on the Elements tool and select element.
3. Select the CSS selectors that will represent element(s) for headings, buttons, and content panels.
4. Choose  each `role` for the `heading` and `button` for your selected element(s). For the heading element(s): use `'role'` with the value `'heading`', and specify the heading level using the `'aria-level'` attribute (e.g., `'aria-level="2"`' represents heading level 2).
5. For button element(s): use ‘role’ with the value of `button`, and a tabindex=”0”. Select the ‘aria-expanded’ attribute and set its initial value to false. Select the`’aria-controls’` attribute and set its value to the id content of the panel.
6. &#x20;Provide accessible labels(names) with the `‘aria-labelledby’` attribute referencing the id of the button(s)
7. Click rock and roll and that's it!&#x20;

Sample Code Snippet for Implementing an Accordion with ARIA.

{% code overflow="wrap" %}

```html

<!-- Accordion code structure using ARIA-->
<div role="heading" aria-level="2">
<span role="button" tabindex="0" id="accordion-header-1" aria-
expanded="true"
aria-controls="accordion-panel-1">
Your title here
</span>
</div>
<div id="accordion-panel-1" role="region" aria-labelledby="accordion-
header-1">
<p>Accordion content here...</p>
</div>
<div>
```

{% endcode %}
{% endtab %}

{% tab title="Site Navigation" %}
Introduction

A site navigation is a list of links that allows the user to navigate between the pages of the website.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FxrXXLyiH3jHOuL4cpkR7%2Fsite%20navigation.png?alt=media&#x26;token=20beff57-2005-4a1d-b9e7-b0855ccd195e" alt="Equally site navigation consisting of top level links namely products, solutions, pricing and resources."><figcaption><p>Site navigation for Equally AI.</p></figcaption></figure>

#### Best Accessibility Practices for a Site Navigation Component

1. The container holding navigation elements has an ARIA `role='navigation'` to notify assistive technologies that it is a navigation item
2. Ensure Assistive Technologies announces the number of list items in the navigation component.
3. &#x20;The current active page must be highlighted using `aria-current="page"`.
4. If you have several navigation components on your page, use `aria-label` or `aria-labelledby` to make them distinguishable.
5. For navigation items with drop-downs, the ’aria-expanded’ attribute must be present to inform assistive technologies of the expanded(visibility) or collapsed(hidden) state of the sub-navigation.
6. Tabindex (`tabindex="0"`) must be implemented to ensure the elements are focusable and are included in the tab order of your website.

How to Fix with Flowy

1. Determine the element(s) on your web page that contain lists of links for navigating across a website.
2. Identify the appropriate elements that will comprise of all the navigation elements.
3. Click on the Elements tool and select the appropriate elements
4. Select the css selectors that will do the following: Represent element(s) with role=”navigation” This will be the main container lists of navigation links. Represent element(s) with `role="lists"` to identify the element(s) that serve as containers for `list` items. Represent element(s) with `role="listitem"` to identify each element serve as the list item. Represent element(s) with role=” link” to identify elements that serve as the individual link elements.
5. For navigation elements that have `dropdown` sub-navigation(menu), the parent element should have `role="button"` and "`aria-expanded"` and ‘aria-controls attribute.
6. Choose all the ARIA roles and their respective attribute(s) as laid out in step number 4 for your selected element(s). All elements with `'role=button'` must have `'tabindex=0`' to be focusable and in the natural tab order.
7. &#x20;Provide an accessible name using "`aria-label"` attribute on: On the main navigation container with the `role="navigation". Example:aria-label="Main".`
8. Click rock and roll and that’s it.

Sample Code Snippet for Implementing Site Navigation with ARIA

{% code overflow="wrap" %}

```html

<div id="mainnav" role="navigation">
<div role="list">
<div role='listitem">
<span role="link" tabindex="0" href="/home">Home</span> </div>
<div role='listitem'>
<span role="link" tabindex="0" href="/about-us" aria- current="page">About us</span>
</div>
<div role='listitem'>
<span role="link" tabindex="0"
href="/pricing">Pricing</span>
</div>
</div>
</div>
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Carousel/Slideshow" %}
Introduction

The carousel is a slideshow that shows different content one after the other. With a Carousel , users can use controls to switch between slides in the carousel, hiding the current slide and showing the next or previous one as they "rotate" through the content.

<div align="center"><figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FoiCvKAC7NDFAAT8yMKnt%2FGroup%20427319479.jpg?alt=media&#x26;token=5c619d4f-efd8-406b-91cf-2c339f5269a7" alt=""><figcaption><p>A sample Carousel Component</p></figcaption></figure></div>

#### Best Accessibility Practices for a Carousel

1. The container holding the carousel elements has the `role='region'` if you intend to mark the area as a landmark or `role='group'` if you intend not to mark the content as a landmark region.
2. Provide an accessible label on the carousel container using the "`aria-label"` attribute.
3. Previous and next slide controls(the carousel arrows) must have `role="button"` with a `tabindex="0"` and an `"aria-label"` to indicate its purpose.
4. &#x20;Use `role="group"`and an ‘aria-label’ attribute on individual slides to know where each slide begins and ends.
5. &#x20;Use `aria-current="true"` on the button of the slide dot corresponding to the currently active slide so that screen reader users are informed.
6. Provide an accessible label on each of he button of the slide dot using the `‘aria-label` attribute.
7. &#x20;Ensure keyboard support: The "`tab"` key to move through interactive ‘dot’ buttons. Enter and space to display the next or previous slide in the carousel/slideshow.

#### How to Fix with Flowy

1. Determine the element(s) on your web page that contain Carousel/slideshow content.
2. Identify the appropriate elements that will comprise of all the Carousel elements.
3. Click on the Elements tool and select the appropriate elements
4. Select the CSS selectors that will do the following: Represent element(s) with `role="region"` or `role=”group”` (depending on importance). This will be the main container holding all the Carousel/Slideshow elements. Represent element(s) with `role="group"` to identify the elements that serve as containers for the individual slides. Represent element(s) with `role="button"` to identify each element serves as the previous and next slide controls (the arrows). Represent element(s) with `role="button"` to identify elements that serve as button of the slide dot(s)
5. Choose all the ARIA roles and their respective attribute(s) as laid out in step number 4 for your selected element(s). All elements with 'role=button' must have `'tabindex=0'` to be focusable and in the natural tab order.
6. Provide accessible name using the ‘aria-label’ attribute on the main Carousel container with the `role="region"` ,on the individual slide container(s) with the `role="group". (Example:slide 1 of 5),`On the individual ‘dot buttons’ with role=”button”. (Example :Go to Slide 1’).
7. Click rock and roll and  that’s it.

Sample Code Snippet of a Carousel Using ARIA

{% code overflow="wrap" %}

```html

<!-- Carosel using ARIA -->
<div class="carousel" role='region' aria-label="carousel"> <div role="button" tabindex="0" aria-label="previous slide"> < </div>
<div class="slide" role="group" aria label="slide 1 of 2"> Slide content here...
</div>
<div class="slide" role="group" aria-label="slide 2 of 2"> Slide content here ..
</div>
<div role="button" tabindex="0" aria-label="next slide"> > </div>
<div class="dot-button">
<div role="button" tabindex="0" aria-label="previous slide"> Go to slide 1</div>
<div role="button" tabindex="0" aria-label="previous
slide"> Go to slide 2</div>
</div>
```

{% endcode %}

<br>

<br>
{% endtab %}

{% tab title="Tablist" %}
Introduction

Tabs consist of multiple sections of content called tab panels. These panels display one section of content at a time. Each tab panel corresponds to a tab element, which, when activated, reveals the respective panel.Tabs are like a fancy restaurant menu where each tab panel displays a delicious dish.&#x20;

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2Fn9MpGQkXaOpb74pOzdk5%2Ftab.png?alt=media&#x26;token=0248aaa6-8fb6-4fa9-b0f4-54486d67de64" alt="Sample tab component consisting of four panels showing Equally services namely: File Accessibility, Media Accessibility, Mobile App Testing and VPAT testing"><figcaption><p>Sample Tab panels</p></figcaption></figure>

Best  Accessibility Practices for a Tab component

1. Using `role="tablist"` on an element informs assistive technologies to treat the element as `tablist`.
2. The container holding the  set of tabs has the `role="tablist"`.
3. Individual tab elements have `role="tab"`.
4. Elements with `role="tab"` must have the ‘aria-controls’ attribute to refere to its associated tabpanel.
5. The element that contains content has the `role="tabpanel"`.
6. &#x20;Provide accessible names to the element with the `role="tablist"` with using aria-label or aria-labelledby techniques.
7. The current active tab element must be highlighted using `aria-selected="true".`
8. Every tabpanel has a name  that is easily accessible through "aria-labelledby," referring to the tab element it is associated with.

**How to Fix with Flowy**

1. Determine the element(s) on your web page that display multiple but display content one at a time
2. Identify the appropriate elements that will comprise the`tablist` component
3. Click on the Elements tool and select the appropriate elements
4. Select the css selectors that will do the following: Represent element(s) with `role="tablist"` This will be the main container for the set of tabs.Represent element(s) with `role="tab"` to identify  the element(s) that serves tab elements. Represent element(s) with `role="tabpanel"`to identify each element that contains content for the panel.&#x20;
5. Choose all the ARIA roles and their respective attribute(s) as laid out in step number 4 for your selected element(s).
6. Provide accessible name using ‘aria-label’ attribute on element with the role=”tablist” and aria-labelledby on the element with the role=”tabpanel”
7. Click rock and roll and  that’s it.

Sample Code Snippert of Implementing a Tablist using ARIA

<br>
{% endtab %}

{% tab title="Dialog" %}
Introduction

It typically appears as a window or popup that temporarily interrupts the normal flow of an application to capture the user's attention or gather specific information. One important thing to keep in mind is that when a dialog is active, users cannot interact with contents outside the dialog.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2F9QR9LUaClW0DngemPMBR%2Fdialog.png?alt=media&#x26;token=d4ff685c-0d15-4d24-9bd9-bcc995ba322d" alt="A screenshot of sample dialog component. The dialog is a signup from for equally. The form contain three input fields: first name, last name and email."><figcaption><p>A sample Dialog Component</p></figcaption></figure>

Best Accessibility Practices for using `role="dialog"`

* Using `role="dialog"` on an element informs assistive technologies to treat the element as a dialog.
* Ensure focus moves to the first interactive element when the `dialog` is open.
* Ensure keyboard support for the component. The ‘tab’ key moves focus to the next interactive element, "`shift + tab"` moves focus to the previous interactive element, and the `"Esc"`  key closes the dialog.
* An accessible label/name can be provided with the '`aria-label'` and `'aria-labelledby'` attributes.
* Ensure that users cannot interact with content outside an active `dialog.`

#### How to Fix with Flowy

1. Determine the element(s) on your web page that appear as an interactive window or popup component separate from the main content.
2. Identify the appropriate elements that are `dialog` elements
3. Click on the Elements tool and select element.
4. Select the CSS selectors that will represent element(s) with `role="dialog"`
5. Choose the  "`role"` and the "`dialog"` attribute for your selected element(s)
6. &#x20;Provide accessible labels (names) using the 'aria-labelledby' attribute and reference the title element inside the dialog. This will enable assistive technologies to understand the purpose of the dialog
7. &#x20;Click rock and roll and that’s it!&#x20;

#### Sample Code Snippet for Implementing a Dialog Component with ARIA

{% code overflow="wrap" %}

```html

<div role="dialog"
aria-labelledby="dialog1Title">
<h2 id="dialog1Title">Equally Subscription Form</h2>
<!--form contents -->
</div>

```

{% endcode %}

### &#x20;<a href="#dialog1title" id="dialog1title"></a>

<br>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Table" %}

#### Introduction

ARIA table is a static table-like structure without interactive features, and its cells are not focusable or selectable.

#### Best  Accessibility Practices for using role=”table”.

1. Using `role="table"` on an element informs assistive technologies to treat the element as table.
2. &#x20;An ARIA table must contain `role="rowgroup"` to organize or structure the table's content as needed.
3. &#x20;An ARIA table must contain `role="row"` on the container holding the ARIA table cells, `column headers`, or `row headers.`
4. An ARIA table must contain `role="columnheader"`’. This defines the title or header information for the column.
5. An ARIA table must contain `role="rowheader"`. This defines the title or header information for the column.
6. An ARIA table must contain ‘role=cell’. This Identifies elements containing content for a single cell.
7. An accessible label/name can be provided with the `'aria-label`' and '`aria-labelledby'` attributes.
8. An ARIA table must have an accessible label/name. This can  be provided with the `'aria-label`'  or `'aria-labelledby'` attributes.
9. &#x20;In the event a description of an ARIA table is present, use the `'aria-describedby`' attribute as a reference to provide a description for the table.

#### How to Fix with Flowy

1. Determine the element(s) on your web page that hold any form of data that is presented to users.
2. Identify the appropriate elements that will comprise all the table elements. This includes `rowgroups`,`rowheader`,`columnheader,` `rows` and `cells`.
3. Click on the Elements tool and select the appropriate elements.
4. Select the CSS selectors that will: Represent element(s) with `role="table"`.This will be the main container   holding all the table contents. Represent element(s) with `role="rowgroup"` to identify  the elements that serve as containers for the table header and table body rows. Represent element(s) with role="row"  to identify each element that contains the cells for a row. Represent element(s) with role="columnheader" to Identify elements that serve as a cell(s) containing a column label. Represent element(s) with role="columnheader" Identifies elements containing content for a single cell.
5. Choose the choose all the `ARIA` roles and their respective attribute(s) as laid out in step number 4 for your selected element(s)
6. Provide accessible name  or description depending on your use case. Use `aria-label` when there is no visible text caption. Use `aria-labelledby` when there is a visible text caption. Use `aria-describedby` if present to provide a description for the table.
7. Click rock and roll and  that’s it!

#### Sample Code Snippet for Creating a Table with ARIA

{% code overflow="wrap" %}

```html


▼ <!-- ARIA Table -->
<div id="table" role="table" aria-label="Table Name" aria- describedby="table_caption">
<div id="table_caption">Table description</div>
<div role="rowgroup">
<div role="row">
<div role="column header">Header 1</div>
<div role="columnheader">Header 2</div>
<div role="column header">Header 3</div> </div>
</div>
<div role="rowgroup">
<div role="row">
<div role="rowheader">Row 1 Header</div> <div role="cell">Row 1 Data 1</div>
<div role="cell">Row 1 Data 2</div> </div>
</div>
</div>
```

{% endcode %}
{% endtab %}

{% tab title="Checkbox" %}

#### Introduction

The `role="checkbox"` is for check-able interactive elements. An element with `role="checkbox"` is comprised of three states namely true(checked) and false(unchecked) Some of the use cases for using aria role of checkbox include multiple selections, agree/disagree selections, task completion, filtering and sorting, and settings and preferences.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2Fa5MClakgfmS95nTuXNRY%2Fcheckbix.png?alt=media&#x26;token=a5c21067-66b6-401b-8305-8be2d25262b7" alt="A screenshot of a sample checkbox component, listing days of the week.  The days displayed are Monday to Thursday with Wednesday being the only day that is checked."><figcaption><p>A sample checkbox listing days of the week</p></figcaption></figure>

#### Best  Accessibility Practices for using `role="checkbox"`

1. Using `role="checkbox"` on an element informs assistive technologies to treat the element as a checkbox.
2. &#x20;Keyboard support must be provided. The "`space"` key must check or unchecked an item.
3. &#x20;Tabindex (`tabindex="0"`) must be implemented to ensure the elements are focusable and are included in the tab order of your website.
4. &#x20;The "`aria-checked"` attribute must be implemented to ensure the checked and unchecked states are communicated to assistive technologies.
5. In cases where the visual text (labels) is missing, To provide accessible names to the elements, aria-label or aria-labelledby attributes can be used.

How to Fix with Flowy

1. &#x20;Determine the element(s) on your web page that requires a user to choose more than one item from a list
2. &#x20;Identify the appropriate elements that contain items that users can select(check)
3. &#x20;Click on the Elements tool and select element.
4. Select the CSS selectors that will represent element(s) with `role="checkbox"`
5. Choose the  `"role"` and the `"checkbox"` attribute for your selected element(s)
6. &#x20;Provide accessible labels(names) with the `"aria-label"` or `"aria-labelledby"` attributes so that assistive technologies can understand the purpose of the component.
7. &#x20;Click rock and roll and that’s it.

Sample Code Snippet for Implementing Checkbox with ARIA

{% code overflow="wrap" %}

```html


 <!-- using ARIA role and aria-label -->
<span role="checkbox" aria-checked="true" tabindex="0" aria-label ="I agree to Equally terms"></span>
<p> I agree to Equally terms </p>
<!-- using ARIA role and aria-labelledby -->
<span role="checkbox" aria-checked="true" tabindex="0" aria- labelledby="cb-label"></span>
<label id="cb-label"> I agree to Equally Terms </label>
```

{% endcode %}

<br>

<br>
{% endtab %}
{% endtabs %}

####