Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible

Button

Dropdown
Creating an
Introduction
My main role in recent times is to
work on the UX/UI and front-end
development of Pattern Libraries
for web applications.
However, I also work in the
Accessibility space. My focus in this
area is helping developers build
accessible web componen...
One web component that can
present accessibility issues is the
button dropdown.
A button dropdown is where a
button is used to trigger the display
of contextual menus - such as a list
of links.
A diagram showing a button “Weyland Industries” with no dropdown displayed
A diagram showing a button “Weyland Industries” with the dropdown displayed below. 

The dropdown displays three options: ...
We’re going to look at a range of
possible checkpoints that could
help make button dropdowns more
accessible.
We’ll use an imaginary example of a
button dropdown that allows users
to switch their current
organisation.
A diagram showing a button “Weyland Industries” with the dropdown displayed below. 

The dropdown displays three options: ...
1.
Semantics
As the name suggests, the ideal
element that should be used for the
trigger, is the <button> element.
<button  type="button">  
    Weyland  Industries  
</button>
The fundamental difference between
buttons and links is that buttons
should do something (cause
something to happen), and l...
The markup for the dropdown
depends on the role of the items
inside. If the items are a list of links,
then an unordered l...
<ul>  
    <li><a  href="#">Weyland  Industries</a></li>  
    <li><a  href="#">Stark  Industries</a></li>  
    <li><a  h...
2.
Getting to the button
Keyboard-only users should be
able to TAB to the button, which
then receives focus.
3.
Announcing the button
The aria-­‐label attribute can be
used to announce the button value
along with any additional
information to screen reader...
For modern screen readers, the
aria-­‐label value will be
announced instead of the button
value.
<button  
    type="button"  
aria-­‐label="Current  company:  Weyland  Industries.  Use  
the  dropdown  menu  to  switch...
The aria-­‐haspopup="true"
attribute can be used to announce
the button as a “popup button” to
screen readers.
This is important, as it tells screen
reader users that it is a different
type of button - not a normal
button associated w...
<button  
    type="button"  
aria-­‐label="Current  company:  Weyland  Industries.  Use  
the  dropdown  menu  to  switch...
The aria-­‐expanded="false"
attribute can be used to announce
the current state of the popup
button to screen readers - i....
The "false" value would need to
be changed to "true" via
JavaScript as soon as the user
triggers the button.
<button  
    type="button"  
aria-­‐label="Current  company:  Weyland  Industries.  Use  
the  dropdown  menu  to  switch...
Alternatively, the aria-­‐
expanded="true" attribute could
be injected via JavaScript only
when the button is triggered -
...
4.
Triggering the button
For keyboard-only users, ENTER or
SPACEBAR strokes should trigger
the dropdown to appear.
5.
After the button is
triggered
If the aria-­‐expanded="false"
attribute is present in the default
button state, it should be changed
to aria-­‐expanded="...
If the aria-­‐expanded="false"
attribute is not present in the
default button state, the aria-­‐
expanded="true" should be...
<button  
    type="button"  
aria-­‐label="Current  company:  Weyland  Industries.  Use  
the  dropdown  menu  to  switch...
Focus should immediately shift to
the <ul> element and the dropdown
should become visible.
This is something that most button
dropdown solutions do not solve
elegantly. In many cases, users
trigger the button but ...
Users are either given silence after
they trigger the button, or the button
information is repeated again. This
can cause ...
The <ul> element could be given an
aria-­‐label value, which means
that when it receives focus, it’s
purpose is announced.
<ul  aria-­‐label="Switch  Companies">  
    <li><a  href="#">Weyland  Industries</a></li>  
    <li><a  href="#">Stark  I...
A side note:

If the current organisation exists in
the long list of dropdown items, it
may be a good ideal to flag this it...
This can be achieved with a range
of different methods, including
providing additional information
that is hidden off-screen.
<ul  aria-­‐label="Switch  Companies">  
    <li>  
        <a  href="#">  
            <span  class="hidden">Current  com...
