{"id":277,"date":"2024-10-04T09:00:00","date_gmt":"2024-10-04T09:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=277"},"modified":"2024-10-15T23:26:17","modified_gmt":"2024-10-15T23:26:17","slug":"how-a-bottom-up-design-approach-enhances-site-accessibility","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/10\/04\/how-a-bottom-up-design-approach-enhances-site-accessibility\/","title":{"rendered":"How A Bottom-Up Design Approach Enhances Site Accessibility"},"content":{"rendered":"<p>              <title>How A Bottom-Up Design Approach Enhances Site Accessibility<\/title><\/p>\n<article>\n<header>\n<h1>How A Bottom-Up Design Approach Enhances Site Accessibility<\/h1>\n<address>Eleanor Hecks<\/address>\n<p>                  2024-10-04T09:00:00+00:00<br \/>\n                  2024-10-15T23:05:45+00:00<br \/>\n                <\/header>\n<p>Accessibility is key in modern web design. A site that doesn\u2019t consider how its user experience may differ for various audiences &mdash; especially those with disabilities &mdash; will fail to engage and serve everyone equally. One of the best ways to prevent this is to approach your site from <strong>a bottom-up perspective<\/strong>.<\/p>\n<h2 id=\"understanding-bottom-up-design\">Understanding Bottom-Up Design<\/h2>\n<p>Conventional, top-down design approaches start with the big picture before breaking these goals and concepts into smaller details. Bottom-up philosophies, by contrast, consider the minute details first, eventually achieving the broader goal piece by piece.<\/p>\n<p>This alternative way of thinking is important for accessibility in general because it reflects how neurodivergent people commonly think. While non-autistic people <a href=\"https:\/\/psychcentral.com\/autism\/why-people-with-autism-are-more-logical\">tend to think from a top-down perspective<\/a>, those with autism often employ a bottom-up way of thinking.<\/p>\n<p>Of course, there is considerable variation, and researchers have identified <a href=\"https:\/\/www.psychologytoday.com\/us\/blog\/mind-matters-from-menninger\/202204\/autism-acceptance-great-minds-dont-think-alike\">at least three specialist thinking types<\/a> within the autism spectrum:<\/p>\n<ul>\n<li><strong>Visual thinkers<\/strong> who think in images;<\/li>\n<li><strong>Pattern thinkers<\/strong> who think of concepts in terms of patterns and relationships;<\/li>\n<li><strong>Verbal thinkers<\/strong> who think only in word detail.<\/li>\n<\/ul>\n<p>Still, research shows that people with autism and ADHD <a href=\"https:\/\/journals.sagepub.com\/doi\/full\/10.1177\/27546330241229004\">show a bias toward bottom-up thinking<\/a> rather than the top-down approach you often see in neurotypical users. Consequently, a top-down strategy means you may miss details your audience may notice, and your site may not feel easily usable for all users.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/1-top-down-strategy-design.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"613\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Visualization of a top-down strategy with an inverted pyramid\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/1-top-down-strategy-design.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/1-top-down-strategy-design.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As a real-world example, consider the task of writing an essay. Many students are instructed to start an essay assignment by thinking about the main point they want to convey and then create an outline with points that support the main argument. This is top-down thinking &mdash; starting with the big picture of the topic and then gradually breaking down the topic into points and then later into words that articulate these points.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/2-bottom-up-design.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"617\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Visualization of a bottom-up approach in the form of a pyramid\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/2-bottom-up-design.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/2-bottom-up-design.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In contrast, someone who uses a bottom-up thinking approach might start an essay with no outline but rather just by freely jotting down every idea that comes to mind as it comes to mind &mdash; perhaps starting with one particular idea or example that the writer finds interesting and wants to explore further and branching off from there. Then, once all the ideas have been written out, the writer goes back to group related ideas together and arrange them into a logical outline. This writer starts with the small details of the essay and then works these details into the big picture of the final form.<\/p>\n<p>In web design, in particular, a bottom-up approach means <strong>starting with the specifics of the user experience instead of the desired effect<\/strong>. You may determine a readable layout for a single blog post, then ask how that page relates to others and slowly build on these decisions until you have several well-organized website categories.<\/p>\n<p>You may even get more granular. Say you start your site design by placing a menu at the bottom of a mobile site to make it easier to tap with one hand, improving ease of use. Then, you build a drop-down menu around that choice &mdash; placing the most popular or needed options at the bottom instead of the top for easy tapping. From there, you may have to rethink larger-scale layouts to work around those interactive elements being lower on the screen, slowly addressing larger categories until you have a finished site design.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/3-bottom-up-design.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"642\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A example of a bottom-up design with a menu placed at the bottom\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/3-bottom-up-design.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/3-bottom-up-design.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In either case, the idea of bottom-up design is to <strong>begin with the most specific problems<\/strong> someone might have. You then address them in sequence instead of determining the big picture first.<\/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=\"benefits-of-a-bottom-up-approach-for-accessible-design\">Benefits Of A Bottom-Up Approach For Accessible Design<\/h2>\n<p>While neither bottom-up nor top-down approaches dominate the industry, some web engineers prefer the bottom-up approach due to the various accessibility benefits this process provides. This strategy has several accessibility benefits.<\/p>\n<h3 id=\"putting-user-needs-first\">Putting User Needs First<\/h3>\n<p>The biggest benefit of bottom-up methods is that they <strong>prioritize the user\u2019s needs<\/strong>.<\/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=%0aTop-down%20approaches%20seem%20organized,%20but%20they%20often%20result%20in%20a%20site%20that%20reflects%20the%20designer%e2%80%99s%20choices%20and%20beliefs%20more%20than%20it%20serves%20your%20audience.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f10%2fhow-bottom-up-design-approach-enhances-site-accessibility%2f\"><\/p>\n<p>Top-down approaches seem organized, but they often result in a site that reflects the designer\u2019s choices and beliefs more than it serves your audience.<\/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<p>Consider some of the complaints that social media users have made over the years related to usability and accessibility for the everyday user. For example, many users complain that their Facebook feed will randomly refresh as they scroll for the sake of providing users with the most up-to-date content. However, the feature makes it virtually impossible to get back to a post a user viewed that they didn\u2019t think to save. Likewise, TikTok\u2019s watch history feature <a href=\"https:\/\/www.distractify.com\/p\/did-tiktok-remove-watch-history\">has come and gone over the years<\/a> and still today is difficult for many users to find without viewing an outside tutorial on the subject.<\/p>\n<p>This is a common problem: <a href=\"https:\/\/webaim.org\/projects\/million\/#wcag\">95.9% of the largest one million homepages<\/a> have Web Content Accessibility Guidelines (WCAG) errors. While a bottom-up alternative doesn\u2019t mean you won\u2019t make any mistakes, it may make them less likely, as bottom-up thinking <a href=\"https:\/\/uk.indeed.com\/career-advice\/career-development\/bottom-up-processing\">often improves your awareness<\/a> of new stimuli so you can catch things you\u2019d otherwise overlook. It\u2019s easier to meet user\u2019s needs when you build your entire site around their experience instead of looking at UX as an afterthought.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/4-exampleberkshire-hathaway.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"418\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"An example of  Berkshire Hathaway website with bad accessessibility\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/4-exampleberkshire-hathaway.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/4-exampleberkshire-hathaway.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Consider this <a href=\"https:\/\/www.berkshirehathaway.com\/\">example from Berkshire Hathaway<\/a>, a multi-billion-dollar holding company. The overall design philosophy is understandable: It\u2019s simple and direct, choosing to focus on information instead of fancy aesthetics that may not suit the company image. However, you could argue it loses itself in this big picture.<\/p>\n<p>While it is simple, the lack of menus or color contrast and the small font make it harder to read and a little overwhelming. This confusion can counteract any accessibility benefits of its simplicity.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/5-example-berkshire-hathaway-redesign.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"553\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/5-example-berkshire-hathaway-redesign.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/5-example-berkshire-hathaway-redesign.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Alternatively, even a simple website redesign could include intuitive menus, additional contrast, and accessible font for easy navigation across the site.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/6-homepage-scope.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"414\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Example of a better web design on Scope website\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/6-homepage-scope.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/6-homepage-scope.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.scope.org.uk\/\">homepage for U.K. charity Scope<\/a> offers a better example of web design centered around users\u2019 needs. Concise, clear menus line the top of the page to aid quicker, easier navigation. The color scheme is simple enough to avoid confusion but provides enough contrast to make everything easy to read &mdash; something the sans-serif font further helps.<\/p>\n<h3 id=\"ensuring-accessibility-from-the-start\">Ensuring Accessibility From The Start<\/h3>\n<p>A top-down method also makes catering to a diverse audience difficult because you may need to <strong>shoehorn features into an existing design<\/strong>.<\/p>\n<p>For example, say, a local government agency creates a website focused on providing information and services to a general audience of residents. The site originally featured high-resolution images, bright colors, and interactive charts.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/7-government-agency-website.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"553\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"An example of a local government agency website, which is not accessible\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/7-government-agency-website.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/7-government-agency-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>However, they realize the images are not accessible to people navigating the site with screen readers, while multiple layers of submenus are difficult for keyboard-only users. Further, the bright colors make it hard for visually impaired users to read the site\u2019s information.<\/p>\n<p>The agency, realizing these accessibility concerns, adds captions to each image. However, the captions disrupt the originally intended visual aesthetics and user flow. Further, adjusting the bright colors would involve completely rethinking the site\u2019s entire color palette. If these considerations had been made before the site was built, the site build could have specifically accommodated these elements while still creating an aesthetically pleasing and user-friendly result.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/8-accessible-government-agency-website.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"553\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"An example of a local government agency website after re-design to make it more accessible\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/8-accessible-government-agency-website.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/8-accessible-government-agency-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Alternatively, a site initially built with high contrast, a calm color scheme, clear typography, simple menus, and reduced imagery would make this site much more accessible to a wide user base from the get-go.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/9-awwwards-website.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"416\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Awwwards homepage\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/9-awwwards-website.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/9-awwwards-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As a real-world example, <a href=\"https:\/\/www.awwwards.com\/\">consider the Awwwards<\/a> website. There are plenty of menus to condense information and ease navigation without overloading the screen &mdash; a solid accessibility choice. However, there does not seem to be consistent thought in these menus\u2019 placement or organization.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/10-awwwards-website-menus.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"416\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Awwwards homepage with highlighted menus at the top and bottom and a scrolling top bar\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/10-awwwards-website-menus.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/10-awwwards-website-menus.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There are far too many menus; some are at the top while others are at the bottom, and a scrolling top bar adds further distractions. It seems like Awwwards may have added additional menus as an afterthought to improve navigation. This leads to inconsistencies and crowding because they did not begin with this thought.<\/p>\n<p>In contrast,<\/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=%0aBottom-up%20alternatives%20address%20usability%20issues%20from%20the%20beginning,%20which%20results%20in%20a%20more%20functional,%20accessible%20website.%0a&amp;url=https:\/\/smashingmagazine.com%2f2024%2f10%2fhow-bottom-up-design-approach-enhances-site-accessibility%2f\"><\/p>\n<p>Bottom-up alternatives address usability issues from the beginning, which results in a more functional, accessible website.<\/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<p>Redesigning a system to address a usability issue it didn\u2019t originally make room for is challenging. It can lead to errors like broken links and other unintended consequences that may hinder access for other visitors. Some sites have even claimed to lose <a href=\"https:\/\/support.google.com\/webmasters\/thread\/40281085\/90-of-our-traffic-is-lost-business-is-down?hl=en\">90% of their traffic<\/a> after a redesign. While bottom-up approaches won\u2019t eliminate those possibilities, they make them <em>less likely<\/em> by centering everything around usage from the start.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/11-vasa-museum-website.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"395\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Homepage of the Vasa Museum website\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/11-vasa-museum-website.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/11-vasa-museum-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The <a href=\"https:\/\/www.vasamuseet.se\/en\">website for the Vasa Museum<\/a> in Stockholm, Sweden, showcases a more cohesive approach to ensuring accessibility. Like Awwwards, it uses menus to aid navigation and organization, but there seems to be more forethought into these features. All menus are at the top, and there are fewer of them, resulting in less clutter and a faster way to find what you\u2019re looking for. The overall design complements this by keeping things simple and neat so that the menus stand out.<\/p>\n<h3 id=\"increasing-awareness\">Increasing Awareness<\/h3>\n<p>Similarly, bottom-up design ensures you don\u2019t miss as many accessibility concerns. When you start at the top, before determining what details fit within it, you may not consider all the factors that influence it. Beginning with the specifics instead makes it easier to spot and address problems you would\u2019ve missed otherwise.<\/p>\n<p>This awareness is particularly important for serving a diverse population. An estimated <a href=\"https:\/\/www.who.int\/news-room\/fact-sheets\/detail\/disability-and-health\">16% of the global population<\/a> &mdash; 1.6 billion people &mdash; have a significant disability. That means there\u2019s a huge range of varying needs to account for, but most people lack firsthand experience living with these conditions. Consequently, it\u2019s easy to miss things impacting others\u2019 UX. You can overcome that knowledge gap by asking how everyone can use your site first.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/12-run-usability-test.jpg\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"533\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A person holding a pink sticky-note, which states \u2018Run a usability test\u2019\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/12-run-usability-test.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Image source: <a href=\"https:\/\/unsplash.com\/photos\/person-holding-pink-sticky-note-WC6MJ0kRzGw\">Unsplash<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/how-bottom-up-design-approach-enhances-site-accessibility\/12-run-usability-test.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"bottom-up-vs-top-down-which-is-best-for-you\">Bottom-Up vs. Top-Down: Which Is Best for You?<\/h2>\n<p>As these benefits show, a bottom-up design philosophy can be helpful when building an accessible site. Still, top-down methods can be advantageous at times, too. Which is best depends on your situation.<\/p>\n<p>Top-down approaches are <strong>a good way to ensure a consistent brand image<\/strong>, as you start with the overall idea and base future decisions on this concept. It also makes it easier to create <strong>a design hierarchy<\/strong> to facilitate decision-making within your team. When anyone has a question, they can turn to whoever is above them or refer to the broader goals. Such organization can also mean faster design processes.<\/p>\n<p>Bottom-up methods, by contrast, are better when accessibility for a diverse audience is your main concern. It may be harder to keep everyone on the same overall design philosophy page, but it usually produces <strong>a more functional website<\/strong>. You can catch and solve problems early and pay great attention to detail. However, this can mean longer design cycles, which can incur extra costs.<\/p>\n<p>It may come down to what your team is most comfortable with. People think and work differently, with some preferring a top-down approach while others find bottom-up more natural. Combining the two &mdash; starting with a top-down model before tackling updates from a bottom-up perspective &mdash; can be beneficial, too.<\/p>\n<h2 id=\"strategies-for-implementing-a-bottom-up-design-model\">Strategies For Implementing A Bottom-Up Design Model<\/h2>\n<p>Should you decide a bottom-up design method is best for your goals, here are some ways you can embrace this philosophy.<\/p>\n<h3 id=\"talk-to-your-existing-user-base\">Talk To Your Existing User Base<\/h3>\n<p>One of the most important factors in bottom-up web design is to center everything around your users. As a result, your existing user base &mdash; whether from a separate part of your business or another site you run &mdash; is the perfect place to start.<\/p>\n<p>Survey customers and web visitors about their experience on your sites and others. Ask what pain points they have and what features they\u2019d appreciate. Any commonalities between responses deserve attention. You can also <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">turn to WCAG standards<\/a> for inspiration on accessible functionality, but first-hand user feedback should form the core of your mission.<\/p>\n<h3 id=\"look-to-past-projects-for-accessibility-gaps\">Look To Past Projects For Accessibility Gaps<\/h3>\n<p>Past sites and business projects can also reveal what specifics you should start with. Look for any accessibility gaps by combing through old customer feedback and update histories and using these sites yourself to find issues. Take note of any barriers or usability concerns to address in your next website.<\/p>\n<p>Remember to document everything you find as you go. Up to <a href=\"https:\/\/blog.box.com\/ai-summarization-definition-and-best-practices\">90% of organizations\u2019 data<\/a> is unstructured, making it difficult to analyze later. Reversing that trend by organizing your findings and recording your accessible design process will streamline future accessibility optimization efforts.<\/p>\n<h3 id=\"divide-tasks-but-communicate-often\">Divide Tasks But Communicate Often<\/h3>\n<p>Keep in mind that <strong>a bottom-up strategy can be time-consuming<\/strong>. One of the reasons why top-down alternatives are popular is because they\u2019re efficient. You can overcome this gap by splitting tasks between smaller teams. However, these groups must communicate frequently to ensure separate design considerations work as a cohesive whole.<\/p>\n<p>A DevOps approach is helpful here. DevOps has helped <a href=\"https:\/\/www.atlassian.com\/whitepapers\/devops-survey-2020\">49% of its adopters<\/a> achieve a faster time to market, and 61% report higher-quality deliverables. It also includes space for both detailed work and team-wide meetings to keep everyone on track. Such benefits ensure you can remain productive in a bottom-up strategy.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"accessible-websites-need-a-bottom-up-design-approach\">Accessible Websites Need A Bottom-Up Design Approach<\/h2>\n<p>You can\u2019t overstate the importance of accessible website design. By the same token, bottom-up philosophies are crucial in modern site-building. A detail-oriented approach makes it easier to serve a more diverse audience along several fronts. Making the most of this opportunity will both extend your reach to new niches and make the web a more equitable place.<\/p>\n<p>The <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Web Accessibility Initiative\u2019s WCAG standards<\/a> are a good place to start. While these guidelines don\u2019t necessarily describe how to apply a bottom-up approach, they do outline critical user needs and accessibility concerns your design should consider. The site also offers a free and comprehensive <a href=\"https:\/\/www.w3.org\/WAI\/courses\/foundations-course\/\">Digital Accessibility Foundations course<\/a> for designers and developers.<\/p>\n<p>Familiarizing yourself with these standards and best practices will make it easier to understand your audience before you begin designing your site. You can then build a more accessible platform from the ground up.<\/p>\n<p>Additionally, the following are some valuable related reads that can act as inspiration in accessibility-centered and user-centric design.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/Inclusive-Design-Digital-World-Accessibility\/dp\/148425015X\"><em>Inclusive Design for a Digital World: Designing with Accessibility in Mind<\/em><\/a> by Regine M. Gilbert<\/li>\n<li><a href=\"https:\/\/www.amazon.com\/Practical-Web-Inclusion-Accessibility-Comprehensive\/dp\/1484254511\"><em>Practical Web Inclusion and Accessibility: A Comprehensive Guide to Access Needs<\/em><\/a> by Ashley Firth<\/li>\n<li><a href=\"https:\/\/www.amazon.com\/Dont-Make-Think-Revisited-Usability\/dp\/0321965515\"><em>Don\u2019t Make Me Think, Revisited: A Common Sense Approach to Web Usability<\/em><\/a> by Steve Krug<\/li>\n<\/ul>\n<p>By employing bottom-up thinking as well as resources like these in your design approach, you can create websites that not only meet current accessibility standards but actively encourage site use among users of all backgrounds and abilities.<\/p>\n<h3 id=\"further-reading-on-smashingmag\">Further Reading On SmashingMag<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/deploy-preview-9934--smashing-prod.netlify.app\/2024\/07\/getting-bottom-minimum-wcag-conformant-interactive-element-size\/\">Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size<\/a>,\u201d Eric Bailey<\/li>\n<li>\u201c<a href=\"https:\/\/deploy-preview-9934--smashing-prod.netlify.app\/2024\/06\/how-make-strong-case-accessibility\/\">How To Make A Strong Case For Accessibility<\/a>,\u201d Vitaly Friedman<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/02\/guide-accessible-form-validation\/\">A Guide To Accessible Form Validation<\/a>,\u201d Sandrina Pereira<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2023\/01\/creating-high-contrast-design-system-css-custom-properties\/\">Creating A High-Contrast Design System With CSS Custom Properties<\/a>,\u201d Brecht De Ruyte<\/li>\n<\/ul>\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>How A Bottom-Up Design Approach Enhances Site Accessibility How A Bottom-Up Design Approach Enhances Site Accessibility Eleanor Hecks 2024-10-04T09:00:00+00:00 2024-10-15T23:05:45+00:00 Accessibility is key in modern web design. A site that doesn\u2019t consider how its user experience may differ for various audiences &mdash; especially those with disabilities &mdash; will fail to engage and serve everyone equally&#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-277","post","type-post","status-publish","format-standard","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/277","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=277"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/277\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}