国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Pa11y測試網站可訪問性工具

MobService / 1221人閱讀

摘要：前言非常感謝和測試我的博客網站，并給我發出，讓我知道了網站有些，以及這個測試利器。簡介是自動化測試網站可訪問性的工具。它原理是用命令行的形式運行，得到可訪問性報告。由于我網站需要保持統一色，這條我決定忽略。

前言

非常感謝wapyce和carlsonsantana測試我的博客網站，并給我發出Issue，讓我知道了網站有些bug，以及Pa11y這個測試利器。

簡介

Pa11y是自動化測試網站可訪問性的工具。 它原理是用命令行的形式運行?HTML CodeSniffer
，得到可訪問性報告。

用法

可以用node來全局安裝pa11y.

   npm install pa11y -g

直接運行命令行,pa11y加自己的網址

  pa11y https://raoenhui.github.io

也可在js中使用,pa11y("網址")返回的是一個承諾對象。

const pa11y = require("pa11y");
pa11y("http://example.com/", {
    // Options go here
}).then((results) => {
    // Do something with the results
});

pa11y中可以配置很多，如給請求頭加Cookie，忽視某些警告等，詳情可看pally 教程

DashBoard

首先本地創建 mongoDb，下載dashboard代碼再安裝

git?clone?https://github.com/pa11y/dashboard.git
cd dashboard
npm i

更改pa11y的配置文件，主要是數據地址以及啟動端口號

cp config/development.sample.json config/development.json
cp config/production.sample.json config/production.json
cp config/test.sample.json config/test.json

如連接本地mongoDb,并配置啟動端口號為4000

{
    "port": 4000,
    "noindex": true,
    "readonly": false,
    "webservice": {
        "database": "mongodb://localhost/pa11y-webservice",
        "host": "localhost",
        "port": 27017,
        "cron": "0 30 0 * * *"
    }

最后啟動dashboard

node index
也可用pm2去啟動生成后臺進程 NODE_ENV=production pm2 start index.js
添加URL并查看網站信息
我的案例（可忽視）

通過pa11y命令測試我的網址，發現些bug，如下所示

1.The html element should have a lang or xml:lang attribute which describes the language of the document. 
沒有給html加上語言標識。

修復辦法：加上中文語言標示


2. Anchor element found with a valid href attribute, but no link content has been supplied.

無效的標簽


修復辦法：刪除標簽



 

3.This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.77:1. Recommendation: change background to #717171

提示顏色對比度不足，建議更換顏色。


由于我網站需要保持統一色，這條我決定忽略。

4. Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

圖片缺少alt標簽


修復辦法：給img添加tag

其他鏈接

我的原文地址 https://raoenhui.github.io/tool/2018/10/28/Pa11y/



Happy coding ..
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98813.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    每日 30 秒 ? 無障礙世界
    
                                                     
    showImg(https://segmentfault.com/img/remote/1460000018836440);
簡介
無障礙、DOM 小細節、前端開發、a11y、Accessibility
無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。
無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...
    
                                                   
                          
    
                                
    
                                    duan199226
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每日實戰 169# 視頻演示如何制作“數略詞”交互動畫（內含2個視頻）
    
                                                     
    摘要：本項目將制作一個交互動畫效果，令其在單詞原詞和數略詞之間切換。二擴展應用到多個單詞數略詞有很多，為了能夠一次展示多個單詞，我們將對現有的程序進行擴展。

showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401);
效果預覽
按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/co...
    
                                                   
                          
    
                                
    
                                    roland_reed
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端每日實戰 169# 視頻演示如何制作“數略詞”交互動畫（內含2個視頻）
    
                                                     
    摘要：本項目將制作一個交互動畫效果，令其在單詞原詞和數略詞之間切換。二擴展應用到多個單詞數略詞有很多，為了能夠一次展示多個單詞，我們將對現有的程序進行擴展。

showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401);
效果預覽
按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/co...
    
                                                   
                          
    
                                
    
                                    sean
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                    
                    
MobService

                    
男|高級講師

                    
                    

                          
TA的文章

                          閱讀更多
                    

                      
                


                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<