About The Author

Carie Fisher is an author, speaker, and developer who is passionate about the intersection of front-end code and UX, digital accessibility, and diversity in … More about Carie ↬

Email Newsletter

Weekly tips on front-end & UX .
Trusted by 200,000+ folks.

How do we know which patterns are good, better, best when it comes to accessibility? Is it better to use an established pattern/library or create new ones? With the myriad of choices available, we can quickly become caught up in a web of confusion on this topic.

Marc Benioff memorably stated that the only constant in the technology industry is change. Having worked in tech for over 15 years, I can confirm this. Fellow tech dinosaurs can attest that the way the web worked in the early days is drastically different than many of us could have even imagined.

While this constant change in the technology industry has led to innovation and advancements we see today, it has also introduced the concept of choice. While choice — on the surface — may seem like an inherently positive thing, it does not always equal rainbows and roses. The influx of technological change also brings the splintering of coding languages and the never-ending flavors of programming “hotness.” Sometimes this abundance of choice turns into overchoice — a well-studied cognitive impairment in which people have difficulty making a decision due to having too many options.

In this article, we will attempt to untangle the complex world of accessible patterns — one step at a time. We will kick things off by reviewing current accessible patterns and libraries, then we will consider our general pattern needs and potential restrictions, and lastly, we will walk through a series of critical thinking exercises to learn how to better evaluate patterns for accessibility.

What A Tangled Web We Weave

Overchoice has crept its way into all aspects of technology, including the patterns and libraries we use to build our digital creations — from the simple checkbox to the complex dynamic modal and everything in between. But how do we know which pattern or library is the right one when there are so many choices? Is it better to use established patterns/libraries that users encounter every day? Or is it better to create brand new patterns for a more delightful user experience?

With the myriad of options available, we can quickly become paralyzed by the overabundance of choices. But if we take a step back and consider why we build our digital products in the first place (i.e. the end-user) doesn’t it make sense to choose the pattern or library that can add the most value for the largest number of people?

If you thought choosing a pattern or library was an already daunting enough process, this might be the point where you start to get worried. But no need to fret — choosing an accessible pattern/library isn’t rocket science. Like everything else in technology, this journey starts with a little bit of knowledge, a huge heaping of trial and error, and an understanding that there is not just one perfect pattern/library that fits every user, situation, or framework.

How do I know this? Well, I have spent the past five years researching, building, and testing different types of accessible patterns while working on the A11y Style Guide , Deque’s ARIA Pattern Library , and evaluating popular SVG patterns . But I have also reviewed many client patterns and libraries on every framework/platform imaginable. At this point in time, I can say without qualms that there is an innate hierarchy for pattern accessibility that starts to develop when you look long enough. And while there are occasionally patterns to avoid at all costs, it isn’t always so clear-cut. When it comes to accessibility, I would argue most patterns fall into gradients of good, better, best. The difficult part is knowing which pattern belongs in what category.

More after jump! Continue reading below ↓

Thinking Critically About Patterns

So how do we know which patterns are good, better, best when it comes to accessibility? It depends. This often invoked phrase from the digital accessibility community is not a cop-out but is shorthand for “we need more context to be able to give you the best answer.” However, the context is not always clear, so when building and evaluating the accessibility of a pattern, some fundamental questions I ask include:

  • Is there already an established accessible pattern we can use?
  • What browsers and assistive technology (AT) devices are we supporting?
  • Are there any framework limitations or other integrations/factors to consider?

Of course, your specific questions may vary from mine, but the point is you need to start using your critical thinking skills when evaluating patterns. You can do this by first observing, analyzing, and then ranking each pattern for accessibility before you jump to a final decision. But before we get to that, let’s first delve into the initial questions a bit more.

Is There Already An Established Accessible Pattern?

Why does it seem that with each new framework, we get a whole new set of patterns? This constant reinvention of the wheel with new pattern choices can confuse and frustrate developers, especially since it is not usually necessary to do so.

