Guidelines provided by the World Wide Web Consortium as well as local governments have helped designers close the gaps when it comes to usability and accessibility. However, that doesn\u2019t necessarily make a website fully inclusive. <\/p>\n\n\n\n
In the following post, we\u2019re going to examine what inclusive design means, its value in web design, as well as what you need to consider when designing inclusive interfaces and interactions.<\/p>\n\n\n\n
Learn How To Design for Web Accessibility<\/a><\/p>\n\n\n\n Inclusive web design removes bias and assumptions from a website so that users won\u2019t feel excluded due to an impairment, demographics, or other temporary or permanent circumstances. <\/p>\n\n\n\n Both accessible web design and UX design are critical components of an inclusive website. Accessible design<\/a> is the process of removing the barriers to entry for people with disabilities and other impairments. UX design<\/a> is a data-driven approach to design that tests and validates how real users engage with a website. <\/p>\n\n\n\n Because of this, there\u2019s a lot to consider in inclusive design as it\u2019s not strictly a user\u2019s impairment that can prevent them from fully using or being satisfied with a website. Web designers can also run into issues by crafting experiences for an exclusive set of users.<\/p>\n\n\n\n As such, web designers need to consider the following factors: <\/p>\n\n\n\n Bottom line: Inclusive design ultimately translates to universal design. <\/p>\n\n\n\n Web designers have a variety of tools at their disposal to address the accessibility aspect of inclusive design. For instance, WordPress accessibility tools<\/a>, web accessibility checkers, WAI-ARIA guidelines<\/a> and more can make accessible design and implementation easier to do.<\/p>\n\n\n\n With inclusive design, however, it requires a greater understanding of limitations that users may face on the web. There isn\u2019t a tool that will scan your website and confirm that you\u2019ve created the most diverse and equitable experience possible. It\u2019s something you\u2019ll have to learn how to implement and check for on your own. <\/p>\n\n\n\n There are a number of reasons why web designers need to make accessibility and inclusivity part of every website they build. Let\u2019s look first at how a non-inclusive website hurts everyone: <\/p>\n\n\n\n In 2021, WebAIM published the results of its Screen Reader User Survey #9<\/a>. 7.7% of the survey\u2019s respondents said that they have to use a screen reader when they\u2019re online. <\/p>\n\n\n\n When asked how they felt about the state of Internet accessibility today, only 39.3% said it was more accessible than in previous years. 42.3% felt that nothing had changed while 18.5% said it was worse. <\/p>\n\n\n\n According to Mike Gifford of CivicActions<\/a>, it might be more than 7.7% of the population that experiences inaccessibility and shares these feelings: <\/p>\n\n\n\n \u201cThe combination of disabilities and methods with which people overcome barriers are extremely diverse. Ethically, building for our least advantaged users has got to be given the highest priority. Unfortunately, with our constant drive for the new and flashy, we are regularly excluding 10-20% of our fellow citizens.\u201d<\/em><\/p>\n\n\n\n According to the American Bar Association<\/a>, there were 8,000 Americans with Disabilities Act Title III lawsuits filed with federal courts between 2017 and 2020. That number jumped up 14.3% to 2,352 lawsuits in 2021 alone, according to Accessibility.com<\/a>.<\/p>\n\n\n\n There are others who may feel excluded from a website, but have no legal recourse. For instance, the World Data Lab says that there are 1.1 billion internet-poor people<\/a>. In some cases, this means they can\u2019t afford mobile data plans. In other cases they can, but they don\u2019t get enough data to use, so they can\u2019t afford to spend time on resource-heavy websites. <\/p>\n\n\n\n There\u2019s also the elderly population to consider. The Pew Research Center<\/a> found that the number of seniors using the Internet has grown in recent years. That said, TechCrunch reports<\/a> that roughly 50% of older adults need someone to help them set up and use new digital technologies. In addition, 40% seniors are digitally illiterate in the city of San Francisco \u2014 right beside Silicon Valley, of all places. <\/p>\n\n\n\n Even if your website isn\u2019t subjected to lawsuits, consider what losing 20% or more of your visitors due to a non-inclusive design will do to a brand\u2019s long-term viability. That\u2019s a huge segment of the audience that\u2019ll be gone simply because the website isn\u2019t welcoming or usable. <\/p>\n\n\n\n When you design a website to be inclusive, you design it so that everyone who wants to can engage with it fully and not feel excluded. Everyone wins when the Internet becomes an inclusive place: <\/p>\n\n\n\n Inclusive web design leads to better product design. <\/strong><\/p>\n\n\n\n From websites to mobile apps and everything in between, inclusive design forces designers to go back to the basics of good, usable and empathetic design. <\/p>\n\n\n\n Brands reach a larger audience. <\/strong><\/p>\n\n\n\n A brand that prioritizes a universally positive experience for everyone and not just the ideal user will attract a more loyal base of users who value inclusivity and equity as well. <\/p>\n\n\n\n Users feel better interacting with inclusive websites. <\/strong><\/p>\n\n\n\n People spend so much time in front of screens that issues like carpal tunnel syndrome, computer vision syndrome<\/a> and internet addiction disorder<\/a> are all too common these days. Inclusive, ethical design can help users feel better in both their minds and bodies.<\/p>\n\n\n\n Inclusive web design helps websites rank better in search results. <\/strong><\/p>\n\n\n\n Google updated its search algorithm<\/a> a couple years ago, naming four factors essential to creating the best on-page experience: Performance (speed) Accessibility, Best Practices (design and code) and SEO (e.g. alt text). Inclusive design contributes to each of these.<\/p>\n\n\n\n Oftentimes, designers will come up with fictional personas at the beginning of website projects. This helps them visualize and relate to the end user they\u2019re building the website for. It also helps them understand how that particular user would engage with the website. <\/p>\n\n\n\n When you include inclusivity in your web design process, your user persona descriptions will need to adjust somewhat. Typical user personas break down the following: <\/p>\n\n\n\n Inclusive user personas will also need to include: <\/p>\n\n\n\n Ability:<\/strong> This is the accessibility component of inclusivity. You\u2019ll have to anticipate how some of your users may be restricted in terms of how they use and engage with the website \u2014 physically and cognitively. <\/p>\n\n\n\n Aptitude:<\/strong> If you look at the data on how many users are online<\/a>, you\u2019ll realize that some of your users might not be digitally literate. Deviating from basic structures and layouts and not providing enough context (like labels in contact forms) could prove detrimental to these users\u2019 experiences. <\/p>\n\n\n\n Attitude:<\/strong> This refers to users who may perceive websites as unsafe environments. Whether they\u2019re overly concerned about their privacy or nervous about encountering malware, these types of fears should be addressed with recognizable and trustworthy security and privacy features.<\/p>\n\n\n\n Access:<\/strong> Users don\u2019t have to be internet-poor in order to have limited access to the web. For instance, just over half of the world\u2019s population has Internet access in the home, according to U<\/a>NESCO. That doesn\u2019t mean that they can\u2019t get online, it just means they have to find other ways to get it \u2014 like going to a library or internet cafe. So, connectivity, hardware, software, and even location can all impact access. <\/p>\n\n\n\n Localization:<\/strong> It\u2019s never safe to assume that every user lives in the same country, comes from the same culture and speaks the same language as you. As such, these differences have to be addressed when creating inclusive user personas.<\/p>\n\n\n\n In order for inclusive design to work, web designers must remove the assumptions, preconceived notions, as well as the favoring of the average user over the good of all users. To successfully do this, designers must be guided by the following principles: <\/p>\n\n\n\n There\u2019s no such thing as one size fits all in web design. That doesn\u2019t mean that you have to build different websites or landing pages for different users. However, it does mean adding extra features to the UI when you believe they\u2019ll help close the gap between different users\u2019 experiences. <\/p>\n\n\n\n For example, it\u2019s a good idea to include a transcript of a video below the embedded file. That way, users who can\u2019t or don\u2019t want to hear or watch the video can read the text. <\/p>\n\n\n\n Minimalism is an enduring web design trend and with good reason. It\u2019s not just because it creates more visually pleasing interfaces, it\u2019s because minimalism and simplicity pave the way for a more intuitive design. <\/p>\n\n\n\n The best way to approach this is to treat a website like a minimum viable product (MVP). Build out the core features that make it a usable and valuable product. Then, add extra elements only where they\u2019re needed and bring value to everyone\u2019s experience. <\/p>\n\n\n\n Consistency doesn\u2019t mean a website has to become predictable or boring. You can still be creative while maintaining consistency.<\/p>\n\n\n\n Everyone benefits from consistency in design. It removes the frustration and confusion caused by the same element or feature presented in different ways on the same website. In addition, consistency with how the majority of the web handles core elements \u2014 like the website navigation \u2014 can improve the usability of a website and speed up time to conversion.<\/p>\n\n\n\n In addition to factoring in how people engage with websites, designers also have to consider how they prefer<\/em> to engage with websites. For instance, a website dominated by imagery might be very difficult for users who aren\u2019t visual learners to digest the content. <\/p>\n\n\n\n When you bring together the content for a website, make sure there\u2019s a healthy mix of it. If there\u2019s only one type of content (like all text and no imagery), some of your visitors are likely to be at a disadvantage when it comes to comprehension or ease of use. <\/p>\n\n\n\n Equity in web design refers to equitable outcomes. In other words, regardless of who the visitor is, every visitor should be able to complete tasks with ease.<\/p>\n\n\n\n This is where the UX design process comes in handy. Getting first-hand user input into users\u2019 goals and what they need to complete them helps designers create friction-free interactions and user journeys for everyone. <\/p>\n\n\n\n For instance, consider a UI component like an image slider. The inclusive way to design it would be to disable the auto-slide feature. Then, include both swiping and clicking capabilities so that every user can control the slider and its pace.<\/p>\n\n\n\n Inclusive design will mitigate human error. This means designing a UI to prevent as many errors as possible while also providing a tolerant and helpful response to errors that do occur. By reducing the frustration or shame associated with making errors, an inclusive design does more to build trust with visitors. <\/p>\n\n\n\n This particular principle comes into play most often at the point of engagement. For instance, buttons should always be designed so they\u2019re large enough to be seen and clicked. <\/p>\n\n\n\n Error messages in contact forms are another good example. By displaying inline error messages in color and size that everyone can read, you\u2019ll reduce the likelihood of repeat errors. You\u2019ll also have a contact form that feels more helpful than one that provides vague error messages or ones that occur too late in the process. <\/p>\n\n\n\n One of the reasons why websites are subject to accessibility lawsuits the way that brick-and-mortar businesses are is because they\u2019ve been deemed \u201cplaces of public accommodation\u201d. In addition to ensuring that everyone can read, navigate and engage with a website, inclusive design guarantees a certain amount of comfort to visitors. <\/p>\n\n\n\n Comfort can mean many things to many people \u2014 ample space, predictable layouts, etc. Inclusive design also asks designers to consider how comfortable their users will be with the website\u2019s content. <\/p>\n\n\n\n For instance, using diverse imagery that\u2019s reflective of the target audience will create a more welcoming environment than generic stock imagery that users have seen time and time again. The same can be said for using straightforward copy instead of copy full of jargon that only a segment of the audience would understand.<\/p>\n\n\n\n Inclusive web design is an all-encompassing term that includes disciplines like UX design, accessible design, and responsive<\/a> design. However, inclusive design takes it a step further to ensure that the end result is a universally usable and well-received website. <\/p>\n\n\n\n This web design approach requires a solid understanding of the challenges that different people face when engaging with websites, which goes beyond impairment or disability. <\/p>\n\n\n\nTable of Contents<\/h4>\n\n\n\n
What Is Inclusive Design?<\/h2>\n\n\n\n
Why Inclusive Web Design Is Important<\/h2>\n\n\n\n
The Downside of Non-Inclusivity<\/h3>\n\n\n\n
The Upside of Inclusivity<\/h3>\n\n\n\n
How To Create Inclusive Web Design Personas<\/h2>\n\n\n\n
![\"\"](\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_04_blog_cover_what_Is_Inclusive_Web_Design_1200_630_no_text_inner_2.jpg\")
<\/figure>\n\n\n\nThe 7 Principles of Inclusive Design<\/h2>\n\n\n\n
1. Flexibility<\/h3>\n\n\n\n
2. Simplicity<\/h3>\n\n\n\n
3. Consistency<\/h3>\n\n\n\n
4. Perception<\/h3>\n\n\n\n
5. Equity<\/h3>\n\n\n\n
6. Prevention<\/h3>\n\n\n\n
7. Accommodation<\/h3>\n\n\n\n
Conclusion<\/h2>\n\n\n\n