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.
Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq
Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5
Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ
RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5
RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ
RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ
RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/k1GvY2hxJ5
Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9LNfXuCo47 via @cswordpress
Missed this?Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq
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?
RT @cswordpress: Missed this?Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/9zLfL8qSFq
RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ
RT @megarush1024: Custom UI Elements Are Bad For Accessibility. Here’s Why #A11y #fronteers https://t.co/4kPEAj2cpQ
RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK
RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK
Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres-why/
RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…
RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…
RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…
RT @cswordpress: Updated with second opinion: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/IO3gXGvS10…bility-heres…
@SinaBahram This is acceptable, and post updated accordingly. https://t.co/jtsTvtpVjZ…bility-heres-why/
Updated, with a fuller explanation of second opinion from .@sinabahram. https://t.co/IO3gXGeh9s…bility-heres-why/
RT @cswordpress: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/HkkAlmOWfK
Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/aelUDjkBJw #a11y #accessibility #webdev #dev #ux #design
RT @A11YChi: Custom UI Elements Are Bad For Accessibility. Here’s Why https://t.co/aelUDjkBJw #a11y #accessibility #webdev #dev #ux #design
Very Nice Infromation