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.
842
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....
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 ...
- 5,425
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 ...
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 ...
- 111
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 ...
- 43
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 ...
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 ...
- 103
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 ...
- 23
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 ...
- 673
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....
- 115
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 ...
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 ...
- 143
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
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 "...
- 143
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 ...
- 1,050
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 ...
- 3
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 ...
- 113
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)....
- 203
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 ...
- 103
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 ...
- 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 ...
- 153
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 ...
- 596
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 ...
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 ...
- 31
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, ...
- 103
1
vote
3
answers
162
views
What are some cases, if any, where a button element should act as a link?
Common practice is for links to use the a element, and buttons to use the button element. But are there any cases (even if their edge cases) where a button, via Javascript, should behave like a link?
0
votes
1
answer
157
views
How to check contrast of a transparent button with a border?
Simple question but I can't find the correct way to test.
I have a normal button, that is transparent but has a border colour with some opacity. I'm not convinced that the contrast ration is high ...
- 23
18
votes
8
answers
4k
views
Is colour alone enough to convey warning?
I'm designing page that has an alerts panel in relation to healthcare. I'm using a pale red to convey that action needs to be taken immediately, orange to show that something is due soon and green to ...
3
votes
2
answers
192
views
Are contrast checkers really accurate?
Is WCAG AA level truly necessary? I'm having difficulty making optimal contrast choices, and honestly, bold text, even at 16px, appears much more readable than regular text. Additionally, I often ...
- 95
1
vote
2
answers
323
views
What's the right UI of a dropdown when it's disabled?
There are several settings that users need to go through, one of them is selecting a model. By default, a model is pre-selected in the dropdown field. However, if the user expands the advanced options ...
- 11
9
votes
5
answers
3k
views
How to indicate that a button is locked?
I am designing a service, where certain features would be available only for registered (and paid plan) users.
On the front page, there are two options: "Quick scan", that selects the ...
- 198
3
votes
2
answers
206
views
Accessibility of Button States
I've seen some discourse online that best practice is to design the 'focused' and 'hover' states of buttons differently.
I was wondering if there is any practical reason or accessibility requirements ...
- 31
2
votes
1
answer
87
views
How to Address Keyboard Limitations for Users without a Numeric Keypad?
I'm currently working on a web application where users can use their keyboard number pads (mainly the following keys 2,4,5,6,8) to change perspectives from which the user is watching a 3D scene. For ...
- 21
2
votes
1
answer
243
views
Do accessibility standards (WCAG AA) require a screen reader to announce an HTML element upon mouse hover?
We are using the screen reader NVDA. We have a website that we are trying to make WCAG AA compliant. If you use only a keyboard (no mouse), and use the Tab key to navigate around the page, whenever an ...
- 123
0
votes
1
answer
89
views
Minimum touch target for apps
It is stated in human interface guidelines and material design that the touch target should be 44x44 & 48x48 respectively. Many top apps don't follow; isn't this an accessibility issue?
0
votes
1
answer
176
views
Do small icons have to pass at least 3:1 for contrast accessibility?
Can anyone clarify if icons (UI elements) 20x20 etc have to be 3:1 and is that a recommendation?
Thanks
- 25
2
votes
4
answers
259
views
What are the best practices to decide the length of label characters on the buttons?
I have come across lot of designs on internet where buttons are labelled with two or three words. While I did my research on various design systems i found the guidelines talking about meaningful ...
- 1,114
1
vote
1
answer
355
views
Does an input type text with its css display property set to none need a label?
We've got a few inputs in various places, which are of type text but their display property is set to none. Something like this:
<input type="text" style="display:none" value=&...
- 13
1
vote
3
answers
176
views
Accessibility question. Company has secondary brand color (orange) that doesn't pass any requirements. Only option change color?
The company I work for uses dark blue as the main primary color and orange as the secondary color. They have used it for years. It doesn't pass any accessibility requirements. We can't go darker since ...
- 25
0
votes
1
answer
48
views
What is the UX guideline or ruleset for making accessible while we have conditional formatting colors applied to each rows?
While we have color palette to handle conditional formatting of table rows we want to create accessible color palette. How is this handled addressing accessibility for colour blind like greyscale?
Any ...
- 1,114
2
votes
3
answers
140
views
How to indicate disabled list items in a list with alternating backgrounds?
I have a table of search results that have alternating grey and white backgrounds that, on it's own, look quite pleasant in my opinion:
Now, the user also has the option to unselect items by clicking ...
- 23
0
votes
3
answers
238
views
How do I make a grid of radio buttons accessible and intuitive?
Bakground
I'm designing a form for recruiters where one question pertains what qualifications are required for the job.
My employer is very serious about accessibility/WCAG so any designs need to ...
- 21
0
votes
0
answers
44
views
Why does macOS default to not allowing tab to focus on buttons?
I know I can turn it on and also use the OptionTab but I was wondering why they would use that as the default in the first place. There was an article about it from 2014 but has been updated over ...
0
votes
2
answers
63
views
Are two buttons with similar appearance and text an accessibility concern?
I'm inspired by this answer: https://meta.stackexchange.com/a/386770/175002 but I've come across this elsewhere as well.
The two buttons read:
Accept all cookies
Accept only necessary
I'm straining ...
- 179
0
votes
2
answers
134
views
Should my headline be conversational, or stick to the numbers?
which of these two options is easier and clearer for the user to understand and consume?
Option 1:
Option 2:
- 1
0
votes
2
answers
302
views
APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base
According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use ...
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 (...
- 113
0
votes
1
answer
46
views
Section 508 and "applets and plugins"
Before the Section 508 refresh, 508 had the following provision:
(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, ...
- 133
0
votes
2
answers
891
views
Does a hover state background need to pass color contrast for accessibility?
We have some discussion going on between myself (design) and lead engineer. With this key question:
Does the background of a hover state have to pass color contrast?
Our current system has our ...
1
vote
3
answers
183
views
Design system – Different font sizes for small an big viewports
everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that ...
- 21