docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Name for table 'Typography' in Fast Frame Design System page is not programmatically defined.

Open msftedad opened this issue 2 years ago • 3 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [ ] I have tried the npm run clear or yarn clear command.
  • [ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • [ ] I have tried creating a repro with https://new.docusaurus.io.
  • [ ] I have read the console error message carefully (if applicable).

Description

Name for table 'Typography' in Fast Frame Design System page is not programmatically defined.

Screen reader is not announcing the table name as name property is programmatically not defined.

Name property should be defined for table 'Typography' should programmatically defined for the respective table.

User with visual impairment who rely on screen reader will face difficulties if name property is not programmatically defined for the table.

Table name is not defined

Table name is not defined .webm

Reproducible demo

No response

Steps to reproduce

Pre-Requisites: Turn on Narrator.

Repro Steps:

  1. Open https://www.fast.design/ URL.
  2. Navigate to link Documentation and invoke it.
  3. Navigate to 'using the components' link and invoke it.
  4. Navigate to 'Fast Frame Design System' link and invoke it.
  5. Navigate to table 'Typography' in main landmark and listen to screen reader announcement.

Expected behavior

Name property should be defined for table 'Typography' should programmatically defined for the respective table.

Actual behavior

Name property is not programmatically defined for table 'Typography' is not defined in 'Fast Frame Design System' page.

Your environment

  • Public source code:
  • Public site URL: https://www.fast.design/
  • Docusaurus version used: Version: 2.4.1
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Microsoft Edge Version 114.0.1823.86 (Official build) (64-bit)
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): OS Name: Microsoft Windows 11 Enterprise Version: 10.0.22621 Build 22621

Self-service

  • [ ] I'd be willing to fix this bug myself.

msftedad avatar Jul 21 '23 08:07 msftedad

Hi @slorber, Any update on this issue?

msftedad avatar Jan 10 '24 04:01 msftedad

Hi @slorber, Any update on this issue?

msftedad avatar Feb 09 '24 11:02 msftedad

@msftedad if I don't post comments it's because there are no updates. Unfortunately I can't work on all issues at once and you are not the only one waiting 😅

What do you mean by "table name"? How to achieve better accessibility here?

Are you saying we should use <table name="Typography">? Because it doesn't seem to be

Can you link to an accessibility reference page documenting how to improve accessibility for tables?


Note that we are not responsible for the fast design system documentation. Please use our own site as a reference to illustrate problems in the future (like in your video)

IMHO this is not a bug in Docusaurus and it is more likely an accessibility bug in our website content instead.

We can probably improve accessibility by adding additional table attributes, but then it would only fix our website, and the Fast Design website would have to fix their own tables too.

slorber avatar Feb 09 '24 12:02 slorber