{"id":2629,"date":"2021-07-09T09:00:50","date_gmt":"2021-07-09T09:00:50","guid":{"rendered":"https:\/\/www.webdesign-inspiration.com\/blog?p=2629"},"modified":"2021-06-28T05:38:42","modified_gmt":"2021-06-28T05:38:42","slug":"10-easy-ways-to-make-a-website-more-accessible","status":"publish","type":"post","link":"https:\/\/www.webdesign-inspiration.com\/blog\/10-easy-ways-to-make-a-website-more-accessible","title":{"rendered":"10 Easy Ways to Make a Website More Accessible"},"content":{"rendered":"

Designing a website to be accessible is not all about doing the right thing; accessibility also makes commercial sense. After all, why would you make it difficult for some people to access your content and buy your products when, with a bit of thought, you can make your site accessible to more people?<\/p>\n

Designing a site to be accessible is not difficult. Yet, there are still so many sites that do not cater to people with impaired vision or other challenges. So, please spare a thought for those who might find it challenging to use a website the next time you begin a new site design. And consider these ten easy ways that you can make a website accessible to more people.<\/p>\n

1. Ensure the Site is Keyboard Friendly<\/h2>\n

Many medical conditions make using a mouse difficult or impossible. So, ensure that any website you build can be navigated with the keyboard alone. That means that it must be possible to tab between fields on forms, for example. And crucial elements on each page must be reachable using the keyboard alone. This aspect of accessibility is easy to achieve and test. Just unplug your mouse and see if you can navigate around your site and use the various functions.<\/p>\n

2. Choose Colors with Care<\/h2>\n

The first thing to remember with colors on a website is to use contrast to make elements stand out for visually impaired people. But it would help if you also considered people who color blind, too, so it is best not to use color for emphasis. Instead, use bold and italics to highlight important text. And avoid using red and green to contrast elements on a site because difficulty differentiating red from green is the most common form of color blindness. The second most common issue with color differentiation is blue-yellow color blindness.<\/p>\n

3. Add Meaningful Alt Text to Images<\/h2>\n

The Alt Text on images is not there for you to stuff full of keywords. Instead, the alt text is what accessibility apps read and speak aloud to describe an image to visually impaired people. So, use the alt text to explain the content of images in a meaningful and descriptive way. For example, use phrases like “a picture of a happy, smiling child playing the sea.” It is good SEO practice to use keywords<\/a> in alt descriptions. Even so, remember that alt text still needs to make sense when read aloud.<\/p>\n

4. Enable Resizable Text<\/h2>\n

Some users will want to resize web pages by using the zoom feature on their browser. So, this is another aspect of accessibility to be considered and tested when designing a site. The best way to avoid issues with resizing is not to use absolute units. For example, specify text size in relative terms rather than pixels. Then, when a user resizes the page, the entire page will resize correctly.<\/p>\n

5. Provide Captions for Video Content<\/h2>\n

Video content has become a common feature of websites. But, if there are no captions, users with impaired hearing will be unable to use video content. And captions will also help people who find it challenging to concentrate on purely visual content. So, adding captions to all video content will improve the accessibility of your content.<\/p>\n

\n6. Avoid Automatic Navigation and Media<\/h2>\n

Video and audio files that play automatically can startle some people. And it can be tricky turning off automatic features when you are using a screen-reader. So, it is generally best to avoid embedding media that starts automatically. Fast-moving slides and carousels can be challenging for some people, too. So, automatic navigation features like these are best avoided. Or, if you do use any of these automated features, make it easy to switch off the automation.<\/p>\n

7. Structure Data with Headers<\/h2>\n

The proper use of headers will make content easier to read for everyone. And headings and subheadings will help screen-readers interpret and navigate the text. However, it is also essential to use the proper header tags in the right places. So, there should only be one H1 tag, for example. And H2, H3, and H4 tags should be nested in the correct order. Mixing up the header tags makes the text difficult to follow for people using screen-readers.<\/p>\n

8. Ensure Forms Are Accessible<\/h2>\n

Forms need to be clearly labeled for ease of use. And the labels need to be placed so that it is obvious to which field they refer. There should also be clear instructions provided on how to complete a form. And any instructions concerning incorrectly completed sections also need to be clearly displayed. It is also best to use plenty of white space between fields to distinguish each element of a form.<\/p>\n

9. Use ARIA Landmarks or HTML5 Elements<\/h2>\n

ARIA (Accessible Rich Internet Applications) Landmarks and HTML5 Elements are descriptive tags that cab added to web page elements to improve accessibility. These tags, such as “contentinfo,” “main,” and “form,” are used by assistive technology apps to aid page navigation. For example, ARIA Landmarks and HTML5 Elements allow users to identify and skip to relevant sections of a page.<\/p>\n

10. Use Tables with Care<\/h2>\n

Tables can help people understand data, but tables can also be confusing if they are not formatted correctly. So, avoid using overly complex tables with many rows and columns. And ensure that rows and columns are clearly labeled. It is also best to avoid using tables for anything other than data because it can confuse screen readers. Too many tables on a page can also be tricky to tab through.<\/p>\n

Conclusion<\/h2>\n

The above is not an exhaustive list of ways to make a website accessible. But hopefully, it will serve as an excellent introduction to accessibility. The vital thing to take away from this post is that accessibility is not difficult to design into a website. Still, it could make a world of difference to some people.<\/p>\n

What’s more, including accessibility features in a website design takes nothing at all away from the user experience. On the contrary, many of the above recommendations are good web design practices, such as breaking the text up with headings and subheadings. So, designing accessible sites benefits everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"

Designing a website to be accessible is not all about doing the right thing; accessibility also makes commercial sense. After […]<\/p>\n","protected":false},"author":1,"featured_media":2631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"yasr_overall_rating":4.8,"yasr_post_is_review":"yes","yasr_auto_insert_disabled":"","yasr_review_type":"CreativeWorkSeries","footnotes":""},"categories":[6],"tags":[],"class_list":["post-2629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/2629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/comments?post=2629"}],"version-history":[{"count":2,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/2629\/revisions"}],"predecessor-version":[{"id":7635,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/2629\/revisions\/7635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/media\/2631"}],"wp:attachment":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/media?parent=2629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/categories?post=2629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/tags?post=2629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}