Meks
Do you know you can try any of our premium WordPress themes for free?Show me the themes
Accessible design tips in WordPress accessibility-design-tips-in-wordpress-featured-image

Accessible design tips in WordPress

5Shares

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee

Whether it’s your blog or business site, you want it to be accessible to all the people out there. What do we mean by that and what accessible design tips you can implement to improve UI for your visitors further?

Top WP Hosting recommended by Meks

In this article, we’re not going to talk about actual design, but about what specific things anyone of us can do to ensure better use of our blogs and websites. Without coding, designing or some significant changes, each and every one of us can make the web a more inclusive environment for everyone. How? By listening to the people who do it and implementing these seven main accessible design tips in WordPress.

But, before we come to that…

What is accessible design?

As John Maeda stated in his 2017 Design in Tech report,

„Historically speaking, technology products weren’t designed with inclusivity in mind because the users of the products were generally the makers of the products. The number of people using computers used to be very small. However today, due to smartphone proliferation, everyone is now using computers. To design for everyone, we need to think now and work more inclusively than ever before.“

Accessible design is a design that improves usability for everyone. It’s not just about making your site more readable under the sunlight or in the dark room. It’s about making the web more inclusive for people with disabilities in general. Moreover, it is meant for the people with diverse abilities and can improve the overall UI.

Accessible design has two main components: technical and user interface one. Now, I’m not going to talk about the technical part since I’m not a designer. Instead, I will try to explain what anyone of us can do to make our sites and blogs more accessible. As content creators, writers and managers of websites we have or work with.

Why do we need accessible design?

15% of the world population experience some form of disability. That is more than one billion people, according to the World Bank.  That means that one billion people don’t have the same chances and opportunities to grow and succeed in life. But we can change that. No matter how small our blog is, or if we’re just starting with our business website or if we have a well-known news magazine. Accessible design recommendations are so easy to implement and put in motion that we can do it without any knowledge or experience in design. How? It’s all about the content we create and the way we adapt it and publish onto our WordPress blogs and sites.

The main accessible design tips in WordPress anyone can implement

The idea to talk about accessible design and things we all can achieve came to me during the WCEU 2018 event. It was Maja Benke’s talk that inspired me to think how small changes can make a significant impact in turning the web into the more inclusive environment.

That Adrian Roselli’s talk about accessibility at 2017 WCEU in Paris.

And now…

Accessibility design tips in WordPress

What are the most common issues accessible design tips can solve?

As content creators and writers, everything we do within our blogs and website is aimed to ensure they are more readable. How do we do that? Here’s what the British Government recommends.

Designing for users on the Autistic Spectrum

Do:

  • Simple colors
  • Write in plain language
  • Use descriptive buttons
  • Simple and consistent layout

Don’t:

  • Use bright colors
  • Use figures of speech and idioms
  • Use vague buttons
  • Cluttered and complex layout

Simplicity over pre-emphasized design. Just because you can, you don’t need to use “shiny things” to attract visitors. Be consist and straightforward with the context of your content, not with the props. That way, everyone will have a more enjoyable experience with your site.

Designing for users with Dyslexia

Do:

  • Align text to the left, keep a consistent layout
  • Produce materials in other formats (audio/video)
  • Support text with images and diagrams
  • Content short, clear and simple

Don’t:

  • Underline non-links, use italics or capitals
  • Force to remember things from other pages
  • Use large blocks of heavy text
  • Rely on accurate spelling

Don’t confuse people with a too much different type of writing, keep it bright and straightforward and comfortable enough for everyone to understand. Tools like SEO Yoast plugin helps a lot in that department. Follow their simple guidelines, and you’re already doing it right.

Designing for users with Anxiety

Do:

  • Give time to complete an action
  • Explain what will happen next
  • Give users support when needed
  • Let users check their answers before they submit

Don’t:

  • Rush users with time limits
  • Confuse users at the next steps
  • Make support hard to access
  • Leave users questioning their answers

Let’s say you have a limited offer on your site. You advertise it with banners, have an article about it and decide to put countdown pop-ups or reminders. Why? Do consider not everyone likes or enjoys being interrupted in the middle of consuming the content on your site. Keep it easy and not hard to use.

accessibility-design-tips-in-wordpress-3

Designing for users who are Deaf or hard of hearing

Do:

  • Give users preferred communication
  • Use subtitles or provide transcripts for videos
  • Content with sub-headings, images, and videos
  • Use a linear, logical layout

Don’t:

  • Communicate only through phone
  • Put content in audio or video only
  • Make users read a long block of content
  • Make complex layouts and menus

It’s those simple things that matter the most. Like, take Netflix as a great example. Each of its shows and movies has subtitles and why? Not only for the people with diverse abilities but because it is convenient. Not everyone watches it the same way. Someone doesn’t need sound or don’t want to wake up kids, partner, whomever… The point is, provide more ways for people to interact with your site and they will come back.

Designing for users of Screen Readers

Do:

  • Structure content using HTML
  • Build for keyboard use only
  • Write descriptive links and headings
  • Use a linear, logical layout

Don’t:

  • Rely on text size or placement for structure
  • Force mouse or screen use
  • Write uninformative links and headings
  • Spread content all over a page

The whole point of implementing accessible design is to ease the user experience and acknowledge everyone’s way of interaction. So, these guidelines are go-to steps to improve your site for Screen Reader users.

Designing for users with Physical or Motor Disabilities

Do:

  • Make large clickable sections
  • Design with a touchscreen in mind
  • Provide shortcuts
  • Design for keyboard or speech only

Don’t:

  • Demand precision
  • Have short timeout windows
  • Tire users with lots of typing
  • Make dynamic content that requires mouse movement

It’s those /for us/ little things that go a long way, and these tips will ensure your site is well optimized and designed for everyone to use. And, it’s not that big deal, to begin with, just a few small changes.

Designing for users with Low Vision

Do:

  • Good color contrast and readable font
  • Put buttons in context
  • Text, shapes and color combination
  • Publish all information on web pages

Don’t:

  • Low color contrast and small font
  • Separate actions from content
  • Use color to convey meaning
  • Bury information in download files

Again, just by changing a few here and there, you will show that you acknowledge, that you care and that you really value people who use the World Wide Web. At the end of the day, it’s not about you – it’s about the people and the way they interact with your site.

simplicity as accessible design tip

To conclude

By implementing these standards, you are ensuring that your site is overcoming barriers people with disabilities face every day. WordPress itself is very serious about implementing accessibility into its core. If interested, you too can take part in understanding and make WordPress better in that department, by joining its Accessibility Team.

Furthermore, let these great tips be a guide for all of us how we can make the web more open and accessible to all. Just like WordPress itself is. And I would like to finish this article with another great quote about why it’s an important topic to cover.

“What is Design? It’s about business. It’s about people. It’s about technology. It’s now about digital technology — which touches a lot of people. And it’s now about a lot of people unlike yourself since it is in the millions of people. Because it involves so many people today, design responsibly.”

Valerie Casey

5Shares

Tags: ,

Ivana Cirkovic

Ivana is a Digital Marketing, PR and Social Media consultant with over nine years experience in the field. She is also a WordPress enthusiast and an active member of WordPress community who lives online almost 24/7. In love with Twitter, WP, photography and NYC.

Try theme now for free!
  • Access to a copy of the demo website
  • Full access to the theme options
  • No credit card required

* We will send you an occasional newsletter with special offers, news & theme updates but you can unsubscribe at any time.

Meks