🧒
Sunbird ED
new release -7.0.0 (Jun 2024)Askdot
release-6.0.0
release-6.0.0
  • Learn
    • Overview
    • Capabilities
      • Learning Apps
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and diverse content
      • Versatile Question Bank
      • Observability
      • Launch Course
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • What is an entity?
        • What is a Program?
        • What is a Project?
        • What is Observation?
        • What is a Survey?
        • What is Observation as a task inside a Project?
      • Product and Developer's Guide
        • Learning apps
          • Workflows
            • Onboarding of Users
            • Discovery of Content
            • Play content
            • Track progress and Earn credentials
            • Interacting / Collaborating
        • Asset Sourcing
        • Organised Collections
        • Discover Content - Digital & Phygital
        • User Engagement
        • Rich and Diverse Content
        • Versatile Question Bank
        • Observability
        • Launch Courses
        • Verifiable Credentials
        • Multi-Channel Chatbot
        • Targeted Programs
        • Manage Learn
          • Overview
          • Component Diagram
          • ML Core Service
          • ML Project Service
          • ML Survey Service
          • ML Report Service
          • ML Analytics Service
    • Tech Overview
      • Design Principles
      • Technical Architecture Diagram
      • Tech Stack
    • Adopters
      • DIKSHA
    • Roadmap
  • USE
    • Getting started
      • Deployment Overview
      • Pre-requisites
      • Install
        • Provision Cloud Infrastructure
        • Setup Jenkins
        • Update Ansible Variables
        • Build, Provision and Deploy
        • Functional Configurations
    • Latest Release - 6.0.1
      • Release notes
      • Updating Sunbird Releases
        • 5.2.0 to 6.0.1
      • Release Calendar 6.0.1
      • Demo of released items
    • Developer Guide
      • Architecture - Component Diagram
      • System Requirements
      • Install Locally
        • SunbirdED Mobile
        • SunbirdED Portal
      • Easy Installer
      • Configuration
        • SunbirdEd Portal
        • Sunbird Mobile
      • Portal
        • Component Diagram
      • Desktop
        • Component Diagram
      • Mobile
        • Component Diagram
        • sunbird-mobile-sdk
        • Sunbird-mobile-app plugins
        • Configurations to setup mobile app
      • Form service
        • Component Diagram
        • Data model
        • API's
      • Manage Learn
        • ML Core Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Project Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Survey Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Report Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Analytics Service
          • Overview
          • Component Diagram
          • Data Model
          • Setup Guide
            • ENV Variables ( Config.ini)
          • Ingestions
          • Folder Structure
          • Report creation and Updation Scripts
          • Deployment Overview
      • UI (User interface)
        • Angular Material
          • Overview
          • Installation
          • Material Icons
          • Components Usage
          • Theming
          • Theme Setup
          • Customization
            • Palette
            • Theme
            • Accessibility
            • Colors
            • Typography
            • Components
              • Buttons
              • Card
              • Toolbar
              • Dialog
              • Menu
          • CC Components
            • Card
            • Chips
            • Expansion Panel
        • Component Style Guide Version 1
          • Accordion
          • Buttons
          • Cards
          • Forms
          • Grid & Layout
          • Labels
          • Modals
          • Pagination
          • Rating
          • Search Box
          • Select Box
          • Tables
          • Tabs
          • Toast messages
          • Tooltip
          • Typography
        • SB-Styles: A Comprehensive Design Resource
        • SB-Themes Repository: Unifying Design Across Platforms
          • Classical Theme in Sunbird-Ed portal
          • Joyful Theme in Sunbird-Ed portal:
      • Reference Apps
        • Independent Libraries
          • Common Consumption Components
          • SunbirdEd Forms
          • Sunbird Client Services
          • Sunbird Styles
          • Sunbird Themes
          • Sunbird Tag Manager
      • API's
      • Admin Dashboard Reports
      • CSP changes
      • Reports
      • Other
        • Minimal forms
        • Telemetry
          • Trackable Collection
        • Platform
        • Learning Apps
    • Learn More
      • Dependencies
      • Specifications
        • SOFIE
        • SOFIE Implementation
  • Engage
    • Discuss
    • Contribute to ED
    • Extend / Contribute to Sunbird
    • Issue tracker/ Create Issue
  • Misc
    • Templates
      • Upgrade Sunbird release document
      • Release Notes
    • Misc Pages
      • Portal - Manage Learn - Reports
      • App - Manage Learn - component diagram
        • Projects
        • Observation & Survey
        • Program
      • Portal - Manage Learn - component diagram
      • Mobile form configurations
      • Content Indexing Flow
      • What are multiple databases used for
      • Course completion, reports and certificate issue
      • How to access Flink UI
      • What are all the flink jobs for
      • How does data flow into Druid
      • Minimal build properties
    • Archived
      • High Level Capabilities
      • Workflows
      • Where Sunbird ED helps you
      • ED - Mobile App (going to archive)
        • 4.10.3 to 5.0.0
        • 5.0.0 to 5.1.0
      • Setting up Sunbird ED
      • Developer Documentation
      • API Reference Documentation
      • Detailed Documentation
      • Source Code
      • Actors & Actions
      • Detailed Capabilities
      • Data
      • Terminology
      • 5.1.0-hotfix (OCI )
