0

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".

Improve this question
3
  • 1
    Why not just use <table>? Commented Nov 9, 2024 at 13:53
  • @Rob I have an existing code that I can't change. I need to customize its accessibility text. Commented Nov 9, 2024 at 13:59
  • 1
    It's not a good idea to try to change the way screen readers work. Each one works differently, and users are used to the way theirs works. It's not clear what you hope to gain by disrupting their expectations. Commented Nov 12, 2024 at 15:18

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's not what I wanted, I wanted to provide the same information, but to say for example "third row" and not "row number three".
Sorry, but it is so. Screen reader users are used to have such position information in a given format. Even if you could change it, it would be unwise to do so. For you it may be clearer to have "Third row" instead of "Row 3", but maybe not for most users. Note that I'm myself a screen reader user. I personally find "Row 3" a little cleaner and shorter than "Third row". What do you think about "Eighteenth row" instead of "Row 18" for example ?
It was just an example. These are more specific requirements - for a header row - "Row <row num> of <total number of rows>, header row, column <col num> of <total number of columns>, <cell value>. For non header row, if the user moved to a different row, or he's on the first column - "Row <row num> of <total number of rows>, column <col num> of <total number of columns>, <value of header cell>, <cell value>. For other rows - column <col num> of <total number of columns>, <value of header cell>, <cell value>.
That's already more or less what most screen readers do. They read the new header row when you change column, and the new header column when you change row. There is really no reason to change these messages even if it was possible. As I have already said in my answer: you shouldn't expect screen readers to say exactly all what you want, and you shouldn't be afraid about it. You should much more wonder why you don't use <table>.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.