13

I've noticed that after accepting answers, e.g. this one, I have no indication that it is accepted, using a screen reader.

This has been occurring on multiple SE sites.

The screen reader reports the button as toggle button pressed or not pressed. In this case, it says Toggle button not pressed even after I press it.

Can this please be fixed?

  • Sorry, but I can't reproduce the problem. I have been able to unaccept and accept an answer here both using the mouse and the keyboard. What exact system are you using? Also it takes a few second for the state to change. – MEE the setup wizard Jan 16 at 20:47
  • 3
    Would it be possible to share a link to an answer you actually tried to accept? Maybe we spot something special about it but it would definitely helps if a dev needs to go through logfiles to find the accept attempt. Maybe share the browser, OS and screenreader software if you can, in case that turns out to be part of the problem. – rene Jan 16 at 20:48
  • There were two sites in which I attempted to accept answers. One was music.stackexchange.com/questions/78809/… and the other is on ham.stackexchange.com/questions/12619/… I use NVDA 2018.4.1 on Windows 10 with Google Chrome. The interesting thing is that the up vote buttons work. – HeavenlyHarmony Jan 16 at 20:52
  • it looks like the attribute aria-pressed on the accept-button remains false, despite me clicking on the accept link and other attributes and classes change. IIRC the aria attributes in the DOM are used by screenreaders so that could explain that your screenreader doesn't pickup the change in state. – rene Jan 16 at 20:54
  • 3
    Just FYI that answer on Music.se is accepted. – rene Jan 16 at 20:56
  • 1
    I'm not too familiar with Aria, Dom, or IIRC. Is this something new that has been developed? Is a remedy available either on the SE site or for the screen reader? – HeavenlyHarmony Jan 16 at 20:57
  • 2
    IIRC is short for "If I Recall Correctly", sorry about that. Aria and DOM are technical terms used by browsers. If you're not a webdeveloper it is okay you don't understand what I'm talking about. – rene Jan 16 at 20:59
  • I mostly do basic HTML and CSS. I'm not too advanced on content management systems and rich internet applications. Thanks for your explanation, though. Hope this gets fixed soon. – HeavenlyHarmony Jan 16 at 21:02
  • 2
    Yeah, I pinged a CM in chat. That is all I can do for this moment. – rene Jan 16 at 21:04
7

This will be fixed in the next build.

When the accept request completes, it does two things:

  1. Mark all answers as unaccepted (in case we're unaccepting or switching accepted answers).
  2. Mark the newly accepted answer as accepted.

To do that, I have a helper function that switches the ARIA state and sets the appropriate classes:

function setSelected($el, value) {
    $el
        .attr('aria-pressed', value ? 'true' : 'false')
        .each(function () {
            var selectedClasses = $(this).data('selected-classes');
            if (selectedClasses) {
                $(this).toggleClass(selectedClasses, value);
            }
        });
}

Unfortunately, when I rehighlighted the selected answer, I omitted the value parameter:

// reset old accepted answer checks
setSelected($links, false);

// server sends down which vote type id was successful, either accept or undo
if (parseInt(data.Message, 10) == voteTypeIds.acceptedByOwner) {
    setSelected($clicked); // BUG
}

Since value is undefined and undefined is falsey, the button got stuck with aria-pressed="false". This bug didn't surface so dramatically visually because toggleClass has a different behavior if the second parameter is missing or undefined, so it added the visual styles which had been removed a few lines earlier.


I've also added a couple more accessibility changes while I'm in the area:

  • On pages where you're not the question owner, focusing on the accepted indicator will cause the tooltip to load (previously it required a mouse enter event).
  • I've replaced the loading indicator with the new visual style and set it up as a role="alert" so "Loading..." gets announced when you click on the accept button. (This will apply to future uses of the new loading indicator as well.)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .