Questions tagged [accessibility]
A general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility is often used to focus on people with disabilities or special needs and their right of access to entities.
849
questions
0
votes
0
answers
11
views
Recommendations for accessibility tools/plugins on Figma [migrated]
My team is striving to design more accessible solutions and is actively trying to validate our work.
We tried the paid version of the Stark Plugin, but we're not huge fans of it as it stands currently....
2
votes
1
answer
87
views
Patterns for adjusting settings which may hinder the user's ability to adjust that same setting again
This question is about those self-referential settings where the ability of the user to control a device, say:
using a mouse cursor, or
viewing it on a monitor screen
is itself affected by the ...
- 26.5k
1
vote
1
answer
58
views
Struggling to make an accessible data table with clickable rows!
We're currently working on making our data table accessible. Our main concern is the whole clickable row that triggers a side sheet. The entire row is clickable, and a part of its content may be ...
CommunityBot
- 1
3
votes
2
answers
496
views
When would a user prefer increasing font size vs. zoom/scale?
Browsers and operating systems usually have settings to make pages larger or smaller. This makes computers accessible for some users with low-vision and I've also seen it used temporarily for ...
- 101
0
votes
1
answer
69
views
Should I include ... at the end of input placeholders?
I've noticed designers using "..." at the end of inputs or search bars placeholders ("Enter your email address" vs "Enter your email address...") seemingly at random. Is ...
JonW♦
- 37.2k
1
vote
1
answer
55
views
WCAG' Non-text contrast requirements, what exactly are the guidelines with hover?
WCAG does a weird job of explaining their non-text contrast requirements with hover states.
Within their "Understanding non-text contrast" documentation, they have this bizarre example:
As ...
- 3,170
0
votes
1
answer
36
views
Designing an elevator with smartphone to elevator button pressing and smartphone vibration and notification upon arrival
Elevators make us reason about mathematics (for instance, vectors... when an elevator goes from one floor to another, you can visualize the vector pointing from one floor, with a number, to another ...
- 36.5k
3
votes
1
answer
973
views
Why there are 3 lines in all types of menu icons?
I have noticed that all types of menu icons are using three lines or dots.
From a UI/UX perspective, does it matter the number of lines/dots?
For example if someone decides to use only one or six ...
3
votes
1
answer
114
views
How to lead AT users from non-accessible content to an accessible alternative
The Drupal website I'm working on has a traditional grid style calendar. The main view of the calendar is based on the Full Calendar JS library. After testing it with a screen reader I decided it wasn'...
CommunityBot
- 1
1
vote
1
answer
42
views
How can a diagramming application be accessible via screen reader for content creator
We have an application that uses diagrams and have made it accessible with full keyboard navigation and screen reader providing situational awareness for readers.
But I can't find anywhere how someone ...
- 489
1
vote
1
answer
45
views
Alert message component variants
I work in an e-commerce platform and we recently had a lively discussion about the variations of our alert message.
Would you agree that it is useful to have different versions of an alert or would ...
- 17.8k
0
votes
1
answer
20
views
Device for people with advanced tremors and speech difficulties to type using feet and hand
Some older people are often full of tremors, including in their voice, and in their hands, but can still use their feet.
They can often also spell.
I was wondering whether anyone has designed a double ...
- 36.5k
0
votes
2
answers
86
views
Do different opacities of hover / click / active states need considering from an accessibility perspective?
I found this sidebar on Dribbble:
And I'm wondering if it's fully accessible? It looks like when a menu item is active, it's given a semi-transparent background. And when you hover over another menu ...
1
vote
3
answers
2k
views
In a multilingual app, can we use only English for titles, alt etc
In a multilingual app, regarding accessibility usages, can we use english for titles, alt etc., or should we adapt accordingly to the language selected?
Example: always use title="Back to the ...
- 13
0
votes
2
answers
653
views
Best practice for notification timeouts
The app I'm currently working on has a notification banner that appears when successful or unsuccessful network calls. It says things like "Your address was updated successfully!" or "...
CommunityBot
- 1
1
vote
2
answers
94
views
Variable App Colors (for Branding) and Accessibility
A feature that was sold to clients long before I joined was enabling use of custom primary and secondary colors in our mobile app. This allows their branding to be communicated to users for a more ...
CommunityBot
- 1
1
vote
1
answer
254
views
Should single input be wrapped in a form?
Should those single inputs be wrapped in <form> tags so that screen readers can announce them as such?
Sometimes in our project (Web based SaaS) we use single input fields to operate some ...
CommunityBot
- 1
1
vote
3
answers
169
views
Accessibility and tappable colored text in apps
WCAG guidelines say that we should not rely on color to be the only visual cue conveying information for level A accessibility
At the moment, we have tappable texts that are coloured to indicate they ...
CommunityBot
- 1
3
votes
2
answers
78
views
Tab order of floating buttons
We have a live support chat on our website, accessible via a button that always floats in the bottom right of the page, above other content. This chat widget inserts itself as the first child of the ...
- 219
0
votes
1
answer
94
views
Are arrow keys necessary to meet WCAG A and AA standards for keyboard navigation or is Tab key sufficient?
If there is a website navigation with subMenus and some subMenu themselves have their own subMenus. It is possible to fully navigate the navigation with the keyboard through Tab, Enter, and Space keys....
- 117
8
votes
1
answer
1k
views
Is there an accessibility standard for using icons vs text in menus?
I'm asking as a user here (I work in QA, fwiw) - is there a standard for accessibility in terms of using text labels vs icons only in menus? I searched and found a lot of conversations about including ...
- 83
1
vote
5
answers
287
views
Legibility and contrast for light weight sources. Regarding accessibility
I am developing a web application, starting from an approved design, I have the task of evaluating if it is readable.
The question is: the light body, modifies the consideration over the contrast? ...
- 234
0
votes
2
answers
91
views
Why is focus state interaction is different for Checkbox and radio field
Today I noticed that radio buttons and checkboxes have different interaction for focus state.
If you look at the example webaim of a radio button you notice that you can not select the next radio ...
- 489
1
vote
2
answers
98
views
Sidebars: Icons & Label or Icon & Hover Tooltip
I got curious today: From a learnability, accessibility, and usability perspective, it is recommendable to not hide behind an interaction (hover) the label of something and not force the user "...
- 3,170
4
votes
2
answers
3k
views
Is an English only aria-label better than no aria-label at all for non-English speakers?
We have a set of buttons that have a single icon for the content and no text content. One example, a button in the top left of a modal that has an 'X' icon which is an image file. To better ...
CommunityBot
- 1
5
votes
2
answers
787
views
Creating an accessible, animated, and responsive navigation system
I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing.
First, I need a system that is completely accessible as I am ...
CommunityBot
- 1
0
votes
1
answer
44
views
Text Contrast Issue: How to enhance a hero image section?
I'm using a hero image as a landing page for a ecommerce site. Here's what it looks like so far:
I'm having issues with the text's contrast over the background image. Any ideas on how I can make the ...
- 36.5k
3
votes
3
answers
520
views
Keyboard accessibility: if menu can be operated with keyboard should it still retain tabbing functionality?
I’m trying to create an accessible menu that can be operated with the arrows, as described here:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
In the example ...
- 103
0
votes
1
answer
64
views
Color contrast and hover state [a11y]
When multiple pieces of information of different importance are presented within a same piece of UI (e.g., table row, list item), some designers prefer to have the "secondary" or "less ...
- 11.1k
11
votes
5
answers
6k
views
Revisiting user-scalable=no
Previously, to achieve the effect of resizing for mobile, I have only ever used width=device-width, initial-scale=1 which worked no problem.
I recently discovered user-scalable=no as an option for ...
- 2,676
3
votes
2
answers
67
views
Using label and tabindex for non-selectable elements that give context about the page
My work is developing a page to display a filterable list of mortgage products. As you can imagine mortgages are really complex, so there's a lot of extra information that a sighted user can simply ...
- 489
1
vote
1
answer
620
views
Tabbing into a hidden navigation menu
This is a question about the interaction between navigation via keyboard (tabbing) and initially-hidden navigation items. I’m asking from both a UX and accessibility perspective.
My site has a slide-...
CommunityBot
- 1
5
votes
1
answer
231
views
Distinguishing aria-live speech from UI accessible names
We just ran our first user test of an accessible UI prototype with blind and partially-sighted testers. In spite of my efforts to follow the various recommendations and WCAG specifications, there were ...
CommunityBot
- 1
0
votes
1
answer
121
views
How do you create both sufficient contrast and a harmonious outcome for text on different tints of the same color?
Here are two examples. One is a table, the other an illustration. Both use different tints of the same color with text on top. How do you change the color of the text across these tints to be both ...
CommunityBot
- 1
1
vote
1
answer
59
views
Accessibility reading order VS DOM order in a list of events
I'm trying to fix a CSS/DOM order problem on a website so it can pass an accessibility audit.
The problem is that the website is very visual, and the fixes must not change the appearance (as much as ...
- 3,170
3
votes
1
answer
75
views
Direct voice interactions examples in use as an alternative to voice assistants
After reading an article explaining the difference between using your voice to controlling the UI (i.e. direct voice interaction) compared to dealing with a voice UI (e.g. chatbots or voice assistants)...
- 1,477
17
votes
4
answers
3k
views
Maximum contrast ratio for good accessibility
So we are remaking an enterprise app from scratch. This time we want to base our design decisions on proper research.
Our users use the app 24/7 with high requirements for UX. So our main goal is to ...
- 234
10
votes
3
answers
2k
views
Is tabbing the best/only accessibility solution on a data heavy map UI?
We are building a digital library search tool for which we need to implement accessibility standards.
The map is VERY data dense (you can experience it here and I have included a screen capture below)....
2
votes
1
answer
2k
views
How do I make a dropdown select accessible?
What I mean by dropdown is the implementation found in Bootstrap and other common front-end frameworks. I want to replace <select> elements in my forms with dropdown menus because I need the ...
CommunityBot
- 1
0
votes
1
answer
149
views
Alternatives to a Product Add-On Carousel
I have started updating my companies website to be more accessible and as I began to work on our carousel slider I ran into numerous articles stating that carousels should be avoided all together. ...
CommunityBot
- 1
0
votes
1
answer
33
views
Accessibility text of the "- Any -" option on HTML <select> element - do i need dashes/marker around the "any" option?
For the HTML element - Do I need dashes/markers around the "any" option to satisfy accessibility? If no markers, does the text have to be a sentence ? What types of text is accessible?
For ...
- 3,170
0
votes
1
answer
3k
views
Pie chart colors accessibility
I have to find colors for a pie chart that look nice and are accessible at the same time. I found that pastel colors look nicer than bright bold colors.
But for different kinds of color blindness, ...
19
votes
5
answers
2k
views
How detailed should a text alternative version of an infographic be?
Had a debate with a collegue recently about a accessible text alternative to an infographic we have. When they wrote the text alternative they wrote in detail exactly what was going on in the picture ...
JonW♦
- 37.2k
1
vote
1
answer
569
views
What accessibility pattern for filter/sort "dropdown"?
I have a design that displays a list of content that you can filter by different categories. Each filter is displayed in a dropdown menu that lets you choose one or more options, which when activated (...
CommunityBot
- 1
3
votes
1
answer
95
views
(WCAG) Should I use HTML tables for displaying singular data sets?
I'd like to display tabular data (an order summary) in a vertical table (headings in the left column, values to the right). In my use case, there is only ever one data set to display, so I'm unsure ...
- 3,170
1
vote
2
answers
151
views
Why does NNG recommend skeleton screens for full page but not for individual components
I need to decide between using a skeleton screen or a loading animation for the contents of a modal.
The modal itself contains an image, title, paragraph, couple of CTAs and a carousel at the bottom ...
- 3,170
0
votes
3
answers
957
views
How should a screen reader pronounce links and buttons?
When a screen reader reads links, should they be pronounced as 'Link button', or 'Link'?
Example: Show more... (a link): should the screen reader say 'Link button', or 'Link'?
Also, how should the ...
CommunityBot
- 1
7
votes
0
answers
100
views
Braille input alternatives for people with less than three fingers per hand
I would like to know what braille input alternatives exist for blind users who do not have all of their fingers. I am interested in both software and hardware methods implemented in assistive ...
- 57
0
votes
2
answers
73
views
How can i demonstrate that a file has been uploaded from the selected element on a table in a dashboard
So, I have the following table on a dashboard that i'm trying to design in order certain process for the place where i work.
On it, I have a few fields (promoter's full name, legal terms, number, ...
- 1,654
3
votes
1
answer
73
views
How do unicode block characters affect accessiblity?
I'm formatting an online poem that uses blackout text for erasures. My plan is to use an XML block character ( █ █) or █) to replace the appropriate characters. Does this have any ...
- 36.5k