Setting A Table With Accessibility

Setting A Table With Accessibility

In designing a website, web authors use a variety of HTML elements to structure the flow and organize the information found on their website to improve the user experience. Tables are common website elements but it is important to keep website accessibility top of mind. Tables are defined as either a data table or a layout table.

For blind and low vision users, an improperly constructed HTML table could result in a website that’s confusing to read. Data tables are used to organize data into rows and columns. They have row headings, column headings, or both. Some examples include online banking transactions, TV listings, email inbox, or a team's stats. If proper HTML markups are used, screen reading software not only cannot recognize the data table itself but obtain additional information about the table to better present to the blind or low vision user.

Layout tables are used more to organize the structure of a website and may not necessarily be noticed by screen reading software. In fact, web designers use layout tables to organize the various elements of a website, which may include data tables. If you visit Outlook Nebraska's website, you will see a layout table to organize the links and logos along the top, the main region of information in the middle, and the contact information and closing links along the bottom. These three sections are organized within a layout table to better organize the flow of the information provided and the visual appearance of the website. 

How do these tables become inaccessible to low vision users?

Screen reading software, such as JAWS or NVDA, literally read the source code in the order it’s written and they do not read as the elements on the page visually appear. This could lead to the issue of the website accessibility software reading the page out of the intended order, which may cause confusion. Web designers use layout tables for more precise and flexible control and positioning of elements by defining dimensions by pixel values. However, depending on screen size, low vision users who may enlarge text size for easier readability may inadvertently cause elements in the layout table to not display correctly or completely. If you plan on using layout tables, allow for user customization.

Screen reading software recognizes tables by the HTML markups used in the source code. Avoid using these markups, if possible, when developing a layout table. Additionally, avoid using nested layout tables within a layout table, because it may lead to potential confusion with the screen reading software. 

With proper HTML markups, data tables can be very accessible with screen reading software. Not only does the software recognize that the table exists, but it will give the number of rows and columns, and the blind or low vision user will be able to navigate and read the data table using special table keystrokes. Generally, screen reading software reads the table in logical order, from the top-lleft cell along the first row, back to the far-left cell of the next row, going to each cell in each row from left to right, and on to the bottom right and last cell in the table. Additionally, web designers can use the caption markup to describe the contents of the data table, or they can use a summary markup which is only “visible” by the screen reading software. The summary markup only appears in the source code, and a summary typically describes the general layout of the data table and not the contents. 

Would you like more information or assistance? Outlook Business Solutions can work with web development teams to help them understand the importance of website accessibility and how it is incorporated into a digital property from the start. Our new subscription program, Ally Support, allows you to add accessibility expertise to your team without adding full-time staff. Contact us today to learn more.