399

Being a blind user, it has taken me quite a lot of time to find the "Ask Question" button. The button is firstly a simple anchor element. Secondly, it isn't placed near the top of the page.

Within the page, there's a header that is read out (all links). Then there is the main content area that follows. Then there is the sidebar. Right above this sidebar, there a heading level 2 "Looking for more? Browse the complete list of questions, or popular tags. Help us answer unanswered questions."

After this h2 element, I was able to find the "Ask Question" button/link. Initially, I was searching the page content for the button's caption (which was unknown). I searched for "Post question", "New question", "Ask a question", etc. I should have thought of searching "Ask Question". But somehow I couldn't think of that. Can we fix this in two ways:

  1. Mark it up as button element instead of an anchor element.
  2. Place it near the top of the page so that that can be quickly found.
23
  • 106
    What a great suggestion. Hopefully SO make this easy change ASAP.
    – Fattie
    Commented Mar 12, 2017 at 13:50
  • 1
    I think it's good idea like quora place ask question button next to search bar Commented Mar 12, 2017 at 19:01
  • 4
    This should be very easy to fix by simply changing the tab index of the element. I am assuming you were browsing links by using tab? Using a lower tab index for the ask question button will allow it to come up quicker, regardless of what its order of placement is on the page.
    – Travis J
    Commented Mar 12, 2017 at 19:25
  • 6
    @TravisJ Screen readers allow the user to skip back/forth between words/element using much more complex rules than tab index. See webaim.org/resources/shortcuts/jaws for some examples.
    – Basic
    Commented Mar 12, 2017 at 22:28
  • 2
    There is a related post regarding funky tab indexes all around at meta.stackoverflow.com/q/343808. The weirdness is not limited to the "Ask Question" button.
    – Jason C
    Commented Mar 13, 2017 at 1:46
  • 27
    This is exactly the kind of question that makes you realise that something may be logically positioned incorrectly when used in a different way than just visually - a reminder to all developers to make sure a websites works for everyone equally, something like this is a perfect and straightforward example of what can be wrong with a button when considering accessibility Commented Mar 13, 2017 at 11:42
  • 3
    Please do not try to "fix" this by sticking a tabindex on it. Any positive tabindex value is almost always a problem for both keyboard users and screen reader users.
    – aardrian
    Commented Mar 13, 2017 at 13:04
  • 4
    The designers should use a screen reader and blind-fold to validate that their designs are usable for blind users.
    – user4639281
    Commented Mar 13, 2017 at 15:30
  • 17
    Testing with a screen reader is actually pretty hard. It would be better to use people who actually know how to use them than just sticking a blindfold on someone...
    – ivarni
    Commented Mar 13, 2017 at 15:40
  • 14
    @JoeBlow don't ever make the assumption something is easy to change dude. you never know. Commented Mar 13, 2017 at 15:45
  • 2
    Not having used a screen-reader myself, I could use some clarification: when you say you searched for various phrases, does that mean searching the raw HTML text, the user-visible text, or labels and other text extracted from the HTML by the screen-reader? (Or something else?) Additionally, I don't mean to suggest that the link shouldn't be made easier to find, but could you have potentially found it more easily by searching for "ask" or "question" instead of longer phrases? Commented Mar 13, 2017 at 15:46
  • 4
    If Ctrl+G can open a sub-window to insert an image into a question, why can't Ctrl+Q open a new question page?
    – user4039065
    Commented Mar 13, 2017 at 16:06
  • 5
    Initially, I'll answer comments above. 1. I used Quick Navigation keys which are available in browse mode of screen reader. Blog explaining browse mode and app mode. 2. When I searched for "ask", I encountered "asked ..." that appears after each of the posts in main region. 3. Control+Q won't work if I stay in browse mode of screen reader. 4. Tabindex is certainly not recommended. Not necessary that screen reader user always uses tabs for navigating.
    – sidnc86
    Commented Mar 13, 2017 at 17:38
  • 2
    Thanks all for being part of this discussion.
    – sidnc86
    Commented Mar 13, 2017 at 17:38
  • 9
    I agree; the "Ask Question" button should be equally accessible for all... in tiny font, at the bottom of the page. Behind a Captcha. With Zalgo marks. Commented Mar 14, 2017 at 0:35

5 Answers 5

70

It shouldn’t become a button (or input) element.

