Tables and Screen Readers

后端未结

关注

 1  1091

太阳男子 2021-01-22 00:20

I seem to be having troubles getting a screen reader to read simple tables. I have the HTML below:


        
          1条回答        

        
                    
            
            
                         
                
              
              
                
                   时光说笑
                                             
                
                
                (楼主)
            
              
              
                2021-01-22 00:56
              

            
            
                        
I haven't run this through a screen reader, but it could be thrown off by your  .   needs to be closed with a semi-colon. Like this:  . Also, there is no alt attribute for table. Provide an explanation, useful for screen readers, with the summary attribute instead.

On top of that, I would advise that you remove that empty cell and make a bigger space with CSS.

1 - Remove the blank row and provide a gap with CSS, like this:

HTML


       
           


        
      
      
      

   
      Account Number:
      1111 1111 1111

      Reference Number:
      XXXX XXXX XXXX

Account Number:	1111 1111 1111	Reference Number:	XXXX XXXX XXXX



CSS

th { padding: 0 10px;  }


2 - ...and on top of that, maybe it's a bit picky, so you could try:


    
        
            Account Number Heading
            Account Number
            Reference Number Heading
            Reference Number
        
    

    
        
            Account Number:
            1111 1111 1111

            Reference Number:
            XXXX XXXX XXXX
        
    



CSS 

thead { display: none; }
th { padding: 0 10px;  }


3 - ...but ideally the table would be just like this:


    
        
            Account Number
            Reference Number
        
    

    
        
            1111 1111 1111
            XXXX XXXX XXXX
        
    



CSS 

th { padding: 0 10px;  }

Account Number Heading	Account Number	Reference Number Heading	Reference Number
Account Number:	1111 1111 1111	Reference Number:	XXXX XXXX XXXX

Account Number	Reference Number
1111 1111 1111	XXXX XXXX XXXX