Creating an Accessible button dropdown

59
Accessible Button Dropdown Creating an

Transcript of Creating an Accessible button dropdown

Page 1: Creating an Accessible button dropdown

AccessibleButton

Dropdown

Creating an

Page 2: Creating an Accessible button dropdown

Introduction

Page 3: Creating an Accessible button dropdown

My main role in recent times is to work on the UX/UI and front-end

development of Pattern Libraries for web applications.

Page 4: Creating an Accessible button dropdown

However, I also work in the Accessibility space. My focus in this

area is helping developers build accessible web components for

complex Web apps.

Page 5: Creating an Accessible button dropdown

One web component that can present accessibility issues is the

button dropdown.

Page 6: Creating an Accessible button dropdown

A button dropdown is where a button is used to trigger the display of contextual menus - such as a list

of links.

Page 7: Creating an Accessible button dropdown

A diagram showing a button “Weyland Industries” with no dropdown displayed

Page 8: Creating an Accessible button dropdown

A diagram showing a button “Weyland Industries” with the dropdown displayed below. The dropdown displays three options: “Weyland Industries”, “Stark Industries” and “Cyberdyne Systems”

Page 9: Creating an Accessible button dropdown

We’re going to look at a range of possible checkpoints that could

help make button dropdowns more accessible.

Page 10: Creating an Accessible button dropdown

We’ll use an imaginary example of a button dropdown that allows users

to switch their current organisation.

Page 11: Creating an Accessible button dropdown

A diagram showing a button “Weyland Industries” with the dropdown displayed below. The dropdown displays three options: “Weyland Industries”, “Stark Industries” and “Cyberdyne Systems”

Page 12: Creating an Accessible button dropdown

1. Semantics

Page 13: Creating an Accessible button dropdown

As the name suggests, the ideal element that should be used for the

trigger, is the <button> element.

Page 14: Creating an Accessible button dropdown

<button  type="button">      Weyland  Industries  </button>

Page 15: Creating an Accessible button dropdown

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).

Page 16: Creating an Accessible button dropdown

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.

Page 17: Creating an Accessible button dropdown

<ul>      <li><a  href="#">Weyland  Industries</a></li>      <li><a  href="#">Stark  Industries</a></li>      <li><a  href="#">Cyberdyne  Systems</a></li>  </ul>

Page 18: Creating an Accessible button dropdown

2. Getting to the button

Page 19: Creating an Accessible button dropdown

Keyboard-only users should be able to TAB to the button, which

then receives focus.

Page 20: Creating an Accessible button dropdown

3. Announcing the button

Page 21: Creating an Accessible button dropdown

The aria-­‐label attribute can be used to announce the button value

along with any additional information to screen reader users.

Page 22: Creating an Accessible button dropdown

For modern screen readers, the aria-­‐label value will be

announced instead of the button value.

Page 23: Creating an Accessible button dropdown

<button      type="button"  aria-­‐label="Current  company:  Weyland  Industries.  Use  the  dropdown  menu  to  switch  companies"  >      Weyland  Industries  </button>

Page 24: Creating an Accessible button dropdown

The aria-­‐haspopup="true" attribute can be used to announce the button as a “popup button” to

screen readers.

Page 25: Creating an Accessible button dropdown

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.

Page 26: Creating an Accessible button dropdown

<button      type="button"  aria-­‐label="Current  company:  Weyland  Industries.  Use  the  dropdown  menu  to  switch  companies"      aria-­‐haspopup="true"  >      Weyland  Industries  </button>

Page 27: Creating an Accessible button dropdown

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.

Page 28: Creating an Accessible button dropdown

The "false" value would need to be changed to "true" via

JavaScript as soon as the user triggers the button.

Page 29: Creating an Accessible button dropdown

<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>

Page 30: Creating an Accessible button dropdown

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.

Page 31: Creating an Accessible button dropdown

4. Triggering the button

Page 32: Creating an Accessible button dropdown

For keyboard-only users, ENTER or SPACEBAR strokes should trigger

the dropdown to appear.

Page 33: Creating an Accessible button dropdown

5. After the button is

triggered

Page 34: Creating an Accessible button dropdown

If the aria-­‐expanded="false" attribute is present in the default

button state, it should be changed to aria-­‐expanded="true" via

JavaScript.

Page 35: Creating an Accessible button dropdown

If the aria-­‐expanded="false" attribute is not present in the default button state, the aria-­‐expanded="true" should be

injected via JavaScript.

Page 36: Creating an Accessible button dropdown

<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>

Page 37: Creating an Accessible button dropdown

Focus should immediately shift to the <ul> element and the dropdown

should become visible.

Page 38: Creating an Accessible button dropdown

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.

Page 39: Creating an Accessible button dropdown

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.

Page 40: Creating an Accessible button dropdown

The <ul> element could be given an aria-­‐label value, which means that when it receives focus, it’s

purpose is announced.

Page 41: Creating an Accessible button dropdown

<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>  

Page 42: Creating an Accessible button dropdown

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.

Page 43: Creating an Accessible button dropdown

This can be achieved with a range of different methods, including

providing additional information that is hidden off-screen.

Page 44: Creating an Accessible button dropdown

<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>

Page 45: Creating an Accessible button dropdown

8. To escape the dropdown

Page 46: Creating an Accessible button dropdown

For keyboard-only users, the ESC keystroke should close the

dropdown and return focus to the button.

Page 47: Creating an Accessible button dropdown

7. To navigate through

items within the dropdown

Page 48: Creating an Accessible button dropdown

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.

Page 49: Creating an Accessible button dropdown

When users reach the start or end of the list, UP ARROW and DOWN ARROW keystrokes should then

have not have any effect.

Page 50: Creating an Accessible button dropdown

8. Selecting a dropdown

item

Page 51: Creating an Accessible button dropdown

Keyboard-only users should be able to select a dropdown menu item

using ENTER and possibly the SPACEBAR keystrokes.

Page 52: Creating an Accessible button dropdown

9. To leave the dropdown

Page 53: Creating an Accessible button dropdown

Keyboard-only users should be able to TAB forward through the

dropdown items and then on to other focusable items outside the

dropdown.

Page 54: Creating an Accessible button dropdown

As soon focus leave the last dropdown item, the dropdown

should disappear.

Page 55: Creating an Accessible button dropdown

Users should be able to SHIFT TAB backwards through the

dropdown items and back to the button.

Page 56: Creating an Accessible button dropdown

The dropdown should remain open when the button receives focus.

(Users can close the dropdown by triggering the button again).

Page 57: Creating an Accessible button dropdown

Conclusion

Page 58: Creating an Accessible button dropdown

So, that’s it. A few simple pointers to help make button dropdowns

more accessible.

Thanks for listening!

Page 59: Creating an Accessible button dropdown

Russ Weakley Max Design

Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley