Universal Design

1
Universal Design
2
Designing for Inclusivity Best Practices for
Accessible Web Design
The internet has become such an integral part of
most peoples lives. It is the go-to resource for
recipes, shopping, jobs, homes, travel, or
maintaining contact with loved ones. However, did
you ever realize that not everyone has equal
online experiences? Yes, there are now at least
one billion people across the world experiencing
some form of inability. And in their case,
connectivity and website access are not as easy
as they should be. And it is why creating
accessible websites would be a priority for any
business with an online presence. It is not only
morally right, but increased web accessibility
means increased tra?c and more business.
Besides, an accessibility design will not affect
your products UX or UI if performed by
professionals like us at ADA Site Compliance. We
have a team of accessibility experts ready to
handle all your websites compliance
needs. What is an inclusive web
design? Inclusive and accessible web design goes
hand in hand. While an all-inclusive design
process ensures no group of peoples needs or
concerns are overlooked, maintaining
accessibility strategies helps keep this in
mind. However, whats most important while
designing an inclusive design is remembering that
not every user accesses or interacts with the
website similarly. An inclusive design helps
remove bias and assumptions from your website so
that no user feels excluded.
3

• How to create an inclusive web design persona
• Web designers often come up with a persona while
  designing their projects. It helps them
  understand how the user will engage with the
  site. Similarly, there is a persona to follow
  while designing an inclusive web design which is
  broken down into
• Name
• Goals
• Motivations
• Demographics
• Personality
• Fears
• Frustrations
• It also includes the persona
• Ability where you assess how some users will be
  physically and cognitively restricted on using
  and engaging with the website.
• Aptitude, as some users may not be digitally
  literate. In this case, deviating from basic
  layouts and not providing su?cient context will
  not help.
• Attitude as some users may perceive a website to
  be unsafe because of privacy issues or the risk
  of encountering malware. You can address these
  fears through recognized and trusted safety and
  privacy features.
• Some users may not have internet connectivity at
  home but have alternatives. They can head to the
  cafe or library, where connectivity, location,
  hardware, and software can impact access.
• Localization as it is unsafe to assume that every
  user lives in the same country or comes from the
  same culture, or speaks your language. Address
  these differences in your inclusive user persona.

4

• 16 ways to make your website more accessible and
  inclusive
• The following tips will go a long way in helping
  ensure your website is more accessible and
  inclusive
• Proper content structure
• It does not matter how great your website content
  is if your prospects cannot read them. And this
  is very likely to happen because 253 million
  people worldwide suffer from some form of visual
  disability. You thus risk missing out on
  connecting with them. There are various steps to
  make your content easy to read for users with
  visual, language, and cognitive disabilities. You
  can break up the content into smaller sections
  with headers and subheaders, properly contrast
  the background and content, and avoid using
  decorative font.
• Use the right text size and fonts
• A practically microscopic or curly font can be
  di?cult for anyone to decipher. These fonts
  should be avoided, and only the appropriate ones
  in an inclusive design process. The right text
  size and font size enhance your sites overall
  aesthetics and make it accessible to a broader
  audience. It is safe to use a font like Verdana
  that is clean, easy to read, and of at least
  12pt.
• Proper language and tone of voice
• The websites tone of voice and language is
  essential for an accessible and inclusive
  website. Sites with words like
  wheelchair-bound negatively impact people with
  disabilities. Wheelchair user is a better
  option. Similar websites with complex vocabulary
  and syntax make it di?cult for those with
  learning disabilities and visual impairments to
  understand your web content.
• Proper content mark-up
• In addition to proper content structure, you must
  use the correct HTML markup to denote things like
  a button on a page. Also, use heading tags like
  H1, H2, etc., through the content to create a
  visual hierarchy in the front end and a proper
  code structure in the backend. It also gives
  context to HTML elements that screen readers and
  the visually impaired use while browsing.

5

• Keyboard navigation
• Keyboard accessibility is su?cient in an
  inclusive design. The visually impaired and those
  with visual disabilities or with motor
  disabilities may depend on keyboards to navigate
  websites. In this case, they use the tab key to
  select interactive elements on a webpage.
• Useable focus states
• The blue outline you occasionally see around
  links or buttons is called the focus state. They
  help people use keyboards to navigate websites
  by highlighting the selected page elements.
• Images with alt text
• Incorporating alt text into images makes your
  site more accessible. Alt text is a short text
  describing the image which screen readers read,
  making it easier for the visually impaired to
  understand the image information. The alt text
  should provide a clear and relevant image
  description or be too long. Screen readers ?nd
  reading overly complicated and repetitive
  descriptions challenging. Conversely, purely
  decorative images are marked using an empty ltaltgt
  attribute to tell screen readers to skip the
  image.