Don’t believe me? Well, think about it this way: If we subscribe to the atomic design system , we understand that several small “atoms” of code come together to create a larger digital product. But in the scientific world, atoms are not the smallest component of life. Each atom is made of many subatomic particles like protons, neutrons, and electrons.

That same logic can be applied to our patterns. If we look deeper into all the patterns available in the various frameworks that exist, the core subatomic structure is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design needs.

Note : Some great reputable sources include Inclusive Components , Accessible Components , and the Gov.UK Design System , in addition to the list of accessible patterns Smashing Magazine recently published (plus a more detailed list of patterns and libraries at the end of the article).

What Browsers And Assistive Technology (AT) Devices Are We Supporting?

After researching a few base patterns that might work, we can move on to the question of browser and assistive technology (AT) device support. On its own, browser support is no joke. When you add in AT devices and ARIA specifications to the mix, things begin to get tricky…not impossible, just a lot more time, effort, and thought-process involved to figure it all out.

But it’s not all bad news. There are some fabulous resources like HTML5 Accessibility and Accessibility Support that help us build a greater understanding of current browser + AT device support. These websites outline the different HTML and ARIA pattern sub-elements available, include open source community tests, and provide some pattern examples — for both desktop and mobile browsers/AT devices.

Are There Any Framework Limitations Or Other Integrations/Factors To Consider?

Once we have chosen a few accessible base patterns and factored in the browser/AT device support, we can move on to more fine-grained contextual questions around the pattern and its environment. For example, if we are using a pattern in a content management system (CMS) or have legacy code considerations, there will be certain pattern limitations. In this case, a handful of pattern choices can quickly be slashed down to one or two. On the flip side, some frameworks are more forgiving and open to accepting any pattern, so we can worry less about framework restrictions and focus more on making the most accessible pattern choice we can make.

Besides all that we have discussed so far, there are many additional considerations to weigh when choosing a pattern, like performance, security, search engine optimization, language translation, third-party integration, and more. These factors will undoubtedly play into your accessible pattern choice, but you should also be thinking about the people creating the content. The accessible pattern you choose must be built in a robust enough way to handle any potential limitations around editor-generated and/or user-generated content.

Evaluating Patterns For Accessibility

Code often speaks louder than words, but before we jump into all of that, a quick note that the following pattern examples are not the only patterns available for each situation, nor is the one deemed “best” in the group the best option in the entire world of accessible patterns.

For the pattern demos below, we should imagine a hypothetical situation in which we are comparing each group of patterns against themselves. While this is not a realistic situation, running through these critical thinking exercises and evaluating the patterns for accessibility should help you be more prepared when you encounter pattern choice in the real world.

Accessible Button Patterns

The first group of patterns we will review for accessibility are ubiquitous to almost every website or app: buttons. The first button pattern uses the ARIA button role to mimic a button, while the second and third button patterns use the HTML


						for our monthly newsletter

While the first patterns seem simple at first glance, they do evoke some accessibility questions. For example, on the first button pattern, we see ARIA role="button" is used on the “good” pattern instead of an HTML

Better: role="img" + </code> + <code> <desc></code> </h4> <div class=break-out> <pre> <code class=language-svg> <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" role="img" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve"> <title> The second little pig built a house out of sticks. Sadly, he too was eaten by the big, bad wolf. ...

Best: role="img" + </code> + <code> <desc></code> + <code> aria-labelledby="[id]" </code> </h4> <div class=break-out> <pre> <code class=language-svg> <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" role="img" aria-labelledby="pig3house pig3wolf" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve"> <title id="pig3house"> The third little pig built a house out of bricks. Thankfully he wasn't eaten by the wolf. ...

