Accessibility testing on mobile apps based on WCAG guidelines

There are questions about how WCAG 2.0+ is applied to accessibility testing on mobile apps, which suggests that the same guidelines apply but are slightly adjusted for web applications compared to mobile applications.

However, because some of the designs and interactions for mobile apps are linked to the actual implementation of the hardware and mobile OS, I wonder if there are processes (and if so, are there tools that assist with the process such as the WAVE accessibility tool) that can be used to test mobile app accessibility.

Any aspects of WCAG that relates to user experiences and ensuring usability is measured based on testing with users rather than just going through code or software based analysis should be the same, so I am interested in the code and technical implementation analysis of accessibility against the WCAG guidelines.

What are the accessibility concerns of a checkbox based navigation?

Accessible checkboxes usually require two operations to control: first the user needs to ‘focus’ the checkbox (usually by using the ‘tab’ key to move through the interface until they reach the right control) and then they need to change the state of the checkbox (usually using the ‘space’ key). Sighted users will skip through the page using visual cues such as headings or images but a visually impaired user will tab through the page from link-to-link or control-to-control until they reach the one they want without reading any text in between.

That’s your first hurdle: how does the user know what the control is or does? – Your control will need to be well labelled so that the user knows exactly what the control does without relying on any text, icons or images around it. You might also want to look into ‘ARIA roles’ to help with marking interactive elements in a more accessible way.

Looking at the code you’re proposing to use, I can also see another issue: How does the user know that a change has taken place once they have operated the control? In the code you linked to, the only non-visual change is that the checkbox reports as ‘checked’ when activated. I don’t think that alone is enough to signal the full extent of the control’s purpose and status.

I assume that you’re proposing to use this technique in order to avoid using other technologies but I don’t think you can make this an accessible solution without using other technologies. I would abandon this and look for an accessible solution using JavaScript.

accessibility – Does WCAG (2.1) apply to native (iOS, Android) mobile apps?

WCAG stands for Web Content Accessibility Guidelines, but it never defines what is meant by “web content”.

Many of the success criteria are defined in terms of “user agent” as if they meant a web browser, but the WCAG 2.0 Glossary defines “user agent” again in the terms of “web content”, while it also mentions a “media player” as an example of a user agent that “…helps retrieving and rendering Web content”. So if a stream of video data is considered web content, then even multiplayer video games can be considered as rendering web content?

Then there is this 2015 document How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile that specifically mentions “…native applications (also known as “mobile apps”)”, but then it says “(the document) provides informative guidance, but does not set requirements.”

I am perplexed.

My question: Does the WCAG 2.1 success criteria apply to native (iOS, Android) mobile apps?

accessibility – Colorblindness-friendly colors called “green”, “blue”, “yellow”, and “red”

I need to choose a palette of four colors that satisfies the following two conditions:

  1. Colorblind people can easily distinguish all four of the colors.
  2. People with normal color vision can unambiguously identify each of my colors with one of the names “green”, “blue”, “yellow”, and “red”.

For context, I’m making a video game version of a board game that uses standard Icehouse pieces. The shape, size, position, and orientation of the pieces are all relevant to gameplay, so I can’t use any of them as a substitute for color. Also, each of the colors are referred to by name in the rules, so using colors that are ambiguous or unrelated to the original colors would be confusing to people familiar with the original board game.

Given the above, what’s my best option?

accessibility – When is it ‘wrong’ to put tabindex=0 on non-interactive content?

Adapt did the wrong thing for the right reason. The blog you referred to had some great information. Change the question from “Is accessibility required?” to “Is accessibility desirable?”. Based on their blog, they have a good concept of what accessibility is but their concept of how to implement accessibility isn’t accurate. They seem to think that those that need accessible accommodations should be segregated by turning on an “accessible mode”. As we know from just about any country’s history, segregation is not a solution.

Their accessibility page says:

All Adapt courses have the accessibility feature built-in. However, it
must be enabled during development by the course author before the
course is published.

So, does the course author have to make the decision whether to turn that feature on or not? Is it up to the course author to decide if accessibility is desirable (the word they used in their blog)? Why is there an option to turn it on? Why is it not always on? Or rather, why is there an option at all? The default should be to build an accessible interface.

That same option/segregation is offered to the end user too.

To activate the accessibility feature while viewing a course, press
the Tab key. A button is displayed: “Turn accessibility on?”

Once the feature is activated, pressing the Tab key navigates the
learner through content. Focused content regions are highlighted with
an outline. And ARIA labels are enabled for assistive technology such
as screen readers.

What’s different about the interface that requires accessibility to be turned on? Any interactive object you can navigate to with the keyboard should always have a valid label or name (which is what ARIA labels give you if you can’t provide a label/name with a native HTML element). Always. Why would you ever not want a valid name for an object? You shouldn’t have to turn that option on.

A user that requires a screen reader to interact with the page does not want to be treated any differently than a full sighted user. They want to navigate to interactive objects using the TAB key just like any other keyboard user and they do not expect to tab to heading or paragraphs or lists or whatever.

