Review accessibility of tables in wordpress

[benetechMatt]

Please compare the accessibility of tables between Google Docs and Wordpress. Both links below are of the same table that lists Mathshare accessibility features. The wordpress/website version has table headings. I don't believe the Google Docs version has table headings.

1. Is one version of the table more accessible to screen reader users?
2. Does the wordpress/website version have useful table headings?

Wordpress/website version: https://mathsharedev.benetech.org/accessibility/

Google Docs version https://docs.google.com/document/d/1vYi8n9hvhBzdRayOC-grRn4j8KnFM7RB9R2aM77tjDc/edit?usp=sharing

[Sanjog1605]

Hello @benetechMatt sir,

there are few things that one has to keep in mind when dealing with websites and documents created using Google Docs. Both are accessible, and whatever things are possible on websites, same are possible using Docs. therefore, the question here is not which one is more accessible but, which is more "usable". Usability also plays an important role apart from accessibility. While creating accessible materials and websites, one has to keep in mind the usability as well.

So, I believe that giving the table directly on the website is much more usable/user friendly as compared to giving it in the form of a Google Docs. The reasons are as follows:

• The users who are going to use Mathshare website, are/will be familiar with websites and, navigating through a website using any kind of assistive technology, example, screen reader, Refreshable braille display,or a switch etc.
• The interface will remain the same. Once people starts using the website, they expect that the interface to remain the same. Google Docs will bring a new kind of interface, which can be disturbing for persons with learning and cognitive disabilities.
• The keyboard shortcuts will remain the same on the website. The reading navigation keys of screen readers works well with websites. On the other hand, Google Docs has its own shortcuts and it also has a different way of reading. Website uses the "Browse mode" of a screen reader, while Docs uses "Focus mode" even for reading a document (usually focus mode is used only to input something).

To summarize, website version of the table will be a great option as it will cover accessibility as well as usability. However, one can also put Google Docs as an alternative method of reading for those who wishes to read using docs. In other words, we can use the web version of the table as our primary method but, an option can be made available for those who want the same information in a document format for offline reading/printing.

Note: I tested the web version from the link provided in the above comment, and there are issues with the table as well. Matt sir, you mentioned that the web version has table headings but unfortunately, they are not read by my screen reader. There are other issues as well. Please kindly let me know if you need an accessibility report of the table.

[benetechMatt]

Thank you @Sanjog1605. The notes about usability are helpful and will act on that for a few other instances that link out to google docs instead of a website.

Please provide an accessibility report on the table. We will be using website tables for other situations in the future

[Sanjog1605]

The issues in the table on the WordPress page are:

1. The screen reader says "Figure table with 17 rows and 3 columns", when the screen reader focus lands on the table, and says "Out of table, out of figure", when moves out of the table. This indicates that there is either a figure clashing with the table, or, there is a word 'figure' which might have come at some place at the back end. Possible Solution: Use proper HTML native table tags.

2. The table starts with row # 2 for screen reader. Ideally, when the focus of screen reader lands of a table, it immediately says the total number of rows and columns the table is made up of, and it also says the current row and column number. So, it should say "Table with 17 rows and 3 columns, row 1 column 1". Instead, it says, "Table with 17 rows and 3 columns, row 2 column 1". Possible Solution: We will have to make some changes in the code.

3. The screen reader is not reading the column headers. Ideally, when a screen reader user moves the focus inside a table, the screen reader reads the column and row headers (wherever applicable), so as to tell the user where in a table he/she is and gives the context of the data by announcing the headers along with the data of the particular cell.

Code for an accessible table can be as follows:

<table>
    <caption>Features of Mathshare and their Benefits</caption>
    <tr>
        <th scope="col">Feature</th>
        <th scope="col">What it does</th>
        <th scope="col">Who it helps (specific & nonspecific)</th>
    </tr>

    <tr>
        <td>Synchronized Highlighting</td>
        <td>Highlights text word by word while speaking it aloud</td>
        <td>People who have difficulty differentiating math terms. Helpful for people with dyslexia and dyscalculia.></td>
    </tr>

``

Note: The <caption> tag is used for giving a title to a table. I have just given the title for demo purposes only. Please forgive if there are any mistakes in the title.

As of now, I was able to find these issues. I can check again for the issues once the complete table is ready. Let me know if there is anything else that I can do.