5️⃣Creating custom ARIA widgets
In this chapter, we will explore how to make custom components accessible and user-friendly for everyone using ARIA with the assistance of Flowy.
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.
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.
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.

Best Accessibility Practices for using role="figure"
role="figure"
Using r
ole="figure"
informs assistive technologies to treat an element as a figure element.Use ARIA
role="figure"
when providing short descriptions of images, illustrations, diagrams, audio, code snippets, video, or other multimedia elements.Use an
aria-label
when there is no visible text caption.Use an
aria-labelledby
when there is a visible text caption.Use
aria-describedby
when the present text has a longer description
How to Fix with Flowy
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.
Identify the appropriate elements for which you want to implement
role="figure"
Click on the Elements tool and select element.
Select the CSS selectors that will represent the ARIA
"figure"
role.Choose the "
role"
and the"figure"
attribute for your selected element(s)Provide an accessible name or description depending on your use case. Use an
aria-label
when there is no visible text caption. Usearia-labelledby
when there is a visible text caption. Usearia-describedby
when the present text has a longer description.Click rock and roll and that’s it!
Sample code for creating a figure element with ARIA
<!-- 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>
Complex Components
These are components involve multiple functionalities, states, or even nested components. These are designed to handle more complex interactions
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.
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.


Best Accessibility Practices for using role="combobox"
role="combobox"
Using
role="combobox"
informs assistive technologies to treat an element as acombobox.
The element with the
role "combobox"
must have the ‘aria-controls’ attribute to communicate to assistive technologies the relationship between thecombobox
and the popup elementThe 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.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
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.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.Click on the Elements tool and select element.
Select the CSS selectors that will represent element(s) with
role=”combobox”
Choose the '
role'
and the ‘checkbox’ attribute for your selected element(s).Choose the
'aria-controls'
attribute to match thedropdown
list or popup item ID attribute.Choose the ‘aria-expanded’ attribute initially set to false. When the
popup/dropdown
element is visible, aria-expanded is set to true.Provide accessible labels(names) with the ‘aria-label’ or ‘aria-labelledby’ attributes so that assistive technologies can understand the purpose of the checkboxes.
Click rock and roll and that’s it.
Sample Code Snippet for Implementing a Combobox Using ARIA.
Combobox Using ARIA.
<!-- 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>
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.

Best Accessibility Practices for a Carousel
The container holding the carousel elements has the
role='region'
if you intend to mark the area as a landmark orrole='group'
if you intend not to mark the content as a landmark region.Provide an accessible label on the carousel container using the "
aria-label"
attribute.Previous and next slide controls(the carousel arrows) must have
role="button"
with atabindex="0"
and an"aria-label"
to indicate its purpose.Use
role="group"
and an ‘aria-label’ attribute on individual slides to know where each slide begins and ends.Use
aria-current="true"
on the button of the slide dot corresponding to the currently active slide so that screen reader users are informed.Provide an accessible label on each of he button of the slide dot using the
‘aria-label
attribute.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
Determine the element(s) on your web page that contain Carousel/slideshow content.
Identify the appropriate elements that will comprise of all the Carousel elements.
Click on the Elements tool and select the appropriate elements
Select the CSS selectors that will do the following: Represent element(s) with
role="region"
orrole=”group”
(depending on importance). This will be the main container holding all the Carousel/Slideshow elements. Represent element(s) withrole="group"
to identify the elements that serve as containers for the individual slides. Represent element(s) withrole="button"
to identify each element serves as the previous and next slide controls (the arrows). Represent element(s) withrole="button"
to identify elements that serve as button of the slide dot(s)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.Provide accessible name using the ‘aria-label’ attribute on the main Carousel container with the
role="region"
,on the individual slide container(s) with therole="group". (Example:slide 1 of 5),
On the individual ‘dot buttons’ with role=”button”. (Example :Go to Slide 1’).Click rock and roll and that’s it.
Sample Code Snippet of a Carousel Using ARIA
<!-- 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>
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”.
Using
role="table"
on an element informs assistive technologies to treat the element as table.An ARIA table must contain
role="rowgroup"
to organize or structure the table's content as needed.An ARIA table must contain
role="row"
on the container holding the ARIA table cells,column headers
, orrow headers.
An ARIA table must contain
role="columnheader"
’. This defines the title or header information for the column.An ARIA table must contain
role="rowheader"
. This defines the title or header information for the column.An ARIA table must contain ‘role=cell’. This Identifies elements containing content for a single cell.
An accessible label/name can be provided with the
'aria-label
' and 'aria-labelledby'
attributes.An ARIA table must have an accessible label/name. This can be provided with the
'aria-label
' or'aria-labelledby'
attributes.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
Determine the element(s) on your web page that hold any form of data that is presented to users.
Identify the appropriate elements that will comprise all the table elements. This includes
rowgroups
,rowheader
,columnheader,
rows
andcells
.Click on the Elements tool and select the appropriate elements.
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) withrole="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.Choose the choose all the
ARIA
roles and their respective attribute(s) as laid out in step number 4 for your selected element(s)Provide accessible name or description depending on your use case. Use
aria-label
when there is no visible text caption. Usearia-labelledby
when there is a visible text caption. Usearia-describedby
if present to provide a description for the table.Click rock and roll and that’s it!
Sample Code Snippet for Creating a Table with ARIA
▼ <!-- 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>
Last updated