Accessibility issue when button is disables/enabled









up vote
0
down vote

favorite












I am facing accessibility issue when my button is enabled/disabled:
Below is my angular form:



<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>


Here my button is disabled on the condition if nothing is entered inside my input fields.
How can I convey to user that my button is disabled as focus can't be put on disabled button.
Do I actually need to convey to user about disabled button and convey when it is enabled.










share|improve this question





















  • Usually you change the style and the disabled buttons are greyed out.
    – Oram
    Nov 8 at 14:16










  • Have you tried updating the title attribute given the same condition with a different message?
    – t3__rry
    Nov 8 at 14:18














up vote
0
down vote

favorite












I am facing accessibility issue when my button is enabled/disabled:
Below is my angular form:



<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>


Here my button is disabled on the condition if nothing is entered inside my input fields.
How can I convey to user that my button is disabled as focus can't be put on disabled button.
Do I actually need to convey to user about disabled button and convey when it is enabled.










share|improve this question





















  • Usually you change the style and the disabled buttons are greyed out.
    – Oram
    Nov 8 at 14:16










  • Have you tried updating the title attribute given the same condition with a different message?
    – t3__rry
    Nov 8 at 14:18












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am facing accessibility issue when my button is enabled/disabled:
Below is my angular form:



<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>


Here my button is disabled on the condition if nothing is entered inside my input fields.
How can I convey to user that my button is disabled as focus can't be put on disabled button.
Do I actually need to convey to user about disabled button and convey when it is enabled.










share|improve this question













I am facing accessibility issue when my button is enabled/disabled:
Below is my angular form:



<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>


Here my button is disabled on the condition if nothing is entered inside my input fields.
How can I convey to user that my button is disabled as focus can't be put on disabled button.
Do I actually need to convey to user about disabled button and convey when it is enabled.







javascript html css wai-aria






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 8 at 14:12









Nitesh Rana

292215




292215











  • Usually you change the style and the disabled buttons are greyed out.
    – Oram
    Nov 8 at 14:16










  • Have you tried updating the title attribute given the same condition with a different message?
    – t3__rry
    Nov 8 at 14:18
















  • Usually you change the style and the disabled buttons are greyed out.
    – Oram
    Nov 8 at 14:16










  • Have you tried updating the title attribute given the same condition with a different message?
    – t3__rry
    Nov 8 at 14:18















Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16




Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16












Have you tried updating the title attribute given the same condition with a different message?
– t3__rry
Nov 8 at 14:18




Have you tried updating the title attribute given the same condition with a different message?
– t3__rry
Nov 8 at 14:18












2 Answers
2






active

oldest

votes

















up vote
0
down vote














Do I actually need to convey to user about disabled button and convey when it is enabled.




That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).




How can I convey to user that my button is disabled...




This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):



<button type="submit" [disabled]="conditions">button text</button>
<span class="show-on-disable">your text here</span>


CSS:



.show-on-disable 
display: none;

button[disabled] + .show-on-disable
display: inline;



Live Example:






document.querySelector("input[type=checkbox]").addEventListener("change", function() 
var btn = document.querySelector("button");
btn.disabled = !btn.disabled;
);

.show-on-disable 
display: none;

button[disabled] + .show-on-disable
display: inline;

<div>
<label>
<input type="checkbox">
Disable the button
</label>
</div>
<button type="submit">button</button>
<span class="show-on-disable">your text here</span>








