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

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:

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.
Adding role="button" to an element informs assistive technologies to treat the element as a button.
Keyboard support (enter and space keypress) must be provided especially when used on generic elements such as divs or spans.
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.
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:
Use aria-label to provide accessible labels to a button element or elements with role="button"

How to Fix with Flowy

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.
Identify the appropriate elements for which you want to enable 'button' functionalities.
Click on the Elements tool and select element.
Select the CSS selectors that will represent the <button> elements for your web page
Choose the attribute <button>, click rock and roll and that’s it.

Sample Code Implementing Button Element Using ARIA


<!-- 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>

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

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.
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.
Adding role=”link” on elements informs assistive technologies to treat the element as a link
Keyboard support(enter key to activate a link) must be provided especially when used on generic elements such asdivs and spans.
Provide a clear visual focus indication for links when they receive keyboard focus.
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.
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

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
Identify the appropriate elements for which you want to enable'link'functionalities.
Click on the Elements tool and select element.
Select the CSS selectors that will represent the link <a> elements for your web page
Choose the attribute <a> (link), click rock and roll and that’s it.

Code Sample for Implementing Links with ARIA

<!-- 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>

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

Use <ul> when the order of the items does not matter
Use <ol> for when you want to show information in a specific sequence. Example recipe, steps, or instructions.
Avoid using lists for layout purposes. Lists should only be used when representing related items or groups of content.
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.
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

Determine the 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 enable structure as list and listitem.
Click on the Elements tool and select element.
Select the css selectors that will represent the list (parent item) and listitem (child elements)
Choose the ‘role’ and attribute <list> for the parent item and <listitem> for the child element.
Click rock and roll and that’s it.

Sample code for Implementing ARIA list

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

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.

An sample image demonstrating an example of an alert component. The alert text reads ' Your session will expire in 1 minute"

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

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.
Using role="alert" informs assistive technologies to treat an element as an ‘alert’ event.
Avoid using "alert" on interactive contents (such as links or buttons). Use only on text content.
The alert role is added to the element containing an alert message.
The alert role does not require any focus management or user interaction.

How to Fix with Flowy

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

Sample code for implementing alert component with ARIA.

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

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"`

Using role="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. Use aria-labelledby when there is a visible text caption. Use aria-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>

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!".

A progress bar showing 50% completion, marked with a blue color.

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

Using role="progress" informs assistive technologies that an element presents the progress status for tasks.
Use the aria-valuenow attribute to indicate the current value of the progress bar. This attribute is mandatory.
Use the aria-valuemin to indicate the minimum value of the progress bar. This attribute is optional.
Use the aria-valuemax to indicate the maximum value of the progress bar. This attribute is optional.
Ensure to implement role='status' and aria-atomic='true' so that assistive technologies will automatically announce any updates to the status.
Use the aria-label attribute when the title is not visible.
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


<!-- 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>

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.

An example of ARIA radio group content. The content reads "What is your favorite color?"This is followed by two options ,'purple and Aubergine'. The option 'purple is already selected.

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

Using role='radiogroup' informs assistive technologies of the presence of a set of related radio buttons.
Using role=”radio” informs assistive technologies to treat the elements as radio buttons.
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.
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
Use aria-describedby attribute to reference elements providing additional information about the radiogroup.
Tabindex (tabindex=”0”) must be implemented to ensure the elements are focusable and are included in the tab order of your website.
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

Determine the elements in your page that provide ‘radio’ button functionalities..
Identify the appropriate elements for which you want to implement role=’"radiogroup" and role="radio".
Click on the Elements tool and select element.
Select the CSS selectors that will represent the ARIA "radiogroup" and ‘ARIA radio buttons’.
Choose the ‘role’ and the attribute "radiogroup" attribute for element(s) serving as a container for the radio buttons.
Choose the "role" and the attribute "radio" for element(s) serving individual radio buttons.
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.
Click rock and roll and that’s it.

Sample Code for Implementing an ARIA radiogroup and radio


<!--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>

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.

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.

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