The a element is the correct choice here, because clicking "Ask Question" leads to a page (https://stackoverflow.com/questions/ask), i.e., it’s a plain simple link (not submitting/toggling/etc. something), which just happens to be styled like a button (but styling shouldn’t affect element choice).

5
  • 3
    How about <a role="button"></a>?
    – juunas
    Commented Mar 13, 2017 at 13:38
  • 19
    @juunas except its role isn't as a button but an anchor, as pointed out in this answer. Commented Mar 13, 2017 at 15:13
  • 8
    Agree with the fact that it should be a link. That is right way to go. I thought for button because there aren't many buttons on page. And pressing "b" in browse mode of screen reader will help someone like me find button faster. But yes, other user might not use my technique of using quick navigation keys and might still end up in a problem. Placing it near top of page appeals more.
    – sidnc86
    Commented Mar 13, 2017 at 17:52
  • 6
    This answer does not address the accessibility aspect at all, which is what essentially the question is about. Commented Mar 14, 2017 at 0:27
  • 9
    @AndrewSavinykh: OP ends their question with two suggestions. My answer is about one of these two suggestions. And it does address accessibility, because if that suggestion would get implemented, it would lead to worse accessibility, so my answer tries to prevent that it gets implemented.
    – unor
    Commented Mar 14, 2017 at 1:05
51
  1. Place it near the top of the page so that that can be quickly found.

Sadly you can't tell but it's visually near the top of the page; the lack of a tabindex attribute puts it at the 15th place on this page. The real problem lies on the homepage—tabbing wise—it's placed after the questions' list.

Searching, answering and navigating are apparently the priorities, in that order. I don't know if that's deliberate or not though.

8
  • Yes, but though "searching, answering, and navigating" are the priorities, that is more from a visual standpoint. From an accessibility standpoint, asking should probably come after searching due to the number of items that can occur when trying to answer.
    – krillgar
    Commented Mar 13, 2017 at 11:00
  • tabbing-wise? What is the percentage of users using the tabulator when browsing? I think it is waaaay below 10 percent
    – juergen d
    Commented Mar 13, 2017 at 11:27
  • 129
    @juergend among the blind users, I assume somewhere near 100.
    – 1615903
    Commented Mar 13, 2017 at 11:29
  • 20
    All blind users are navigating by keyboard. I am a sighted user who uses the tab key constantly. Usually as my default interaction since my hands are already on my keyboard. Adding a tabindex is the wrong solution as that is wildly confusing for sighted users. Just move the link closer to the top of the page in the source order.
    – aardrian
    Commented Mar 13, 2017 at 13:11
  • But anyway, the use of tab button currently makes no sens, it goes through a bunch of useless things wherever you are starting from, and you can't upvote, and if you missed the functionality you want, well tab another 130 times to get it back... Commented Mar 13, 2017 at 14:28
  • 61
    "and if you missed the functionality you want, well tab another 130 times to get it back..." shift+tab?
    – Jacob
    Commented Mar 13, 2017 at 15:04
  • 2
    @1615903 somehow I thought they used voice commands. Don't they? Commented Mar 14, 2017 at 6:59
  • 14
    @JacobAlvarez sssssshhh ...don't divulge the secret advanced techniques that only members of the "Tab Master Race" know.
    – xDaizu
    Commented Mar 14, 2017 at 13:17
41

It should be possible to add an "ask question" link into header so that it's not visible to regular users and only accessible to screen readers.

Header seems like a natural place to contain links to important functionalities of the page to me.

9
  • 22
    In fact, why hide it at all? The button itself could be moved there.
    – Jed Fox
    Commented Mar 13, 2017 at 12:00
  • 17
    Agree with @JF, just move it in source order. Having two links that are the same, but one is visually hidden, just increases the odds that it will be forgotten in future updates.
    – aardrian
    Commented Mar 13, 2017 at 13:07
  • 1
    If you they were to move it in source order they'd have to put the sidebar before the mainbar. It's basically a two-col layout. That would make anyone wanting to read the main content work their way through the entire aside first.
    – ivarni
    Commented Mar 13, 2017 at 15:42
  • Good solution if it isn't going to affect any future enhancement activities. Someone referred to "might be forgotten". May be this could be a problem as part of future enhancements.
    – sidnc86
    Commented Mar 13, 2017 at 17:54
  • 1
    @ivarni the button is a part of the sidebar? Yeech! Visually it's a secondary (tertiary, actually) topbar, and that's what it should be in code. Commented Mar 14, 2017 at 7:01
  • By in the header, do you mean as a LINK element in the HEAD? Sounds like a good idea to me; it might be worth a small poll of the commonly used (by visually impaired people) browsers to see how they present LINKs. Commented Mar 14, 2017 at 9:05
  • @TobySpeight I meant the <header> (HTML5) element that contains the navbar. Commented Mar 14, 2017 at 10:45
  • @JanDvorak Yes, it is in the front-page context. Interestingly it's not when you're viewing a single question (like on this page) where it's in a separate div with id "question-header" above both the mainbar and sidebar. So if you're viewing a question it's placed around where it should be while if you're viewing a lot of questions it's not. That's probably even more confusing for someone who needs to navigate to it instead of just seeing it.
    – ivarni
    Commented Mar 14, 2017 at 11:43
  • Sad, that I cannot downvite @JF's comment. Having ask question always visible on my screen when browsing SO site - I'd become nuts.
    – usr1234567
    Commented Mar 14, 2017 at 22:54
29

I think we can keep it as it is without moving it anywhere. Mark its wrapping element as complementary landmark and give this wrapping element an aria-label as "question tools". Screen reader users first check the structure of a page by scanning for headings and landmarks.

-17

I Agree. I'm pretty inexperienced with StackOverflow, but I too did find the button placement slightly unintuitive. The current UX design makes it seem as if the Ask Question button is part of the answer that is currently being viewed rather than a part of the website itself.

I think that a very good solution would be something like what Quora does and have it by the search bar.

enter image description here

Not only does this make it very obvious, it also allows for a convenient follow through. If the question has not already been asked, just transition directly from search to asking the question.

5
  • 40
    Attaching that button to the search bar gives the impression that clicking it will submit the search.
    – johnnyRose
    Commented Mar 13, 2017 at 18:10
  • 5
    @johnnyRose I don't know anything about Quora, but maybe it isn't bad that the button actually does submit a search. Maybe it could list some search results above the question form. It might cut down on the number of duplicates. Commented Mar 13, 2017 at 18:52
  • 1
    Sorry, I should have put this in. Quora displays a Google like suggestions window of questions. If yours isn't in there, you just click Ask Questions and you can put in some details.
    – ymulki
    Commented Mar 13, 2017 at 19:34
  • 1
    @KodosJohnson very similar functionality is already added to the Question Title box when asking a question. After you've entered a certain amount of characters, it will search for similar questions based on the question title.
    – johnnyRose
    Commented Mar 13, 2017 at 20:59
  • @QPDev you can edit your answer and add the details! This is even encouraged. Commented Mar 14, 2017 at 18:36

You must log in to answer this question.

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