If being inaccessible was a crime, would you be arrested?

Sure, you had the right color scheme, a consistent theme and a UX backed by some thrilling research on where to place a UI element, or even used SSR-like principles for other fronts of user experience but will your web app be able to befriend a screen reader? Being accessible is somehow left out of the comprehension of many designers and developers in the webspace. Although naturally, the concepts this blog sets to address are meant for web-based projects, application development should round the circle even better. A few of these will strike you the tallest if you have, maybe, some experience in app development.
Find out and answer, "If being inaccessible was a crime, would you be arrested?"

Accessible websites are crucial to the health of the internet. The more accessible a site is, the more people can reach it, use it, and enjoy it. The more people can reach, use, and enjoy a site, the more likely it is to be successful. The more successful the site is, the more likely it is to become a successful business.

But is that all accessibility means?

The problem is that, if you are not aware of how to design your website in such a way that it becomes accessible for all, you might end up providing an inadequate experience to some users. Today’s world is “experience first”. Many designers, developers, and web admins just are able to capture the essence of the experience for the general public. To add to it, there are many web design and development tools which abstract these for you. But the question is whether this is “captured” to an extent that the application running on the web is equally accessible to all?

Sure, you had the right color scheme, a consistent theme and a UX backed by some thrilling research on where to place a UI element, or even used SSR-like principles for other fronts of user experience but will your web app be able to befriend a screen reader for a user who has visual challenges?

The fundamental questions you can ask yourself to begin evaluation of accessibility in your application could be, "Will the app provide a smooth experience using a screen reader?", "Can someone navigate the application using keyboard only?". There are many other amazing ways people use the web.

Here is an example - Some HTML elements have semantic meaning but no dedicated functionality. These include aside, footer, header, etc. This semantics serves the screen reader.

Did you know that elements can be described using the ARIA spec or a simple tabindex can help a user tab to an element? Another interesting concept is focus management which provides a necessary clue about the currently active item to the user. To learn more about such examples, and the foundation of web accessibility, this resource by Jon Kuperman might be a good starting point.

The matter, in many cases, is that being accessible is somehow left out of the comprehension of many designers and developers in the webspace. Although naturally, the concepts this blog sets to address are meant for web-based projects, application development should round the circle even better. A few of them will strike you the tallest if you have, maybe, some experience in app development.

Do you dream of that fancy loader for your website? Yes, it has got animations, colors that flicker in and out. Or do you have the next idea for an animated 404 page?

MDN says, "Content that flickers, flashes, or blinks can trigger photosensitive epilepsy. Web technologies that use video, animated gifs, animated png, animated SVGs, Canvas, and CSS or JavaScript animations are all capable of content that can induce seizures or other incapacitating physical reactions".

What is Accessibility anyway?

Accessibility is the responsibility of everyone involved in the development process. It is the responsibility of the designer, the developer, and the webmaster to make sure that the product is accessible. It is a moral and ethical issue as well as a legal one. Addressing accessibility in your processes and making it inclusive from the beginning serves more than one purpose.

The Web is for everyone. Why shouldn't it be designed to be accessible to people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and many others?

Accessibility is a combination of design, development, and strategy. A well-designed site can be easily made accessible, and an inaccessible site can be made accessible. It is a matter of the right processes and the right attitude. Accessibility is a commitment to a set of standards and guidelines that will ensure your content is visible to users with disabilities.

To make your site accessible, you need to ensure that all the information you present can be accessed and used by anyone, regardless of any disability. You may need to include alternative text for images, provide text alternatives for audio and video content, and ensure that your site works with assistive technologies such as screen readers.

Accessibility (Accessible Design) is a set of principles and practices that help make web content accessible to everyone including people with disabilities. It is also known as inclusive design.

Which Standards?

World Wide Web Consortium (W3C) aims to lead the Web to its full potential by developing standards and guidelines that ensure the long-term growth of the Web. Accessibility is one of the core values of the W3C. The W3C's Web Accessibility Initiative (WAI) is the largest international industry consortium focused on improving the accessibility of the Web for people with disabilities.

The WAI guides developers of websites and software, information architects, site designers, and others to make the Web accessible to people with disabilities. The WAI also provides education, outreach, testing tools, and resources to help developers make their products and services accessible to a wide range of people with disabilities

There are several levels of conformance to accessibility guidelines. The most basic level is called "Level A". Level A conformance requires that your site can be used with a keyboard only. Achieving this level of conformance requires that all of the functionality of your site can be accessed with the keyboard and the page is readable. For example, if the user is required to click a link to access a page, the link must be keyboard accessible. The user must be able to navigate to the link and activate it using the keyboard.

The next level is called "Level AA". Level AA conformance is a significant extension of Level A. Level AA conformance requires that all of the functionality of the site and any of the content can be used with the keyboard. This includes any images or buttons on the page. In addition, the page must be readable when using a screen reader. The page must also provide a way to navigate to any links on the page. This ensures that the page can be easily navigated using a screen reader.

The third level is called "Level AAA". Level AAA conformance is the most stringent level of conformance. Level AAA requires that all of the functionality of the site can be used with the keyboard. This includes any images or buttons on the page. In addition, the page must be readable when using a screen reader. The page must also provide a way to navigate to any links on the page.

But how do I evaluate my app?

There are a lot of free tools available over the internet which run some automated tests on your web app and return an accessibility score. While this can be step zero to get started on evaluation but adherence and compliance to different levels of standardized accessibility levels ensure that your app does well on accessibility.