Using role="combobox" informs assistive technologies to treat an element as a combobox.
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
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.
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 the dropdown 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.`


<!-- 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>

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.

A sample accordion with collapsible panels. The accordion consists of three headings titled 'Heading 1,' 'Heading 2,' and 'Heading 3.' Each heading is succeded by some 'Lorem Ipsum' texts

Best Accessibility Practices for an Accordion

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

How to Fix with Flowy

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.
Click on the Elements tool and select element.
Select the CSS selectors that will represent element(s) for headings, buttons, and content panels.
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).
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.
Provide accessible labels(names) with the ‘aria-labelledby’ attribute referencing the id of the button(s)
Click rock and roll and that's it!

Sample Code Snippet for Implementing an Accordion with ARIA.


<!-- 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>

Introduction

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

Equally site navigation consisting of top level links namely products, solutions, pricing and resources.

The container holding navigation elements has an ARIA role='navigation' to notify assistive technologies that it is a navigation item
Ensure Assistive Technologies announces the number of list items in the navigation component.
The current active page must be highlighted using aria-current="page".
If you have several navigation components on your page, use aria-label or aria-labelledby to make them distinguishable.
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.
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 contain lists of links for navigating across a website.
Identify the appropriate elements that will comprise of all the navigation 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=”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.
For navigation elements that have dropdown sub-navigation(menu), the parent element should have role="button" and "aria-expanded" and ‘aria-controls attribute.
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 an accessible name using "aria-label" attribute on: On the main navigation container with the role="navigation". Example:aria-label="Main".
Click rock and roll and that’s it.

Sample Code Snippet for Implementing Site Navigation with ARIA


<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>

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 or role='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 a tabindex="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" 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)
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 the role="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

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.

Sample tab component consisting of four panels showing Equally services namely: File Accessibility, Media Accessibility, Mobile App Testing and VPAT testing

Best Accessibility Practices for a Tab component

Using role="tablist" on an element informs assistive technologies to treat the element as tablist.
The container holding the set of tabs has the role="tablist".
Individual tab elements have role="tab".
Elements with role="tab" must have the ‘aria-controls’ attribute to refere to its associated tabpanel.
The element that contains content has the role="tabpanel".
Provide accessible names to the element with the role="tablist" with using aria-label or aria-labelledby techniques.
The current active tab element must be highlighted using aria-selected="true".
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

Determine the element(s) on your web page that display multiple but display content one at a time
Identify the appropriate elements that will comprise thetablist component
Click on the Elements tool and select the appropriate elements
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.
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 using ‘aria-label’ attribute on element with the role=”tablist” and aria-labelledby on the element with the role=”tabpanel”
Click rock and roll and that’s it.

Sample Code Snippert of Implementing a Tablist using ARIA

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.

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

Determine the element(s) on your web page that appear as an interactive window or popup component separate from the main content.
Identify the appropriate elements that are dialog elements
Click on the Elements tool and select element.
Select the CSS selectors that will represent element(s) with role="dialog"
Choose the "role" and the "dialog" attribute for your selected element(s)
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
Click rock and roll and that’s it!

Sample Code Snippet for Implementing a Dialog Component with ARIA


<div role="dialog"
aria-labelledby="dialog1Title">
<h2 id="dialog1Title">Equally Subscription Form</h2>
<!--form contents -->
</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, or row 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 and cells.
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) 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.
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. Use aria-labelledby when there is a visible text caption. Use aria-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>

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.

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.

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

Using role="checkbox" on an element informs assistive technologies to treat the element as a checkbox.
Keyboard support must be provided. The "space" key must check or unchecked an item.
Tabindex (tabindex="0") must be implemented to ensure the elements are focusable and are included in the tab order of your website.
The "aria-checked" attribute must be implemented to ensure the checked and unchecked states are communicated to assistive technologies.
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

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

Sample Code Snippet for Implementing Checkbox with ARIA



 <!-- 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>

PreviousARIA NextNavigation , menus and sub menu

Last updated 2 years ago

Simple Components

Introduction

Best Practices for Accessible Buttons:

Introduction

Best Practices for Accessible Links

Introduction

Best Practices for Accessible Lists

How to Fix with Flowy

Sample code for Implementing ARIA list

Introduction

Best Accessibility Practices for using role="alert"

How to Fix with Flowy

Sample code for implementing alert component with ARIA.

Best Accessibility Practices for using role="figure"

How to Fix with Flowy

Sample code for creating a figure element with ARIA

Best Accessibility Practices for using role="Progress"

Sample Code for Creating a Progress Bar with ARIA

Introduction

How to Implement with Flowy

Sample Code for Implementing an ARIA radiogroup and radio

Complex Components

Best Accessibility Practices for using role="combobox"

Sample Code Snippet for Implementing a Combobox Using ARIA.

Best Accessibility Practices for an Accordion

How to Fix with Flowy

Best Accessibility Practices for a Site Navigation Component

Best Accessibility Practices for a Carousel

How to Fix with Flowy

How to Fix with Flowy

Sample Code Snippet for Implementing a Dialog Component with ARIA

Introduction

Best Accessibility Practices for using role=”table”.

How to Fix with Flowy

Sample Code Snippet for Creating a Table with ARIA

Introduction

Best Accessibility Practices for using role="checkbox"

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

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

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

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

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

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