• Form ?elds with descriptive labels
• Your marketing and sales depend on forms, so
  ensure they are accessible by using descriptive
  labels in form ?elds. It is better than using
  placeholder text as labels, as they typically
  disappear once you start ?lling out the form.
  This is di?cult for the visually impaired to read
  and to remember what the ?eld was for. You can
  also ensure users know what to do while ?lling
  out forms by using small helper text above the
  form ?eld.
• Simple copywriting
• Keeping your copy and content clear, plain, and
  simple without unnecessary jargon helps you reach
  a larger audience. If you use acronyms or
  anything technical, provide a glossary of terms
  or a plain English alternative. It also helps to
  use the expanded version of the acronym for the
  ?rst use and use more lists.

6

• Proper color contrast
• Many tend to overlook a websites color contrast.
  While most are not affected by text blocks on
  differently colored backgrounds, reading the
  text can be a nightmare for those with vision
  impairments. The World Wide Web Consortium (W3C)
  stipulates that the typical color contrast ratio
  between text and background be at least 4.51.
  This ensures even those with limited color vision
  easily read the text. Also, ensure the colors of
  buttons, links, and other interactive elements
  stand out from the rest of the content.
• Know your target audience
• Conduct thorough research about your target
  audience for a deeper understanding of your
  audience and to design a more inclusive design.
  You can use your CRM and audience surveys and
  study website behavior trends to learn more
  about your target audience.
• Proper representation
• Audience research helps you understand your
  customers backgrounds, perspectives, and
  identities. You can accordingly present your
  digital content in the best way possible using
  the following
• Photos and videos
• Testimonials
• Blog posts
• Your target audience tends to learn more about
  you once they see themselves represented in your
  web content.
• Adhere to accessibility guidelines

7

• Avoid using color to display vital info
• Never use color as the only visual cue to relay
  important information to website users. Visually
  impaired users or those color blind may ?nd
  differentiating colors challenging. Using
  elements like labels and patterns with colors
  helps make the data easier to differentiate.
• Avoid ?ashing animation
• Avoid using ?ashing animations on your website as
  there is a risk of the ?ashing lights triggering
  the serious condition of epilepsy.
• Useful tools and resources for accessible and
  inclusive designs
• In addition to the tips mentioned above, many
  tools with complex ideas and resources will help
  you build an accessible and inclusive design.
  The most important is W3C, accessibility
  standards, and guidelines followed with tools
  like WebAccessibilty and WebAIM Color Contrast
  Checker.

8

• 6 Principles of Inclusive Web Design
• The following principles will help ensure you end
  up with a universal design and an inclusive web
  design
• Flexibility
• This means being ready to add extra features to
  the US if you feel it will help bridge the gap
  between different users experiences.
• Be simple
• A simple web design creates a visually pleasing
  interface while paving the way for a more
  intuitive design. This is best achieved by
  treating the website like a minimum viable
  product with minimal features and adding extra
  features only where and if needed.
• Perception
• Always consider how visitors prefer engaging with
  websites while designing yours. All web content
  would be a healthy mix of texts and images as
  some visitors prefer text more while some images.
• Equity
• Web design equity refers to equitable outcomes,
  meaning every visitor should complete tasks.
  Knowing your users input ?rst-hand helps create
  friction-free user interaction and a user journey
  everyone prefers.

9
Conclusion In short, an inclusive web design
includes various disciplines like UX and
accessible and responsive designs. The only
difference is that inclusive designs ensure a
top-end, universally accessible user experience,
and a well-received website. However, it is not
easy to create websites with an inclusive
design. You must correctly and thoroughly
understand peoples challenges while engaging
with websites. All it takes are simple changes
like the proper use of language and tone of voice
while incorporating alt text into images and the
proper selection of fonts. This way, visitors
with and without disabilities have a positive
experience. Website accessibility helps boost
your SEO efforts while helping you create an
inclusive space for all visitors who need only a
few minutes to think. These bene?ts are related
to creating accessible products and having enough
money to survive and not invest. Most web
designers and marketers have the power and
responsibility to ensure everyone sees what they
create. So to ensure nothing of the sort happens,
we have a team of professional web designers and
developers at ADA Site Compliance to audit and
rectify your website so everyone can easily
access it!
https/ adasitecompliance.com/designing-inclusivit
y-best-practices-accessible-web-design/
10
ADA Site Compliance
Website Digital Accessibility Solutions
https//adasitecompliance.com/
8401 Lake Worth Rd Lake Worth, FL
33467 info_at_adasitecompliance.com (561)
258-9300 https//www.facebook.com/ADAsitecomplian
ce/ https//twitter.com/siteCompliance
https//www.instagram.com/adasitecompliance/
https//www.linkedin.com/company/adasitecompliance
/ https//www.youtube.com/channel/UCCf20J8_Uf2S4K
Gnq2uAo2A