# Accessibility Bar Accessibility Bar provides users with quick access to features that enhances usability and inclusivity, such as text resizing, contrast adjustments, screen reader support and other accessibility settings. It helps ensure a more comfortable and accessible experience for users with diverse needs and preferences.s. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accessibility-bar--introduction ## Variants documented in Storybook - DesktopWide: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accessibility-bar--desktopwide - DesktopFluid: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accessibility-bar--desktopfluid ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Accessibility Bar. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Desktop Fluid — Desktop Fluid Layout HTML: ```html ``` React: ```jsx import React from 'react'; const AccessibilityBarExample1Demo = () => ( <> {/* Variant: Accessibility Bar - Desktop Fluid Layout */} ); export default AccessibilityBarExample1Demo; ``` Angular: ```html ``` ### 2. Desktop Wide — Desktop Wide Layout HTML: ```html ``` React: ```jsx import React from 'react'; const AccessibilityBarExample2Demo = () => ( <> {/* Variant: Accessibility Bar - Desktop Wide Layout */} ); export default AccessibilityBarExample2Demo; ``` Angular: ```html ``` ### 3. Introduction — Introduction HTML: ```html

Components

Accessibility Bar

Accessibility Bar provides users with quick access to features that enhances usability and inclusivity, such as text resizing, contrast adjustments, screen reader support and other accessibility settings. It helps ensure a more comfortable and accessible experience for users with diverse needs and preferences.s.

Implementation Showcase

Visual demonstration of the accessibility bar configurations supported by the design system.

Desktop Wide

Desktop Fluid

CSS Class Reference

Accessibility Bar Classes

Main container ux4g-topbar

Wide layout ux4g-topbar-wide

Content wrapper ux4g-topbar__wrap

Flag icon india-flag

Skip to content link ux4g-topbar__skip

Control group ux4g-topbar__group

Icon button ux4g-topbar__iconbtn

Select dropdown wrapper ux4g-topbar__select

Select button ux4g-topbar__selectbtn

``` React: ```jsx import React from 'react'; const AccessibilityBarExample3Demo = () => ( <>

Components

Accessibility Bar

Implementation Showcase

Visual demonstration of the accessibility bar configurations supported by the design system.

{/* Desktop Wide */}

Desktop Wide

{/* Desktop Fluid */}

Desktop Fluid

CSS Class Reference

{/* Classes */}

Accessibility Bar Classes

Main container ux4g-topbar

Wide layout ux4g-topbar-wide

Content wrapper ux4g-topbar__wrap

Flag icon india-flag

Skip to content link ux4g-topbar__skip

Control group ux4g-topbar__group

Icon button ux4g-topbar__iconbtn

Select dropdown wrapper ux4g-topbar__select

Select button ux4g-topbar__selectbtn

); export default AccessibilityBarExample3Demo; ``` Angular: ```html

Components

Accessibility Bar

Implementation Showcase

Visual demonstration of the accessibility bar configurations supported by the design system.

Desktop Wide

Desktop Fluid

CSS Class Reference

Accessibility Bar Classes

Main container ux4g-topbar

Wide layout ux4g-topbar-wide

Content wrapper ux4g-topbar__wrap

Flag icon india-flag

Skip to content link ux4g-topbar__skip

Control group ux4g-topbar__group

Icon button ux4g-topbar__iconbtn

Select dropdown wrapper ux4g-topbar__select

Select button ux4g-topbar__selectbtn

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.