Let’s first look at the first pattern using </code> and <code> <text></code> and visually hidden CSS. Unlike previous visibly hidden text in patterns, there <em> is </em> an inherent relationship between the <code> <title></code> and <code> <text></code> elements since they are grouped under the same SVG element umbrella. However, this relationship is not very strong. In fact, if you look back at my <a href=https://cariefisher.com/a11y-svg/> research on SVG patterns </a> , we see that only 3 out of 8 browser/AT combinations heard the complete message. (Note: Pig pattern #1 is equivalent to light bulb pattern #7.) </p> <p> This is true though the working <a href=https://www.w3.org/TR/SVG2/text.html#Introduction> W3C SVG specs define the <code> <text></code> element </a> as “a graphics element consisting of text…the characters to be drawn are expressed as character data. As a result, text data in SVG content is readily accessible to the visually impaired.” This first pattern is OK, but we can do better. </p> <p> The second pattern removes the <code> <text></code> element and replaces it with a <code> <desc></code> element. The <a href=https://www.w3.org/TR/SVG2/struct.html#DescriptionAndTitleElements> W3C SVG specs </a> state: </p> <blockquote> <p> “The <code> <title></code> child element represents a short text alternative for the element... and the <code> <desc></code> element represents more detailed textual information for the element such as a description.” </p> </blockquote> <p> Meaning the <code> <title></code> and <code> <desc></code> elements in SVGs can be used similarly to image alternative text and long description options found traditionally in <code> <img> </code> elements. After adding the <code> <desc></code> element to the second SVG, we see similar browser/AT support with 3 out of 8 combinations hearing the complete message. (Note: Pig pattern #2 is equivalent to light bulb pattern #10.) While these test results seem to mirror the first pattern, the reason this pattern gets a bump into the “better” category is it is slightly easier to implement code-wise and it <a href=https://webaim.org/projects/screenreadersurvey8> impacts more AT users </a> , as it worked on JAWS, VoiceOver desktop, and VoiceOver mobile, while the first pattern supported less popular browser/AT combinations. </p> <p> The third pattern again uses the <code> <title></code> and <code> <desc></code> elements but now has an <code> aria-labelledby </code> plus ID added into the mix. According to the same SVG tests, adding this additional piece of code means we can fully support 7 out of 8 browser/AT combinations. (Note: Pig pattern #3 is equivalent to light bulb pattern #11.) Out of the three SVG patterns, this third one is the “best” since it supports the most AT devices. But this pattern does have a draw-back in using some browser/AT combinations; you will hear duplicate image title/description content for this pattern. While potentially annoying to users, I’d argue it is generally better to hear duplicated content than none at all. </p> <h2 id=closing-thoughts> Closing Thoughts </h2> <p> While we all certainly value choice in tech, I wonder if we’ve come to a point in time where the overabundance of options has left us paralyzed and confused about what to do next? In terms of picking accessible patterns, we can ask straight-forward questions around pattern/library options, browser/AT device support, framework limitations, and more. </p> <p> With the right data in hand, these questions are easy enough to answer. However, it becomes a bit more complicated when we go beyond patterns and really consider the people using them. It is then that we realize the impact our choices have on our users’ ability to succeed. As Prof. George Dei eloquently states: </p> <blockquote> <p> “Inclusion is not bringing people into what already exists — it is making a new space, a better space for everyone.” </p> </blockquote> <p> By taking a bit more time to critically think about patterns and choose the most accessible ones, we will undoubtedly create a more inclusive space to reach more users — on their terms. </p> <h3 id=related-resources> Related Resources </h3> <h4 id=tools> Tools </h4> <ul> <li> <a href=https://a11ysupport.io/> Accessibility Support </a> , <a href=https://twitter.com/mfairchild365> Michael Fairchild </a> , a11ysupport.io </li> <li> <a href=https://stevefaulkner.github.io/HTML5accessibility/> HTML5 Accessibility </a> , <a href=https://twitter.com/stevefaulkner> Steve Faulkner </a> </li> </ul> <h4 id=pattern-libraries> Pattern Libraries </h4> <ul> <li> <a href=https://www.a11yproject.com/resources/> Accessibility Project </a> </li> <li> <a href=https://a11y-style-guide.com/style-guide/> Accessibility Style Guide </a> </li> <li> <a href=https://www.scottohara.me/code/> Accessible Components </a> , <a href=https://twitter.com/scottohara> Scott O’Hara </a> </li> <li> <a href=https://schne324.github.io/dragon-drop/demo/> Accessible <code> drag-and-drop </code> List Reorder Plugin </a> , <a href=https://twitter.com/theHarrisius> Harris Schneiderman </a> </li> <li> <a href=https://dequeuniversity.com/library/> Deque’s ARIA Pattern Library </a> </li> <li> <a href=https://cauldron.dequelabs.com/> Deque’s Accessible React Library </a> </li> <li> <a href=https://design-system.service.gov.uk/> GOV.UK Design System </a> </li> <li> <a href=https://inclusive-components.design/> Inclusive Components </a> , <a href=https://twitter.com/heydonworks> Heydon Pickering </a> </li> <li> <a href=https://designsystem.digital.gov/documentation/developers/> U.S. Web Design System (USWDS) </a> </li> <li> <a href=https://www.w3.org/WAI/tutorials/> Web Accessibility Tutorials </a> </li> </ul> <div class=signature> <img src=https://www.OB电竞 magazine.comimageslogologo--red.png alt="Smashing Editorial" width=35 height=46 loading=lazy decoding=async> <span> (vf, il) </span> </div> <div class=category__related--alt> <span class="italic grey mrs mbm block"> Explore more on </span> <nav class="subnav ib" role=navigation> <ul class="subnav__primary subnav__subtags flex flex-wrap"> <li class="subnav-item subnav-item--green"> <a class=nav-item-link href=https://www.OB电竞 magazine.comcategoryusability> Usability </a> </li> <li class="subnav-item subnav-item--green"> <a class=nav-item-link href=https://www.OB电竞 magazine.comcategoryux> UX </a> </li> <li class="subnav-item subnav-item--green"> <a class=nav-item-link href=https://www.OB电竞 magazine.comcategoryaccessibility> Accessibility </a> </li> </ul> </nav> </div> </div> </div> </div> <link href=https://www.OB电竞 magazine.comcssnon-critical-article-manual-felix.css media=print onload="this.media='all'" rel=stylesheet> <link href=https://www.OB电竞 magazine.comcssarticle-dark-mode-v3.css media="(prefers-color-scheme: dark)" rel=stylesheet> <div aria-hidden=true class="c-promo-box sponsors sponsors__lead hidden sponsors__external" data-audience=non-subscriber data-remove=true data-amount=1></div> <div aria-hidden=true class="c-promo-box sponsors sponsors__lead hidden sponsors__external" data-audience=non-subscriber data-remove=true data-amount=1></div> <div id=sponsors-article-end data-impression=true class="c-promo-box c-promo-box--ad c-promo-box--wide sponsors sponsors__row hidden sponsors__external" data-audience=non-subscriber data-remove=true></div> <div id="promo-article-end hidden"> <div class=book-grid> <figure class=book--featured> <div class=book--featured__image> <a data-instant href=https://www.OB电竞 magazine.comthe-ob电竞 -newsletter> <img loading=lazy width=202 height=266 src=https://www.OB电竞 magazine.comimagesob电竞 -catcat-in-a-chair--tall.svg alt="Smashing Newsletter"> </a> </div> <figcaption> <h4 class=book--featured__title> <a href=https://www.OB电竞 magazine.comthe-ob电竞 -newsletter> Smashing Newsletter </a> </h4> <p class=book--featured__desc> Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use. </p> </figcaption> </figure> <figure class=book--featured> <div class=book--featured__image> <a data-instant href=https://www.OB电竞 conf.comonline-workshops> <img loading=lazy width=202 height=266 src=https://www.OB电竞 magazine.comimagesob电竞 -catcat-explorer.svg alt="Front-End & UX Workshops, Online"> </a> </div> <figcaption> <h4 class=book--featured__title> <a href=https://www.OB电竞 conf.comonline-workshops> Front-End & UX Workshops, Online </a> </h4> <p class=book--featured__desc> With practical takeaways, live sessions, video recordings and a friendly Q&A. </p> </figcaption> </figure> <figure class=book--featured> <div class=book--featured__image> <a data-instant href=https://www.OB电竞 magazine.comprinted-books> <img loading=lazy width=202 height=266 src=https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c2f2c6d6-4e85-449a-99f5-58bd053bc846/typescript-shop-cover-opt.png alt="TypeScript in 50 Lessons"> </a> </div> <figcaption> <h4 class=book--featured__title> <a href=https://www.OB电竞 magazine.comprinted-books> TypeScript in 50 Lessons </a> </h4> <p class=book--featured__desc> Everything TypeScript, with code walkthroughs and examples. And other printed books. </p> </figcaption> </figure> </div> </div> <div data-component=CommentsArea id=comments-good-better-best-untangling-complex-world-accessible-patterns data-thread=/2021/03/good-better-best-untangling-complex-world-accessible-patterns/ data-date="2021-03-16 12:00:00 +0000 UTC"></div> </div> </article> </main> <div data-component=CookieBanner></div> <div id=cart class=cart-wrapper data-component=MiniCart></div> <footer class=main-footer> <div class=container> <div class=col-12> <div class="footer__topics open"> <h4 class=footer__topics__title id=topics> Browse All Smashing Magazine Topics </h4> <ul class=footer__topics__list> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryaccessibility> Accessibility </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryandroid> Android </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryanimation> Animation </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryapps> Apps </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorycss> CSS </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorydesign> Design </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorydesign-patterns> Design Patterns </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorydesign-systems> Design Systems </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorye-commerce> E-Commerce </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryfreebies> Freebies </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorygraphics> Graphics </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryhtml> HTML </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryillustrator> Illustrator </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryinspiration> Inspiration </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryios> iOS </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryjavascript> JavaScript </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorymobile> Mobile </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorypattern-libraries> Pattern Libraries </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryperformance> Performance </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryphotoshop> Photoshop </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryplugins> Plugins </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryreact> React </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryresponsive-design> Responsive Design </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryservice-workers> Service Workers </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorysketch> Sketch </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorytypography> Typography </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryui> UI </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryusability> Usability </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryuser-experience> User Experience </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorywallpapers> Wallpapers </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryweb-design> Web Design </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategorywordpress> WordPress </a> </li> <li class=footer__topics__item> <a href=https://www.OB电竞 magazine.comcategoryworkflow> Workflow </a> </li> </ul> </div> </div> <div class=col-12> <div class=footer__notes> <p> With a commitment to quality content for the design community. </p> <p> Founded by Vitaly Friedman and Sven Lennartz. <span class=lining-figures> 2006–2022 </span> . </p> <p> Smashing is proudly running on <a href="https://www.netlify.com/?utm_source=link&utm_medium=parter&utm_campaign=sm-footer"> Netlify </a> . </p> <p> Fonts by <a href=http://latinotype.com/> Latinotype </a> . </p> </div> <ul class=footer__links> <li> ✎ <a href=https://www.OB电竞 magazine.comwrite-for-us> Write for us </a> </li> <li> <a href=https://www.OB电竞 magazine.comcontact> Contact us </a> </li> <li> <a href=https://www.OB电竞 magazine.comabout> About us (Impressum) </a> </li> <li> <a href=https://www.OB电竞 magazine.comprivacy-policy> Privacy policy </a> </li> <li> <a href=https://www.OB电竞 magazine.comauth> Membership login </a> </li> <li> <a href=https://www.OB电竞 magazine.comdelivery-times> Delivery times </a> </li> <li> <a href="mailto:advertising@OB电竞 magazine.com?subject=Let’s talk about advertising"> Advertise </a> </li> </ul> </div> </div> <div class=back-to-top-wrapper id=back_top> <a href=#top data-scroll=#top class=back-to-top title="Back to top"> <svg viewbox="0 0 100 100" width="25" height="25" tabindex="-1" role="img" aria-labelledby="title"> <title> OB电竞直播最新|OB电竞数据统计软件 Back to top arrow

竞技宝(天津)积分APP v3.4 电竞王者注册直播(电竞王者抽注今日) pc加拿大28计划分析最稳网页 28加拿大记录下载开奖 pentaq电竞 大圣电竞