Screen reading software has fantastic tools built in that allow for navigation to non-interactive elements. You can press the ‘H’ key to go to the next heading (and hear it read), or for more granularity, press the ‘2’ key to go to the next <h2>. You can press the ‘L’ key to go to the next list, or the ‘I’ (eye) key to go to the next element in a list. Press ‘R’ or ‘D’ (depending on the screen reader) to go to the next “landmark”. None of these elements are natively keyboard accessible and are not expected to be. They should not have tabindex="0".

Now, none of these shortcuts will work if the content author does not use native HTML tags that have built in semantic meaning. That is, use

<h2>Really important info</h2> 

instead of

<div class="big-bold-font">Really important info</div>

Screen reading software does not know that the “big-bold-font” class means the element should be a heading but it definitely knows what an <h2> is. In the latter case, if you have to use a <div>, that’s where ARIA attributes come in:

<div class="big-bold-font" role="heading" aria-level="2">Really important info</div>

With the correct semantic meaning, whether provided by native HTML tags such as <h2> or augmented by using ARIA attributes such as role and aria-level, a screen reader user can easily navigate to these elements without them having tabindex="0"'.

That’s why I think Adapt understands what accessibility is but does not understand how accessibility is used.

So that’s a really, really long answer (sorry) to what could have been a simple answer. Your OP title is

“When is it ‘wrong’ to put tabindex=0 on non-interactive content?”

Answer: Always.

accessibility – Best way to get a WCAG report for an Android App?

To ensure usability of our app and also to have something that we can present to the outside, we need to have a report on how accessible our app is. It has to comply at least to the WCAG AA standard.

I know there are tools like Google’s Accessibility Scanner, axe for android etc., but these obviously don’t cover the entirety of WCAG’s criteria.

A good example of what I’m looking for is probably something like this. Surely it doesn’t have to be that detailed, but it seems like a reasonable ballpark. I’m relatively new to this, so I’m not too sure how to go about it.

Accessibility – What to focus on after deleting rows

Replace the line with "deleted" and focus it with tabindex="-1" (So ​​you can only focus it programmatically).

As soon as the focus leaves the row, you can make it disappear if you wish (but this is not necessary as it is no longer focusable).

I recommend this as if you focused on the next delete button. The user may not notice that an action has been performed or think that an action has failed, and may end up deleting the wrong line.

If you do what is said above, it will be greeted with "deleted" after the line has been successfully deleted and will be able to navigate from where you were already in the list (which should make it easy to align your orientation on the Keep page).

Accessibility – Is there a way to know all the links provided on a website?

First of all, I'm not sure if this question belongs to this forum. I've hesitated with Stackoverflow, but this isn't really a programming question (although a program can be a valid answer).

To decide which email address to use, I want to know what links are suggested by an email provider. That brings me to my question

Is there a way to know all the links provided on a website?

I don't want to spend time looking for cheatsheet. I don't want a location-specific or location-specific solution.

Solution I'm looking for:

1. an addon or
2. a small program that uses the name of the website as a parameter or
3. something I didn't think of …

Accessibility – What is the clearest way to display "less than"?

If you want sex, just say it – you should strive to convey information as clearly as possible when possible.

< 2.1 miles is less clear than less than 2.1 miles. Such as 5 ms is less clear than 5 milliseconds.

Note that less than 2.1 miles is not the same as 2.1 miles or less - The former is exclusive (2.1 miles) while the latter is included. Given the unity, I don't think anyone will care, so the shorter version wins.

But in 2.1 miles or less The important amount is loaded from the front while in less than 2.1 miles It is the third character.

You can also use the label Max distance to venueso that you no longer have to think about it - just say 2.1.

Don't repeat yourself - There is already miles in the scale so you can only use it 2.1 instead of 2.1 miles. Can you say 60 what's in it:

A slider with a scale in Celsius and a thumb with the label 60

And as seen in the (Source) section above, you can use a thumb, but that's not a good thing if users need to see the value when they don't interact with it (unless the thumb is always there).

It all depends, but my voice is Max distance to venue With 2.1

wcag – Accessibility (with Microsoft Narrator as screen reader)? Anyone here with some practical guidelines?

As a front-end developer in a small business agency (<30 developers), I try to test accessibility better and screen readers are a must.

I am a Windows user and also have access to a MAC. So I try to use NVDA (and Microsoft Narrator), then go to MAC and use its voice-over. I always don't feel 100% when my tests are good enough since I'm not an experienced user of screen readers and after reading a lot about it I found this useful page. https://webaim.org/articles/screenreader_testing/ – find me here in this sentence;

Screen reader users are one of the main beneficiaries of your accessibility efforts. So it makes sense to understand their needs. Of course, you don't want to fall into the trap that accessibility is only relevant for screen reader users.

Now to the question: How do you and your company deal with screen reader tests?

Do you have the required skill level or outsource it (I think this has to be tested manually, but maybe someone is using some advanced automatic tests)?

And I found this on MS Narrator:

Windows Narrator is not a real screen reader, but a toy!

(https://stackoverflow.com/a/27756562/3365805) – but now we are in 2020 and I would like to think that MS Narrator should be "better" – what are your experiences here?

The goal here is of course 100% compliance with WCAG 2.0 A and 2.1 A (in some cases also AA).