Content
View differences
Updated by Alexander Coles 5 months ago
### Steps to reproduce
**Visit a page with a Border Box Table as a user of Assistive Technologies (AT) and attempt to navigate through the table**
Guidance for reproducing with NVDA screenreader ([download here](https://www.nvaccess.org/download/)) with Firefox on Windows. See "Note for QA/Devs" below for other ways to reproduce.
1. Log in as a user with permissions to create meetings
2. Ensure there is at least one meeting scheduled for next week or later: Navigate to the global Meetings list page and click the green **\+ Meeting** button. For this example we will use a meeting named "Meeting on Accessibility" scheduled for 5 Jan 2026 that lasts one hour and takes place in Paris, Texas.
3. Start NVDA (usually **Ctrl + Alt + N)** and activate the screenreader according to your configuration (usually **INSERT** key, but can also be capslock)
4. Navigate through the page in browsing mode according to NVDA instructions (usually my using arrow keys) to the "Next Week and later" heading.
5. NVDA should announce: Heading Level 3 “Next week and later”
6. Press the down arrow key
### What is the buggy behavior?
1. after each of the following steps press the down arrow key
1. NVDA: Title
2. NVDA: Date and time
3. NVDA: Duration
4. NVDA: Location
5. NVDA: List with _X_ Items
(Visited) Link Meeting on Accessibility
(Visited) Link Every week.
6. NVDA: 01 slash 05 slash 2026 10AM
7. NVDA: 1 hour
8. NVDA: Paris, Texas
9. NVDA: Clickable Menu Button Collapsed Submenu More
2. press space
3. NVDA: View meeting series
4. press escape
These interactions are recorded as "NVDA-FF-My\_Meetings\_Before-1.mov". The screencast also includes navigating back up the BorderBoxTable via the up arrow key.
### What is the expected behavior?
1. NVDA: Table with 2 rows and 6 columns (Meetings\*)
2. after each of the following steps press the down arrow key
1. NVDA: Column 1 Title
2. NVDA: Column 2 Date and time
3. NVDA: Column 3 Duration
4. NVDA: Column 3 Duration
5. NVDA: Column 5 Actions
6. NVDA: Grouping Row 2 Title Column 1
(Visited) Meeting on Accessibility
(Visited) Link Every week
7. NVDA: Date and time Column 2 01 slash 05 slash 2026 10AM
8. NVDA: Duration Column 3 Weekly
9. NVDA: Location Column 4 Paris, Texas
10. NVDA: Actions Column 5
Clickable Menu Button Collapsed Submenu More
3. press space
4. NVDA: View meeting series
5. press escape
These interactions are recorded as "NVDA-FF-My\_Meetings\_After-1.mov".
\* _The "Meetings" label is not included in the screenrecording - this was fixed after the screenrecording was uploaded._ "NVDA-FF-My\_Meetings\_After-1.mov".
### Summary of Issues
* **Lack of table semantics**
Screen readers do not recognize BorderBoxTables as tables. Because the required table semantics are missing, these components are typically announced as generic lists.
* **Headers are not identified correctly**
What appears visually as a table header is usually read as a single block of text, rather than as individual column headers.
* **Rows are read as list items**
Each visual “row” is announced as a list item and may be read in its entirety, rather than cell by cell.
* **No association between cells and headers**
Cells are not programmatically associated with their column headers. In contrast, real tables allow screen readers to re-announce the relevant column header for each cell, providing necessary context.
* **Action/button columns are unclear or skipped**
When an actions or buttons column is present, screen readers may skip the column header entirely or announce it as “blank,” making the purpose of the column unclear.
### Note for QA/Devs
I've also included a screencast of Voiceover + Chrome on the _Administration > Authentication > SCIM clients_ page. I haven't provided a transcript, but this may still aid in testing.
**Important: Different screen readers announce tables in different ways.** Some are more “chatty” than others, and some do not yet support all ARIA attributes. For this reason, it is important to use the same screen reader when comparing actual and expected behaviour.
For additional context, there is screencast of a real (native HTML) table vs. BorderBoxTable - the recording uses JAWS screenreader with Chrome on Windows (DE locale). Ideally, a BorderBoxTable should behave identically to its native counterpart.
Finally it is also possible to review this work "statically", e.g. using the Accessibility Tree in the Browser console:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/917968/content">
or with error checking using Firefox's inbuilt support or [Axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) for Chrome.
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/917969/content">
<br>
### Environment information
**OpenProject installation type**
* Hosted cloud edition
**OpenProject version**
**Core build**
[2b7f34b28ca322bec5e7e62fbab6a8518ce00891](https://github.com/opf/openproject/commits/2b7f34b28ca322bec5e7e62fbab6a8518ce00891)
**Product version**
[8bcf61994d562039fe19c317ebac86a950d04744](https://github.com/opf/saas-openproject/commits/8bcf61994d562039fe19c317ebac86a950d04744)
**Core version**
OpenProject 17.1.0
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [x] Edge
**Operating System**
* [x] Windows
* [x] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)
**Language**
_en\_GB_
**Visit a page with a Border Box Table as a user of Assistive Technologies (AT) and attempt to navigate through the table**
Guidance for reproducing with NVDA screenreader ([download here](https://www.nvaccess.org/download/)) with Firefox on Windows. See "Note for QA/Devs" below for other ways to reproduce.
1. Log in as a user with permissions to create meetings
2. Ensure there is at least one meeting scheduled for next week or later: Navigate to the global Meetings list page and click the green **\+ Meeting** button. For this example we will use a meeting named "Meeting on Accessibility" scheduled for 5 Jan 2026 that lasts one hour and takes place in Paris, Texas.
3. Start NVDA (usually **Ctrl + Alt + N)** and activate the screenreader according to your configuration (usually **INSERT** key, but can also be capslock)
4. Navigate through the page in browsing mode according to NVDA instructions (usually my using arrow keys) to the "Next Week and later" heading.
5. NVDA should announce: Heading Level 3 “Next week and later”
6. Press the down arrow key
### What is the buggy behavior?
1. after each of the following steps press the down arrow key
1. NVDA: Title
2. NVDA: Date and time
3. NVDA: Duration
4. NVDA: Location
5. NVDA: List with _X_ Items
(Visited) Link Meeting on Accessibility
(Visited) Link Every week.
6. NVDA: 01 slash 05 slash 2026 10AM
7. NVDA: 1 hour
8. NVDA: Paris, Texas
9. NVDA: Clickable Menu Button Collapsed Submenu More
2. press space
3. NVDA: View meeting series
4. press escape
These interactions are recorded as "NVDA-FF-My\_Meetings\_Before-1.mov". The screencast also includes navigating back up the BorderBoxTable via the up arrow key.
### What is the expected behavior?
1. NVDA: Table with 2 rows and 6 columns (Meetings\*)
2. after each of the following steps press the down arrow key
1. NVDA: Column 1 Title
2. NVDA: Column 2 Date and time
3. NVDA: Column 3 Duration
4. NVDA: Column 3 Duration
5. NVDA: Column 5 Actions
6. NVDA: Grouping Row 2 Title Column 1
(Visited) Meeting on Accessibility
(Visited) Link Every week
7. NVDA: Date and time Column 2 01 slash 05 slash 2026 10AM
8. NVDA: Duration Column 3 Weekly
9. NVDA: Location Column 4 Paris, Texas
10. NVDA: Actions Column 5
Clickable Menu Button Collapsed Submenu More
3. press space
4. NVDA: View meeting series
5. press escape
These interactions are recorded as "NVDA-FF-My\_Meetings\_After-1.mov".
\* _The "Meetings" label is not included in the screenrecording - this was fixed after the screenrecording was uploaded._
### Summary of Issues
* **Lack of table semantics**
Screen readers do not recognize BorderBoxTables as tables. Because the required table semantics are missing, these components are typically announced as generic lists.
* **Headers are not identified correctly**
What appears visually as a table header is usually read as a single block of text, rather than as individual column headers.
* **Rows are read as list items**
Each visual “row” is announced as a list item and may be read in its entirety, rather than cell by cell.
* **No association between cells and headers**
Cells are not programmatically associated with their column headers. In contrast, real tables allow screen readers to re-announce the relevant column header for each cell, providing necessary context.
* **Action/button columns are unclear or skipped**
When an actions or buttons column is present, screen readers may skip the column header entirely or announce it as “blank,” making the purpose of the column unclear.
### Note for QA/Devs
I've also included a screencast of Voiceover + Chrome on the _Administration > Authentication > SCIM clients_ page. I haven't provided a transcript, but this may still aid in testing.
**Important: Different screen readers announce tables in different ways.** Some are more “chatty” than others, and some do not yet support all ARIA attributes. For this reason, it is important to use the same screen reader when comparing actual and expected behaviour.
For additional context, there is screencast of a real (native HTML) table vs. BorderBoxTable - the recording uses JAWS screenreader with Chrome on Windows (DE locale). Ideally, a BorderBoxTable should behave identically to its native counterpart.
Finally it is also possible to review this work "statically", e.g. using the Accessibility Tree in the Browser console:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/917968/content">
or with error checking using Firefox's inbuilt support or [Axe DevTools](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) for Chrome.
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/917969/content">
<br>
### Environment information
**OpenProject installation type**
* Hosted cloud edition
**OpenProject version**
**Core build**
[2b7f34b28ca322bec5e7e62fbab6a8518ce00891](https://github.com/opf/openproject/commits/2b7f34b28ca322bec5e7e62fbab6a8518ce00891)
**Product version**
[8bcf61994d562039fe19c317ebac86a950d04744](https://github.com/opf/saas-openproject/commits/8bcf61994d562039fe19c317ebac86a950d04744)
**Core version**
OpenProject 17.1.0
**Browser**
* [x] Chrome
* [x] Firefox
* [ ] Safari
* [ ] Mobile Safari
* [x] Edge
**Operating System**
* [x] Windows
* [x] Mac OS X
* [ ] Mobile iOS
* [ ] Mobile Android
* [ ] Linux (please specify distro)
* [ ] Chrome OS
* [ ] Other (please specify)
**Language**
_en\_GB_