{"id":1869,"date":"2024-12-06T08:00:00","date_gmt":"2024-12-06T09:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=1869"},"modified":"2024-12-10T23:28:58","modified_gmt":"2024-12-10T23:28:58","slug":"the-importance-of-graceful-degradation-in-accessible-interface-design","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/12\/06\/the-importance-of-graceful-degradation-in-accessible-interface-design\/","title":{"rendered":"The Importance Of Graceful Degradation In Accessible Interface Design"},"content":{"rendered":"<p>              <title>The Importance Of Graceful Degradation In Accessible Interface Design<\/title><\/p>\n<article>\n<header>\n<h1>The Importance Of Graceful Degradation In Accessible Interface Design<\/h1>\n<address>Eleanor Hecks<\/address>\n<p>                  2024-12-06T09:00:00+00:00<br \/>\n                  2024-12-10T23:06:03+00:00<br \/>\n                <\/header>\n<p>Graceful degradation is a design approach that ensures the basics of a website will still function even if specific individual parts of it stop working. The approach removes <strong>single points of failure<\/strong>: just because one thing stops working doesn\u2019t mean the system as a whole fails. A site following this principle fails in pieces instead of all at once, so the most important features remain available when some components encounter an error.<\/p>\n<p>The idea or the concept of single points of failure is well known in the manufacturing sector. It\u2019s <a href=\"https:\/\/link.springer.com\/article\/10.1007\/s00170-024-13223-5\">one of the most common resilience<\/a> strategies in manufacturing and supply chain operations. A factory with multiple sources of material can keep working even when one supplier becomes unavailable. However, it\u2019s become increasingly crucial to web development as user expectations around availability and functionality rise.<\/p>\n<p><strong>Data center redundancy<\/strong> is a common example of graceful degradation in web development. By using multiple server components, websites ensure they\u2019ll stay up when one or more servers fail. In a design context, it may look like guaranteeing the lack of support for a given feature in a user\u2019s browser or device doesn\u2019t render an app unusable.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/1-escalators.jpg\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"534\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Escalators\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/1-escalators.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/unsplash.com\/photos\/architectural-photo-of-escalator-eBi0v1D_po8\">unsplash<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/1-escalators.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Escalators are a familiar real-world example of the same concept. When they stop working, they can still get people from one floor to the next by acting as stairs. They may not be as functional as they normally are, but they\u2019re not entirely useless.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/2-bbc-page.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"654\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The BBC News webpage\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/2-bbc-page.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/2-bbc-page.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The BBC News webpage is a good example of graceful degradation in web design. As this screenshot shows, the site prioritizes loading navigation and the text within a news story over images. Consequently, slow speeds or old, incompatible browser plugins may make pictures unavailable, but the site\u2019s core function &mdash; sharing the news &mdash; is still accessible.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/3-adobe-express.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"396\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Adobe Express website with a pop-up that a browser is unsupported\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/3-adobe-express.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/3-adobe-express.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In contrast, the Adobe Express website is an example of what happens without graceful degradation. Instead of making some features unavailable or dropping load times, the entire site is inaccessible on some browsers. Consequently, users have to update or switch software to use the web app, which isn\u2019t great for accessibility.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"graceful-degradation-vs-progressive-enhancement\">Graceful Degradation vs. Progressive Enhancement<\/h2>\n<p>The graceful degradation approach acts as the opposite of <strong>progressive enhancement<\/strong> &mdash; an <a href=\"https:\/\/piccalil.li\/blog\/its-about-time-i-tried-to-explain-what-progressive-enhancement-actually-is\/\">approach in which a designer<\/a> builds the basics of a website and progressively adds features that are turned on only if a browser is capable of running them. Each layer of features is turned off by default, allowing for one seamless user experience designed to work for everyone.<\/p>\n<p>There is much debate between designers about whether graceful degradation or progressive enhancement is the best way to build site functionality. In reality, though, both are important. Each method has unique <em>pros and cons<\/em>, so the two can complement each other to provide the most resilience.<\/p>\n<p>Progressive enhancement is a good strategy when building a <em>new<\/em> site or app because you ensure a functional experience for everyone from the start. However, new standards and issues can emerge in the future, which is where graceful degradation comes in. This approach helps you <em>adjust<\/em> an existing website to comply with new accessibility standards or resolve a compatibility problem you didn\u2019t notice earlier.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aFocusing%20solely%20on%20one%20design%20principle%20or%20the%20other%20will%20limit%20accessibility.%20Progressive%20enhancement%20alone%20struggles%20to%20account%20for%20post-launch%20functionality%20issues,%20while%20graceful%20degradation%20alone%20may%20fail%20to%20provide%20the%20most%20feature-rich%20baseline%20experience.%20Combining%20both%20will%20produce%20the%20best%20result.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f12%2fimportance-graceful-degradation-accessible-interface-design%2f\"><\/p>\n<p>Focusing solely on one design principle or the other will limit accessibility. Progressive enhancement alone struggles to account for post-launch functionality issues, while graceful degradation alone may fail to provide the most feature-rich baseline experience. Combining both will produce the best result.<\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<h2 id=\"how-graceful-degradation-impacts-accessibility\">How Graceful Degradation Impacts Accessibility<\/h2>\n<p>Ensuring your site or app remains functional is crucial for accessibility. When core functions become unavailable, the platform is no longer accessible to anyone. On a smaller scale, if features like text-to-speech readers or video closed captioning stop working, users with sight difficulties may be unable to enjoy the site.<\/p>\n<p>Graceful degradation\u2019s impact on accessibility is all the larger when considering varying device capabilities. As the average person spends <a href=\"https:\/\/www.bdo.com\/getmedia\/fcbde42a-6a36-4e5f-be6b-143276d7cdd0\/RCP_Smart-Retail_Insight_3-20_WEB.pdf?ext=.pdf\">3.6 hours each day<\/a> on their phone, failing to ensure a site supports less powerful mobile browsers will alienate a considerable chunk of your audience. Even if some complex functions may not work on mobile, sacrificing those to keep the bulk of the website available on phones ensures broader accessibility.<\/p>\n<p>Outdated browsers are another common accessibility issue you can address with graceful degradation. Consider this <a href=\"https:\/\/it.fdu.edu\/tech-alert\/adobe-flash-is-not-supported-on-the-fdu-network\/\">example from Fairleigh Dickinson University<\/a> about Adobe Flash, which most modern browsers no longer support.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/4-adobe-flash.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"558\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Adobe Flash\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/4-adobe-flash.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/4-adobe-flash.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Software still using Flash cannot use the multi-factor authentication feature in question. As a result, users with older programs can\u2019t log in. Graceful degradation may compromise by making some functionality unavailable to Flash-supporting browsers while still allowing general access. That way, people don\u2019t need to upgrade to use the service.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"how-to-incorporate-graceful-degradation-into-your-site\">How to Incorporate Graceful Degradation Into Your Site<\/h2>\n<p>Graceful degradation removes technological barriers to accessibility. In a broader sense, it also keeps your site or app running at all times, even amid unforeseen technical difficulties. While there are many ways you can achieve that, here are some general best practices to follow.<\/p>\n<h3 id=\"identify-mission-critical-functions\">Identify Mission-Critical Functions<\/h3>\n<p>The first step in ensuring graceful degradation is determining what your <strong>core functions<\/strong> are. You can only guarantee the availability of mission-critical features once you know what\u2019s essential and what isn\u2019t.<\/p>\n<p>Review your user data to see what your audience interacts with most &mdash; these are generally elements worth prioritizing. Anything related to site security, transactions, and readability is also crucial. Infrequently used features or elements like video players and interactive maps are nice to have but okay to sacrifice if you must to ensure mission-critical components remain available.<\/p>\n<h3 id=\"build-redundancy\">Build Redundancy<\/h3>\n<p>Once you\u2019ve categorized site functions by criticality, you can ensure redundancy for the most important ones. That may mean <strong>replicating elements in a few forms<\/strong> to work on varying browsers or devices. Alternatively, you could provide multiple services to carry out important functions, like supporting alternate payment methods or providing both video and text versions of content.<\/p>\n<p>Remember that redundancy applies to the hardware your platform runs on, too. The Uptime Institute <a href=\"https:\/\/uptimeinstitute.com\/tiers\">classifies data centers into tiers<\/a>, which you can use to determine what redundant systems you need. Similarly, make sure you can run your site on multiple servers to avoid a crash should one go down.<\/p>\n<h3 id=\"accommodate-all-browsers\">Accommodate All Browsers<\/h3>\n<p>Remember that graceful degradation is also about supporting software and hardware of varying capabilities. One of the most important considerations under that umbrella for web design is to <strong>accommodate outdated browsers<\/strong>.<\/p>\n<p>While <a href=\"https:\/\/designerly.com\/how-to-make-a-mobile-version-of-your-website\/\">mobile devices don\u2019t support Flash<\/a>, some older versions of desktop browsers still use it. You can work with both by avoiding Flash &mdash; you can often use HTML5 instead &mdash; but not requiring users to have a non-Flash-supporting browser. Similarly, you can offer low-bandwidth, simple alternatives to any features that take up considerable processing power to keep things accessible on older systems.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/5-microsoft-edge-error-message.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"403\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Microsoft Edge error message\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/5-microsoft-edge-error-message.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/importance-graceful-degradation-accessible-interface-design\/5-microsoft-edge-error-message.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Remember to <strong>pay attention to newer software\u2019s security settings<\/strong>, too. Error messages like this one <a href=\"https:\/\/answers.microsoft.com\/en-us\/microsoftedge\/forum\/all\/i-am-trying-to-go-to-a-website-but-it-says-that\/82486fec-02b2-4e83-9ca6-c9f8088d8d97\">a Microsoft user posted about<\/a> can appear if a site does not support some browsers\u2019 updated security protocols. Always keep up with updates from popular platforms like Chrome and Safari to meet these standards and avoid such access issues.<\/p>\n<h3 id=\"employ-load-balancing-and-caching\">Employ Load Balancing and Caching<\/h3>\n<p>Load balancing is another crucial step in graceful degradation. Many cloud services automatically distribute traffic between server resources to prevent overloading. Enabling this also ensures that requests can be processed on a different part of the system if another fails.<\/p>\n<p>Caching is similar. By storing critical data, you build a fallback plan if an external service or application program interface (API) doesn\u2019t work. When the API doesn\u2019t respond, you can load the cached data instead. As a result, <a href=\"https:\/\/aws.amazon.com\/caching\/\">caches significantly reduce latency<\/a> in many cases, but you should be aware that you can\u2019t cache everything. Focus on the most critical functions.<\/p>\n<h3 id=\"test-before-publishing\">Test Before Publishing<\/h3>\n<p>Finally, be sure to test your website for accessibility issues before taking it live. Access it from multiple devices, including various browser versions. See if you can run it on a single server to test its ability to balance loads.<\/p>\n<p>You likely won\u2019t discover all possible errors in testing, but it\u2019s better to catch some than none. Remember to test your site\u2019s functionality before any updates or redesigns, too.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"getting-started-with-graceful-degradation\">Getting Started With Graceful Degradation<\/h2>\n<p>Designers, both big and small, can start their graceful degradation journey by tweaking some settings with their web hosting service. AWS <a href=\"https:\/\/docs.aws.amazon.com\/wellarchitected\/latest\/reliability-pillar\/rel_mitigate_interaction_failure_graceful_degradation.html\">offers guidance for managing failures<\/a> you can use to build degradation into your site\u2019s architecture. Hosting providers should also allow you to upgrade your storage plan and configure your server settings to provide redundancy and balance loads.<\/p>\n<p>Businesses large enough to run their own data centers should install redundant server capacity and uninterruptible power supplies to keep things running. Smaller organizations can instead rely on their code, using semantic HTML to keep it simple enough for multiple browsers. Programming nonessential things like images and videos to stop when bandwidth is low will also help.<\/p>\n<p>Virtualization systems like <a href=\"https:\/\/kubernetes.io\/\">Kubernetes<\/a> are also useful as a way to scale site capacity and help load elements separately from one another to maintain accessibility. Testing tools like <a href=\"https:\/\/www.browserstack.com\/\">BrowserStack<\/a>, <a href=\"https:\/\/wave.webaim.org\/\">WAVE<\/a>, and <a href=\"https:\/\/www.htmlvalidator.com\/\">CSS HTML Validator<\/a> can assist you by revealing if your site has functional issues on some browsers or for certain users.<\/p>\n<p>At its core, web accessibility is about <strong>ensuring a platform works as intended for all people<\/strong>. While design features may be the most obvious part of that goal, technical defenses also play a role. A site is only accessible when it works, so you must <strong>keep it functional<\/strong>, even when unexpected hiccups occur.<\/p>\n<p>Graceful degradation is not a perfect solution, but it prevents a small issue from becoming a larger one. Following these five steps to implement it on your website or app will ensure that your work in creating an accessible design doesn\u2019t go to waste.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>The Importance Of Graceful Degradation In Accessible Interface Design The Importance Of Graceful Degradation In Accessible Interface Design Eleanor Hecks 2024-12-06T09:00:00+00:00 2024-12-10T23:06:03+00:00 Graceful degradation is a design approach that ensures the basics of a website will still function even if specific individual parts of it stop working. The approach removes single points of failure: just&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-1869","post","type-post","status-publish","format-standard","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=1869"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1869\/revisions"}],"predecessor-version":[{"id":1870,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1869\/revisions\/1870"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=1869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=1869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=1869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}