2

I have a list of "Texts" being displayed on a list. The user can reorder it when click on an action button, and when do that, an animation works as a feedback to the user. The Texts move, changing their positioning. All done with Ajax.

This animation is a good feedback for 99% of the users, they see the animation and knows when the process is over. But the problem is that visual impaired users don't see the animation, and they also need a feedback to know when the process is over.

enter image description here

Our software must have accessibility.

If I would render a feedback message, the screen reader software (JAWS, NVDA, etc) would read it perfectly, but the users who can see will also see this message, being redundant, because the animation already is a feedback to 99% of the users that are not visual impaired.

My question: is there a way I can provide a feedback message to the visual impaired users without being redundant for the other 99% that can see the animation? I looked for it in the ARIA documentation, but I haven't found a solution yet.

I think it's not possible to solve my problem without changing the way I do the user action's feedback (animation), but before change it, I want to be sure of that.

Improve this question
0

3 Answers 3

Reset to default
2

The approach would be to put it in a hidden div with text which can be read by screen readers only but wont be visible to people without Visual impairments. To quote this webaim article

Positioning content off-screen The following are the recommended styles for visually hiding content that will be read by a screen reader.

.hidden 
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:

<div class="hidden">This text is hidden.</div>

Sighted users will not see the hidden content at all. It will be out of their viewing range - hidden well to the left of the visible browser window. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.

Improve this answer
1
  • I think I can use your solution combined with an alert or dialog ARIA role.
    – John John
    Commented May 22, 2015 at 12:02
1

Perhaps an audio feedback like 'The list has been reordered' would be suitable? Audio information is a perfectly acceptable form of feedback for visual impaired users and they generally are used to it and value it.

On a separate note, if the users are blind or visually impaired your UI is problematic by the looks of things. I can identify that bin and the arrow buttons as it is but it's still too small and I have normal vision :)

Added following comments discussion:

If I knew more I might suggest you highlight the column that provides the order if it was a table, or write 'ordered by size: small to large' as a subheading above the table etc. It's not uncommon to list how a set of data is displayed above the data and that is screen reader friendly.

Improve this answer
8
  • This is done by the screen reader application. But to to this I need to render HTML.
    – John John
    Commented May 19, 2015 at 11:08
  • is that a problem?
    – Chris
    Commented May 19, 2015 at 11:10
  • The animation already is a Feedback for the users. They see the lines moving up and down when they click.
    – John John
    Commented May 19, 2015 at 11:11
  • so this is for all users and you are trying to cater for visual impaired users as well? If users are selecting an 'action' button that will reorder the list for them then they don't necessarily need extra feedback as they have chosen to perform the action.
    – Chris
    Commented May 19, 2015 at 11:19
  • 1
    Can't you add hidden element with ARIA role alert? You can add a timeout and remove the element after. This way only screen reader's will take a notice and announce. For normal users, your current screen animation will have enough feedback.
    – Harshal
    Commented May 19, 2015 at 12:50
1

First, you can add a message that is invisible to all but screen readers.

But I believe that you should really mark the container with aria-live.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.