Powered by GitBook
On this page
  1. USE
  2. Developer Guide
  3. UI (User interface)
  4. Angular Material
  5. Customization

Accessibility

Last updated 1 year ago

Accessibility in Angular Material refers to the design and development practices that ensure web applications built with Angular Material are usable by people with disabilities. Angular Material provides built-in features and guidelines for creating accessible web applications. Here are some key aspects of accessibility in Angular Material:

  1. ARIA (Accessible Rich Internet Applications) Support: Angular Material components are designed to be accessible by default. They include ARIA attributes and keyboard navigation support to ensure screen reader users and keyboard-only users can interact with the components effectively.

  2. Keyboard Navigation: Angular Material components are navigable using keyboard controls. Users can navigate through components, interact with form elements, and trigger actions using keyboard shortcuts.

  3. Focus Management: Angular Material components manage focus states appropriately, ensuring that users can understand where the keyboard focus is and navigate the application seamlessly.

  4. High Contrast Mode: Angular Material components support high contrast mode, making it easier for users with vision impairments to read and interact with the application.

  5. Semantic HTML: Angular Material encourages the use of semantic HTML elements, such as buttons, links, and headings, to ensure that the structure of the page is meaningful to assistive technologies.

  6. Theming and Color Contrast: Angular Material offers guidelines for theming and color contrast, ensuring that text and interactive elements maintain adequate contrast with their backgrounds, thereby enhancing readability and usability. To address color contrast concerns, we employed the "Wave Evaluation Tool" Chrome extension, available for installation from the Chrome Web Store .

  7. Screen Reader Testing: To ensure accessibility, Angular Material components undergo testing with popular screen readers such as VoiceOver (iOS), NVDA (Windows), or JAWS (Windows). Additionally, we employed the "Screen Reader" Chrome extension for testing purposes, available for installation from the Chrome Web Store .

  8. Documentation: Angular Material's documentation includes information on accessibility best practices, including guidance on how to make custom components accessible and how to handle complex interactions.

  9. Community Contributions: The Angular Material community actively contributes to improving accessibility by reporting issues and providing solutions.

To enhance accessibility identification, we've included a dotted border in the "themes.scss" file. You can review the code and observe the output as shown below.

@include mat.strong-focus-indicators((border-style: dotted,
    border-width: 0.125rem,
    border-radius: 0.125rem,
  ));

It's essential for developers using Angular Material to follow accessibility guidelines and test their applications with accessibility tools to ensure that they are usable by all users, including those with disabilities. Accessibility is a fundamental aspect of web development that promotes inclusivity and a positive user experience for everyone.

here
here