Accessibility, read about software

Dash Python
1

I’m looking to pointed towards some documentation

In the UK a requirement is now in law where all public sector websites require accessibility to be at the heart of all public sector websites:

Somewhere between 1 in 4 to 1 in 5 web users are using screen reader software for websites. This means having IDs in HTML for screen readers to identify elements on the website and having alternative tables to graphs. Also the direction of tabbing through elements so users can easily navigate using the keyboard.

Not all elements in dash appear to have HTML ID’s, does anyone have more information or has anyone investigated this at all. Our planned dashboards need to be adapted for screen reading software to be able to function and I haven’t been able to easily find any documentation on this area.

Any direction or help would be great,
Thanks

2 Likes
2

Hi @datadick and welcome to the Dash community :slight_smile:

All Dash components can have ID’s assigned, however I expect the issue may be with some of the underlying components such as sliders, dropdowns, DataTable etc, where some of the sub components do not have IDs.

An option for those components is to use a different library such as Dash Mantine Componenets. The underlying Mantine library uses component designed with accessibility. You could also try the Dash Bootstrap Components library as well.

4 Likes
3

I have accessibility in focus in the 0.11.0 release. So will also add label and aria-label props in the dmc components in one of the coming releases.

2 Likes
4

Wow, I had no idea it was such a high percentage! Do you have a reference for this? We’ve been discussing accessibility internally recently, and I’d love to see what other information is available about the adoption of screen readers and other assistive technologies so we can point our efforts in the most impactful directions. So far our answer for this has been something like “dash_html_components supports all standard attributes, so developers are free to implement whatever accessibility features they need” but that’s not very satisfying, we should be able to be much more proactive particularly with regards to dash_core_components and dash_table.

3 Likes
5

Also, are these restrictions enforced on business to business services? Or just publicly available websites?

6

Thanks Alex, that is really interesting you are looking at this. Caught me by surprise also the size also.

As I said before its a legal requirement, the UK government quote “1 in 5 people in the UK have a long term illness, impairment or disability” https://www.scope.org.uk. Dreamhost quote 1-4 adults in the US have a disability ( How Do I Make My Website Accessible? - YouTube)

Exact numbers are difficult to come by as tracking screen reader software as I am led to believe isn’t an option unlike knowing what browser used to access the site. Figures appear to be based very much on the proportion of society with a disability than those using screen readers, so relying on survey data such as webaim:
https://webaim.org/projects/screenreadersurvey7/
who have ran the survey a number of times since the early 2000’s, result show the vast majority of screen readers are visually impaired.

For UK sites where this is a requirement, visually and audibly describing graph visuals, which can change based on selections, is very difficult. We have found the best solution is have two tabs

Tab 1 is the visual graph, which can be identified by the screen reader but not interoperated.

Tab 2 a table, which the screen reader can read and data from.

Its not onerous to build and significantly easier than trying to build graphs which can be read. The graph it self is only required to have a title so that the user knows what it is

1 Like
7

Hi jinnyzor,

No the legislation in the UK does not apply to private companies only UK government agencies publicly facing websites.

I think what should be made clear, this is not a restriction, the legislation is to encourage all user to be able to access the web. Something which I know as a fully able user would place as second to building a nice colourfully website.

I found this useful:

Wordpress site have some tools which made accessibility easier but the video points out some good ideas to plan a site to ensure its accessible for all and its simple things I probably dont think about enough.

This isn’t an area of expertise for me, just trying to build better

8

so happy to hear that, big fan of dash-mantine-components

1 Like
9

Hi @datadick, I’ve been digging into this a little. Am I understanding correctly that you’re trying to add a <label> to some components in order to make the purpose of the components clearer to assistive technology users?

As @AnnMarieW said, all Dash components can have IDs. I’ve had some luck using the Dash HTML Label component with htmlFor to reference an ID and label a component that doesn’t natively take a label.

Here’s how I was able to add a label to a dcc.Input component:

app.layout = html.Div([
  html.Label('Enter item name', htmlFor='item-name'),
  dcc.Input(id='item-name', type='text')
])

Let me know if this strategy helps! I was able to validate the label with the NVDA screen reader as well as the WAVE web accessibility browser extension.

2 Likes