WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mobile Native apps - buttons that use colours and text without any borders.

for

From: Jonathan Avila
Date: Jan 25, 2020 4:05PM


HI Sean, people have done some research but their goal was only to find out if users could figure out that the items were actionable. They didn't measure the amount of time, fatigue, anxiety., frustration, etc. My point is that these are issues for people with low vision and cognitive disabilities yet research when done with only an end goal in mind may produce evidence that says people can use them even if the user is exhausted after completing the action -- their objective is to only document that yes a person could do it somehow.

We need research in our community that really examines the impact on users holistically and accurately measures the impact of bad design on a spectrum of factors not just could you eventually get it done. On mobile these issues are compounded by the fact that you can't hover a pointer or focus a keyboard (without attaching a different pointing device or keyboard) which might provide additional affordance.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Murphy, Sean
Sent: Thursday, January 23, 2020 5:35 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Steve,

Your referring to SC 1.4.1 where you cannot only use colour alone. This is a mobile native app, not web. The sc 1.4.11 I will have a look at, thanks for that pointer.

The standards provided are great. But I am more concern on everyday usage that this is occurring in all mobile native apps on both platforms on how people with Low vision and Colour Blindness are handling it. What about people who have cognitive issues as well. Has anyone done any studies in this space to find out if these types of buttons are easily understood and comprehended?

Regards
Sean Murphy


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Steve Green
Sent: Friday, 24 January 2020 1:41 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I agree that SC 1.4.11 states that button borders are not needed to identify controls, but I believe this conflicts with another SC. Unfortunately, I can't recall which it is - perhaps 1.3.1 or 1.4.1. Anyway, that one says something to the effect that link text needs some form of affordance, such as an underline, if the context does not make it obvious that it is a link. Links in menus do not require such affordances because the grouping together of the words makes it obvious that they are links (according to the SC). Technique G182 talks about this.

Although links and buttons are different things, my view is that the same reasoning applies. A single button without a border does not have enough context for users to know it is a button, so some other affordance, such as an underline is required. That may not be necessary for groups of buttons though.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan Avila
Sent: 23 January 2020 14:19
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

Hi Sean, WCAG 2.1 SC 1.4.11 indicates that button borders are not needed to identify controls. It leans on the idea that the text alone is enough to communicate the item is actionable. I personally have concerns with this notion because that assumes a certain level of cognition and also ability to scan and read all text in order to understand a role. Borders, backgrounds, and other indicators and other affordances help people with low vision and cognitive disabilities with cues so they don't have to read through each piece of text trying to figure out if it is actionable or not and doesn't require them to try and mouse over everything or tab to it to find out. While it is possible to apply custom CSS to buttons to in a browser to make all buttons appear actionable this is not always an option such as in mobile browsers and many users won't even know this is an option.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Murphy, Sean
Sent: Thursday, January 23, 2020 12:54 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


All,

From iOS 7 and onward Apple introduce buttons without any borders. The button only has a colour background with text. There is an accessibility feature when turned on provides a underline for the button to help a low vision user to know the it is a button if they cannot determine the colour. Android now apparently is also using this design style. Below is a graphic showing an example on what I am referring too:

[cid:image001.jpg@01D5D20D.A597BB50]


Does anyone know how the above impacts users with colour blindness or low vision? Is there any stats indicating what type of impact the above has to users? As we are trying to identify if any extra accessibility consideration is required.

Note, We are aware the above could fail "Using only colour" SC but all the OS's are now using it, indicating either really bad practice or relying on assistive tech within the OS.

Sean