Customize accessibility reader for a table implemented with divs

Question

I have a table implemented like this, with appropriate classes to make it look like a table:

<div>
  <div>
    <div id="e3">
      <div role="table">
        <div role="rowgroup">
          <div role="row">
            <div colspan="1" role="cell">
              <div>
                <div><span>First Name</span></div>
              </div>
            </div>
            <div colspan="1" role="cell">
              <div>
                <div><span>Last Name</span></div>
              </div>
            </div>
            <div colspan="1" role="cell">
              <div>
                <div><span>Full Name</span></div>
              </div>
            </div>
          </div>
        </div>
        <div role="rowgroup">
          <div>
            <div>
              <div>
                <div aria-label="grid" aria-readonly="true"
                     role="grid" tabindex="0">
                  <div role="rowgroup">
                    <div>
                      <div role="row" data-row-id="e3-0">
                        <div role="cell">
                          <div>
                            <div>
                              <div>John</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Higgins</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>John Higgins</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div
                           role="row" data-row-id="e3-1">
                        <div role="cell">
                          <div>
                            <div>
                              <div>John</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Lennon</div>
                            </div>
                          </div>
                        </div>
                        <div role="cell">
                          <div>
                            <div>
                              <div>Sean Lennon</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I want to fully customize the voice reader when on a cell. I don't want it to read "Column 3 of 3" for example, I want it to say for example "Third column of of three".

Answer 1

If you are effectively presenting tabular data, it would be better if you could use <table>, but anyway it doesn't change my answer.

You can't change announcements like "Column 3 of 3". This is a general information telling you exactly where you are while navigating through the table. This information is under control of the user, who may decide to suppress it if he/she don't find it useful, but You, as a developer or document writer, you can't decide what is good or bad, useful or useless information for the user.

Screen reader users generally expect this information to be given and it is absolutely necessary to always know exactly where you are, especially if the table is big and/or complex with col/rowspan etc. Without that kind of information, as a screen reader user, you can quickly and easily get lost.

If the column and/or row numbers announced are wrong, it probably means that whether your markup is incorrect, or your construction is too complex. You should try to simplify it if possible.

If you think that it doesn't make sense at all to talk about columns and rows, probably that you don't really have a data table and in this case, it's maybe better to remove all ARIA roles telling the screen reader that it's a data table.

In any case, you shouldn't try to have everything spoken exactly as you like, and you shouldn't be afraid of that not being the case. Every user has his/her preferences, and every screen reader give that kind of information a little differently, even without counting user configuration.

As usual, the best to know what's the most efficient and/or clear way to present your data would be to make real UX tests with real screen reader users.