• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Customer Servant Consultancy

Where we develop robust web sites with emphasis on accessibility

  • About
  • Our Work
  • Code Snippets
  • Testimonials
  • WordPress With A Screen Reader
  • Let’s Talk
  • Read
  • Note
  • Article
  • Bookmark
  • Like
  • Watch
  • Reply
  • Listen
  • Quote
  • Repost
  • RSVP
  • Issue
  • Video

Custom UI Elements Are Bad For Accessibility. Here’s Why

1 April 2016 by Amanda Rush 26 Comments

If you’re building a product for the web that has a user interface as a feature, (and let’s face it, most of them do), you may be tempted to build your own custom UI elements.

Don’t do that.

For one thing, you’re reinventing a wheel that’s worked well now for a very long time. For another, you’re creating more work for yourself. And finally, it’s bad for accessibility, which effects a lot of users, and I don’t just mean blind ones.

The following video illustrates what can go wrong when you decide to reinvent the UI elements wheel.

If I shouldn’t build my own elements, what can I do instead?

The easiest way to get accessible UI elements is to use already-existing elements under the hood. HTML already provides the elements you’ll need, (radio buttons, checkboxes, comboboxes, and the like), and if you opt for already-existing elements instead of building your own, you’ll be saving yourself a lot of time, and you’ll be working smarter, not harder, to build your application. Which means you can shove it out the door faster, make a lot of people happy, and probably save some money too. What’s not to love.

so the next time you’re tempted to build your own elements, ask yourself:

  • What am I gaining by building a custom element that I wouldn’t get by using an already-existing one?
  • If I build custom elements, I may be making my application or plugin harder to use for non-developers. Are all the extra support questions and complaints worth it?
  • I’m spending more time, and therefore more money, on my project because I’m building custom elements. Is the extra cost worth it?

I think, if you keep these questions in mind when starting to build your user interface, and if you answer them the way I think you will, you’ll have enough justification for sticking with what works before you even bring accessibility into the picture. And if you are inclined towards making the web a better place for everyone regardless of ability, that then becomes icing on the cake.

A Second Opinion

Sina Bahram of Prime Access Consulting, a firm specializing in universal design and accessibility, disagrees with the above opinion and offers the following instead:

I recommend we do not phrase accessibility as something antithetical to what many developers do regularly. I try not to tell developers to deviate from their existing practice, but instead try working with them on improving their existing methodologies to make their creations more inclusive to all audiences. If any developers are interested, I am happy to discuss when custom UI components are appropriate, and how to then make them fully inclusive. Semantic markup, reuse of existing controls, and adherence to solid web development principles are great things to keep in mind when developing novel interfaces. When the need and desire for innovation arises, it is important to realize that new interfaces have the same potential to be fully accessible as current native ones, but it takes a little bit of extra work. I’m happy to discuss further. You can reach me at @SinaBahram on Twitter or
via any other means found at my contact page.

If any other accessibility authorities wish to add their opinions, feel free to ping me and I’ll be happy to add those as well.

Filed Under: Accessibility, Learning From The Community


Comments

  • cswordpress says:
    1 April 2016 at 07:15

    Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq

    Reply
  • cswordpress says:
    1 April 2016 at 07:15

    Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5

    Reply
  • megarush1024 says:
    1 April 2016 at 07:15

    Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ

    Reply
  • WPAccessibility says:
    1 April 2016 at 07:17

    RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5

    Reply
  • trishacodes says:
    1 April 2016 at 07:18

    RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ

    Reply
  • Cheffheid says:
    1 April 2016 at 07:18

    RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ

    Reply
  • deborah_gu says:
    1 April 2016 at 09:53

    RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5

    Reply
  • MyDailyMusing says:
    1 April 2016 at 16:36

    Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9LNfXuCo47 via @cswordpress

    Reply
  • cswordpress says:
    1 April 2016 at 21:19

    Missed this?Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq

    Reply
  • Jesse Petersen says:
    1 April 2016 at 21:27

    Does this include custom styling to set yourself apart? I’m guessing not since the HTML5 remains the same. I finally figured out how to test with VoiceOver and found a contrast tester, so I know you’re proud of me for trying stuff.

    P.S. This comment form isn’t coded right because the email field starts capitalized and tried to autocorrect lowercase “jesse.” Some forms do it right and I think it’s input[type=”email”] that does it but I haven’t yet verified. Now I’m interested enough to find an example and look at it on desktop web inspector. Oh! Same with the website field. It wants to capitalize HTTP.

    P.P.S. Did I format my comment correctly for screen reader?

    Reply
  • trishacodes says:
    1 April 2016 at 22:06

    RT @cswordpress: Missed this?Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq

    Reply
  • stommepoes says:
    2 April 2016 at 04:53

    RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ

    Reply
  • mstalfoort says:
    2 April 2016 at 12:26

    RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ

    Reply
  • Pingback: Custom UI Elements Are Bad For Accessibility. Here…
  • dennisl says:
    1 May 2016 at 09:45

    RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK

    Reply
  • WPAccessibility says:
    1 May 2016 at 12:47

    RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK

    Reply
  • cswordpress says:
    1 May 2016 at 13:18

    Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres-why/

    Reply
  • WPAccessibility says:
    1 May 2016 at 13:18

    RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…

    Reply
  • goetsu says:
    1 May 2016 at 13:43

    RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…

    Reply
  • megarush1024 says:
    1 May 2016 at 13:49

    RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…

    Reply
  • smartguitar1 says:
    1 May 2016 at 14:05

    RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…

    Reply
  • megarush1024 says:
    1 May 2016 at 15:51

    @SinaBahram This is acceptable, and post updated accordingly. https://t.co/jtsTvtpVjZ…bility-heres-why/

    Reply
  • cswordpress says:
    1 May 2016 at 15:54

    Updated, with a fuller explanation of second opinion from .@sinabahram. https://t.co/IO3gXGeh9s…bility-heres-why/

    Reply
  • yomochan says:
    1 May 2016 at 16:54

    RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK

    Reply
  • A11YChi says:
    2 May 2016 at 11:45

    Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/aelUDjkBJw #a11y #accessibility #webdev #dev #ux #design

    Reply
  • deconspray says:
    2 May 2016 at 12:52

    RT @A11YChi: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/aelUDjkBJw #a11y #accessibility #webdev #dev #ux #design

    Reply

Respond

Mentions

  • deconspray deconspray
  • A11YChi A11YChi
  • yomochan yomochan
  • cswordpress cswordpress
  • megarush1024 megarush1024
  • smartguitar1 smartguitar1
  • megarush1024 megarush1024
  • goetsu goetsu
  • WPAccessibility WPAccessibility
  • cswordpress cswordpress
  • WPAccessibility WPAccessibility
  • dennisl dennisl
  • Custom UI Elements Are Bad For Accessibility. Here… Custom UI Elements Are Bad For Accessibility. Here…
  • mstalfoort mstalfoort
  • stommepoes stommepoes
  • trishacodes trishacodes
  • cswordpress cswordpress
  • MyDailyMusing MyDailyMusing
  • deborah_gu deborah_gu
  • Cheffheid Cheffheid
  • trishacodes trishacodes
  • WPAccessibility WPAccessibility
  • megarush1024 megarush1024
  • cswordpress cswordpress
  • cswordpress cswordpress

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Copyright © 2022