入门 CSS 进度可访问性

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS Progress组件用于向用户显示任务的进度。在本文中，我们将讨论Primer CSS Progress Accessibility 。在某些情况下，无法使用文本描述任务的进度，应使用aria-label属性使网站对屏幕阅读器更友好。

Primer CSS Progress 可访问性类：

• Progress：这个类是progress组件的外层容器。
• Progress-item：该类用于进度组件的内部元素。

句法：

    
       ...
        ...
      

示例 1：此示例显示了 Primer CSS 中进度组件上aria-label属性的使用。

输出：

示例 2：此示例显示了aria-label参数与不同颜色的进度条的使用。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS Progress Accessibility
    
  
    

        

            
                
                
            
        
  
        

            
                
                
            
        
          
        

            
                
                
            
        
          
        

            
                
                 
            
        
        
    

输出：

参考： https://primer.style/css/components/progress#accessibility