Equal Opportunities - Online

At Bonboarding, we believe that all sites should be accessibility by as many as possible.

When people hear the words accessibility or equal opportunities, they immediately think of physical things like a ramp for wheelchairs or the Braille alphabet. These are all very important and luckily we can meet with them in more and more places.

However, it is crucial to not forget about accessibility in the digital space either. We must strive to ensure that no one has any disadvantages caused by any permanent or temporary disability, illness, or age. This means producing content that's available for all devices, even screen readers or voice-controlled devices.

Although in some countries the website operators are required by law¹ to make their sites available to everyone, there's still room for improvement in this industry.

What Are The Benefits

What are the benefits of operating a website that follows the accessibility best practices?

• As the question says it already - it can be accessed by anyone, who is curious about your content.
  Around 20% of the U.S. population has some disabilities, including blindness, color blindness, deaf, autistic, dyslexic, learning disabled, elderly, and web users with physical disabilities.
• Semantic HTML - in addition to accessibility - also improves SEO so your content can be more visible in search engines.
• Complying with accessibility requirements shows good ethics and morals, which improves the perception of the website.
• You won't exclude mobile phone users and people with age-related accessibility needs from using your website - users who don't even have disabilities.
• In the process of implementing web accessibility best practices, you might find usability problems that were affecting all of your visitors.

So What Can You Do?

1. Add alt text to all your images. Doing so will help blind and visually impaired users to understand the contents of the pictures as screen readers can read them.
   
   Give it a try!

   See how a screen reader would read out this section:

   True Stories From Nature

   

   My drawing didn't depict a hat but a boa constrictor digesting an elephant.

   

   I drew something else: the inside of a boa constrictor, so that they could see it undoubtedly.

2. Allow users to change the text size. It can help people who wear glasses or have imperfect eyesight. This is especially important with mobile layouts. Don't prevent pinch-zooming, even if it would mess up your design, otherwise your content might be inaccessible by some of your visitors.
3. Pay attention to contrast. People with vision impairments might have low color contrast sensitivity. So make sure to have a high contrast between the background and foreground, and don't use thin fonts.
   
   Give it a try!

   Button
   

   Button
   

   Example of how a visually impaired
   user would see the same button.
4. Allow keyboard-only navigation. Blind and visually impaired users can't use the mouse easily. But not only them: people with broken arms, or with any other limitations. Make sure users can access all interactive elements of your website just by using the keyboard (eg. by pressing the `TAB` key to jump between elements). This includes links, drop-down menus, widgets, forms, buttons, dialog boxes. Make sure, there's good visual feedback of which element is in focus. Additionally, Bonboarding enhances accessibility by allowing users to seamlessly navigate between product tours using the 'TAB' and 'Enter' keys, ensuring a smooth and inclusive experience.
5. Make multimedia content accessible. Just like with the images, you can provide transcripts or summaries with audio files. And don't forget about captions on your videos! They are not only useful for people with hearing issues but also for users, who can't turn on their audio for any reason.
6. Use descriptive URLs. If somebody uses screen readers due to eye problems, descriptive URLs can be a help navigating between the pages. Not only that, but they can really boost your SEO results.
7. Use ARIA roles. The Accessible Rich Internet Applications (ARIA) helps you make dynamic content more accessible. ARIA roles and attributes provide more information or context about website elements to screen readers and other assistive tools.
   
   html

   <div role="banner">
     <img src="logo.svg" alt="My Accessible Website" />
     <h1>Title</h1>
   </div>
   
   <div role="button">
     You can push me
   </div>
   
   <div role="alert">
     Please verify your email address.
   </div>
   
8. Don't use placeholder text in forms instead of labels. The placeholder texts are usually grey, with low contrast, and screen readers often skip them. The best thing you can do is to use ARIA or<label> tags for the name of the fields, and use a placeholder for example values.
9. Use CSS for data presentation instead of creating tables. Screen readers don't get along easily with the tables, so it's preferred to use CSS. If you must use tables, use the correct headers for each row and column.

Tools

There are several tools to test your page's accessibility.

Google Lighthouse has an accessibility score besides performance, and it also lists suggestions on what can be improved.

WAVE is another browser extension that can evaluate your site and identify potential accessibility issues.

It is truly worthwhile spending time and resources on making your content accessible. Remember, life can bring unexpected situations when you would also appreciate the effort.

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