8.
To escape the dropdown
For keyboard-only users, the ESC
keystroke should close the
dropdown and return focus to the
button.
7.
To navigate through
items within the
dropdown
When focus has shifted to the <ul>
element, keyboard-only users
should be able to use TAB, SHIFT
TAB, UP ARROW or DOWN
ARR...
When users reach the start or end of
the list, UP ARROW and DOWN
ARROW keystrokes should then
have not have any effect.
8.
Selecting a dropdown
item
Keyboard-only users should be able
to select a dropdown menu item
using ENTER and possibly the
SPACEBAR keystrokes.
9.
To leave the dropdown
Keyboard-only users should be able
to TAB forward through the
dropdown items and then on to
other focusable items outside ...
As soon focus leave the last
dropdown item, the dropdown
should disappear.
Users should be able to SHIFT
TAB backwards through the
dropdown items and back to the
button.
The dropdown should remain open
when the button receives focus.
(Users can close the dropdown by
triggering the button aga...
Conclusion
So, that’s it. A few simple pointers
to help make button dropdowns
more accessible.

Thanks for listening!
Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Lin...
Upcoming SlideShare
Loading in …5
×

Creating an Accessible button dropdown

1,889 views

Published on

A quick slide deck that outlines a range of pointers that can be used to help make button dropdowns more accessible.

Published in: Education
  • Be the first to comment

Creating an Accessible button dropdown

  1. 1. Accessible
 Button
 Dropdown Creating an
  2. 2. Introduction
  3. 3. My main role in recent times is to work on the UX/UI and front-end development of Pattern Libraries for web applications.
  4. 4. However, I also work in the Accessibility space. My focus in this area is helping developers build accessible web components for complex Web apps.
  5. 5. One web component that can present accessibility issues is the button dropdown.
  6. 6. A button dropdown is where a button is used to trigger the display of contextual menus - such as a list of links.
  7. 7. A diagram showing a button “Weyland Industries” with no dropdown displayed
  8. 8. A diagram showing a button “Weyland Industries” with the dropdown displayed below. The dropdown displays three options: “Weyland Industries”, “Stark Industries” and “Cyberdyne Systems”
  9. 9. We’re going to look at a range of possible checkpoints that could help make button dropdowns more accessible.
  10. 10. We’ll use an imaginary example of a button dropdown that allows users to switch their current organisation.
  11. 11. A diagram showing a button “Weyland Industries” with the dropdown displayed below. The dropdown displays three options: “Weyland Industries”, “Stark Industries” and “Cyberdyne Systems”
  12. 12. 1. Semantics
  13. 13. As the name suggests, the ideal element that should be used for the trigger, is the <button> element.
  14. 14. <button  type="button">      Weyland  Industries   </button>
  15. 15. The fundamental difference between buttons and links is that buttons should do something (cause something to happen), and links should go somewhere (go to a different location).
  16. 16. The markup for the dropdown depends on the role of the items inside. If the items are a list of links, then an unordered list of links is ideal.
  17. 17. <ul>      <li><a  href="#">Weyland  Industries</a></li>      <li><a  href="#">Stark  Industries</a></li>      <li><a  href="#">Cyberdyne  Systems</a></li>   </ul>
  18. 18. 2. Getting to the button
  19. 19. Keyboard-only users should be able to TAB to the button, which then receives focus.
  20. 20. 3. Announcing the button
  21. 21. The aria-­‐label attribute can be used to announce the button value along with any additional information to screen reader users.
  22. 22. For modern screen readers, the aria-­‐label value will be announced instead of the button value.
  23. 23. <button      type="button"   aria-­‐label="Current  company:  Weyland  Industries.  Use   the  dropdown  menu  to  switch  companies"   >      Weyland  Industries   </button>
  24. 24. The aria-­‐haspopup="true" attribute can be used to announce the button as a “popup button” to screen readers.
  25. 25. This is important, as it tells screen reader users that it is a different type of button - not a normal button associated with submitting a form etc.
  26. 26. <button      type="button"   aria-­‐label="Current  company:  Weyland  Industries.  Use   the  dropdown  menu  to  switch  companies"      aria-­‐haspopup="true"   >      Weyland  Industries   </button>
  27. 27. The aria-­‐expanded="false" attribute can be used to announce the current state of the popup button to screen readers - i.e the dropdown below the button is not currently expanded.
  28. 28. The "false" value would need to be changed to "true" via JavaScript as soon as the user triggers the button.
  29. 29. <button      type="button"   aria-­‐label="Current  company:  Weyland  Industries.  Use   the  dropdown  menu  to  switch  companies"      aria-­‐haspopup="true"      aria-­‐expanded="false"   >      Weyland  Industries   </button>
  30. 30. Alternatively, the aria-­‐ expanded="true" attribute could be injected via JavaScript only when the button is triggered - which would reduce the amount of information being announced.
  31. 31. 4. Triggering the button
  32. 32. For keyboard-only users, ENTER or SPACEBAR strokes should trigger the dropdown to appear.
  33. 33. 5. After the button is triggered
  34. 34. If the aria-­‐expanded="false" attribute is present in the default button state, it should be changed to aria-­‐expanded="true" via JavaScript.
  35. 35. If the aria-­‐expanded="false" attribute is not present in the default button state, the aria-­‐ expanded="true" should be injected via JavaScript.
  36. 36. <button      type="button"   aria-­‐label="Current  company:  Weyland  Industries.  Use   the  dropdown  menu  to  switch  companies"      aria-­‐haspopup="true"      aria-­‐expanded="true"   >      Weyland  Industries   </button>
  37. 37. Focus should immediately shift to the <ul> element and the dropdown should become visible.
  38. 38. This is something that most button dropdown solutions do not solve elegantly. In many cases, users trigger the button but the focus does not shift at all.
  39. 39. Users are either given silence after they trigger the button, or the button information is repeated again. This can cause confusion for users who cannot see that the dropdown has been triggered, but nothing has been announced.
  40. 40. The <ul> element could be given an aria-­‐label value, which means that when it receives focus, it’s purpose is announced.
  41. 41. <ul  aria-­‐label="Switch  Companies">      <li><a  href="#">Weyland  Industries</a></li>      <li><a  href="#">Stark  Industries</a></li>      <li><a  href="#">Cyberdyne  Systems</a></li>   </ul>  
  42. 42. A side note:
 If the current organisation exists in the long list of dropdown items, it may be a good ideal to flag this item as the current organisation for screen reader users.
  43. 43. This can be achieved with a range of different methods, including providing additional information that is hidden off-screen.
  44. 44. <ul  aria-­‐label="Switch  Companies">      <li>          <a  href="#">              <span  class="hidden">Current  company:  </span>              Weyland  Industries          </a>      </li>      <li><a  href="#">Stark  Industries</a></li>      <li><a  href="#">Cyberdyne  Systems</a></li>   </ul>
  45. 45. 8. To escape the dropdown
  46. 46. For keyboard-only users, the ESC keystroke should close the dropdown and return focus to the button.
  47. 47. 7. To navigate through items within the dropdown
  48. 48. When focus has shifted to the <ul> element, keyboard-only users should be able to use TAB, SHIFT TAB, UP ARROW or DOWN ARROW to move forwards or backwards through the list items.
  49. 49. When users reach the start or end of the list, UP ARROW and DOWN ARROW keystrokes should then have not have any effect.
  50. 50. 8. Selecting a dropdown item
  51. 51. Keyboard-only users should be able to select a dropdown menu item using ENTER and possibly the SPACEBAR keystrokes.
  52. 52. 9. To leave the dropdown
  53. 53. Keyboard-only users should be able to TAB forward through the dropdown items and then on to other focusable items outside the dropdown.
  54. 54. As soon focus leave the last dropdown item, the dropdown should disappear.
  55. 55. Users should be able to SHIFT TAB backwards through the dropdown items and back to the button.
  56. 56. The dropdown should remain open when the button receives focus. (Users can close the dropdown by triggering the button again).
  57. 57. Conclusion
  58. 58. So, that’s it. A few simple pointers to help make button dropdowns more accessible. Thanks for listening!
  59. 59. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

×