share|improve this answer



























    up vote
    0
    down vote













    That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.



    However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.



    The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.






    share|improve this answer




















      Your Answer






      StackExchange.ifUsing("editor", function ()
      StackExchange.using("externalEditor", function ()
      StackExchange.using("snippets", function ()
      StackExchange.snippets.init();
      );
      );
      , "code-snippets");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "1"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader:
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      ,
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );













      draft saved

      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209516%2faccessibility-issue-when-button-is-disables-enabled%23new-answer', 'question_page');

      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote














      Do I actually need to convey to user about disabled button and convey when it is enabled.




      That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).




      How can I convey to user that my button is disabled...




      This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):



      <button type="submit" [disabled]="conditions">button text</button>
      <span class="show-on-disable">your text here</span>


      CSS:



      .show-on-disable 
      display: none;

      button[disabled] + .show-on-disable
      display: inline;



      Live Example:






      document.querySelector("input[type=checkbox]").addEventListener("change", function() 
      var btn = document.querySelector("button");
      btn.disabled = !btn.disabled;
      );

      .show-on-disable 
      display: none;

      button[disabled] + .show-on-disable
      display: inline;

      <div>
      <label>
      <input type="checkbox">
      Disable the button
      </label>
      </div>
      <button type="submit">button</button>
      <span class="show-on-disable">your text here</span>








      share|improve this answer
























        up vote
        0
        down vote














        Do I actually need to convey to user about disabled button and convey when it is enabled.




        That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).




        How can I convey to user that my button is disabled...




        This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):



        <button type="submit" [disabled]="conditions">button text</button>
        <span class="show-on-disable">your text here</span>


        CSS:



        .show-on-disable 
        display: none;

        button[disabled] + .show-on-disable
        display: inline;



        Live Example:






        document.querySelector("input[type=checkbox]").addEventListener("change", function() 
        var btn = document.querySelector("button");
        btn.disabled = !btn.disabled;
        );

        .show-on-disable 
        display: none;

        button[disabled] + .show-on-disable
        display: inline;

        <div>
        <label>
        <input type="checkbox">
        Disable the button
        </label>
        </div>
        <button type="submit">button</button>
        <span class="show-on-disable">your text here</span>








        share|improve this answer






















          up vote
          0
          down vote










          up vote
          0
          down vote










          Do I actually need to convey to user about disabled button and convey when it is enabled.




          That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).




          How can I convey to user that my button is disabled...




          This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):



          <button type="submit" [disabled]="conditions">button text</button>
          <span class="show-on-disable">your text here</span>


          CSS:



          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;



          Live Example:






          document.querySelector("input[type=checkbox]").addEventListener("change", function() 
          var btn = document.querySelector("button");
          btn.disabled = !btn.disabled;
          );

          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;

          <div>
          <label>
          <input type="checkbox">
          Disable the button
          </label>
          </div>
          <button type="submit">button</button>
          <span class="show-on-disable">your text here</span>








          share|improve this answer













          Do I actually need to convey to user about disabled button and convey when it is enabled.




          That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).




          How can I convey to user that my button is disabled...




          This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):



          <button type="submit" [disabled]="conditions">button text</button>
          <span class="show-on-disable">your text here</span>


          CSS:



          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;



          Live Example:






          document.querySelector("input[type=checkbox]").addEventListener("change", function() 
          var btn = document.querySelector("button");
          btn.disabled = !btn.disabled;
          );

          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;

          <div>
          <label>
          <input type="checkbox">
          Disable the button
          </label>
          </div>
          <button type="submit">button</button>
          <span class="show-on-disable">your text here</span>








          document.querySelector("input[type=checkbox]").addEventListener("change", function() 
          var btn = document.querySelector("button");
          btn.disabled = !btn.disabled;
          );

          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;

          <div>
          <label>
          <input type="checkbox">
          Disable the button
          </label>
          </div>
          <button type="submit">button</button>
          <span class="show-on-disable">your text here</span>





          document.querySelector("input[type=checkbox]").addEventListener("change", function() 
          var btn = document.querySelector("button");
          btn.disabled = !btn.disabled;
          );

          .show-on-disable 
          display: none;

          button[disabled] + .show-on-disable
          display: inline;

          <div>
          <label>
          <input type="checkbox">
          Disable the button
          </label>
          </div>
          <button type="submit">button</button>
          <span class="show-on-disable">your text here</span>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 8 at 14:16









          T.J. Crowder

          671k11611841283




          671k11611841283






















              up vote
              0
              down vote













              That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.



              However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.



              The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.






              share|improve this answer
























                up vote
                0
                down vote













                That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.



                However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.



                The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.






                share|improve this answer






















                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.



                  However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.



                  The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.






                  share|improve this answer












                  That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.



                  However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.



                  The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 9 at 4:04









                  slugolicious

                  3,80411318




                  3,80411318



























                      draft saved

                      draft discarded
















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209516%2faccessibility-issue-when-button-is-disables-enabled%23new-answer', 'question_page');

                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

                      Crossroads (UK TV series)

                      ữḛḳṊẴ ẋ,Ẩṙ,ỹḛẪẠứụỿṞṦ,Ṉẍừ,ứ Ị,Ḵ,ṏ ṇỪḎḰṰọửḊ ṾḨḮữẑỶṑỗḮṣṉẃ Ữẩụ,ṓ,ḹẕḪḫỞṿḭ ỒṱṨẁṋṜ ḅẈ ṉ ứṀḱṑỒḵ,ḏ,ḊḖỹẊ Ẻḷổ,ṥ ẔḲẪụḣể Ṱ ḭỏựẶ Ồ Ṩ,ẂḿṡḾồ ỗṗṡịṞẤḵṽẃ ṸḒẄẘ,ủẞẵṦṟầṓế