accessibility: why should business analysts care?

ImageImage
Author of the article Anna Ustinova
written bySenior Business Analyst, EPAM Anywhere

Nowadays the accessibility topic gets more and more popular in all spheres of life. In this article, we take a look at the importance of accessibility and explain why and when Business Analysts should pay attention to it. 

First let’s define, what accessibility and disability are.

According to developer.mozilla.org: Accessibility is the practice of making your websites usable by as many people as possible. Making sites accessible benefits not only people with disabilities, but also other groups including those using mobile devices, or those with a slow network connection.

Surprised? Just for the context, a lot of things that are mentioned in accessibility regulations help your website become more SEO-friendly (e.g. alt text, correct HTML markup, links annotations, and so on).

Another important thing to understand is what disability means. Well, a lot of people usually think of sight or hearing disabilities, which is quite true. However, it’s far more than that. Even a broken arm can limit your ability to navigate within your phone, so being accessible is important not only because the number of people who need some specific features is high, but also because this number is much higher if to include people with some temporal health issues.

Ok, that's all good, but you may ask: ‘Why should I care about accessibility if, according to analytics, 99.9% of my users are fine?’.

First of all, because this number does not probably cover all users from the market you are targeting.

Secondly, being not accessible can be perceived as an act of discrimination of basic human rights, so you can be fined. Here is just one example of a case when a blind man won a case from the Olympic committee. It illustrates that all public resources on the web should be accessible.

The last point is that now search engines take into account not just how well you organize all SEO information, but also to which level you are accessible. Hence, to appear in top results on search pages, you should make sure that your site would be easy to use.

At what point should a Business Analyst care?

From my point of view, Business Analysts should consider or question the need of being accessible as soon as it makes sense. Better before development starts, so that we avoid re-work.

What do I need to know to understand and specify accessibility requirements?

There can be two approaches: standard and testing tooling.

World Wide Web Consortium (in short W3C) is the organization that creates and maintains standards for the World Wide Web. Accessibility standards can be found on their website in section accessibility guidelines (recent standard WCAG 2.0).

WCAG 2.0 has 4 main principles (perceivable, operable, understandable, robust). Each of those principles has some guidelines which need to be followed to be compliant with a certain level of accessibility. The good news is that there are only three levels (A, AA, AAA).

Some examples of requirements for different levels

Perceivable - Level A:

    • All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (1.2.1 WCAG 2.0)
    • An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (1.2.3 WCAG 2.0)
    • When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (1.3.2 WCAG 2.0)

    Perceivable - Level AA:

    • Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

    Perceivable - Level AAA:

    • The visual presentation of text and images of text has a contrast ratio of at least 7:1 (1.4.6 WCAG 2.0)

    Operable - Level A:

    • All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (2.1.1 WCAG 2.0). 

    All details can be checked here.

    In my opinion, if you are already in the middle of the project and you aren't sure to which extent you are compliant with accessibility standards, you may use some site crawlers to check your website. The simplest and free one is Lighthouse. This tool will give you a high-level overview of how good your website is.

    The downside is that it won’t give you an accurate summary of all things to fix. Rather, some basic things without which it is no sense to fix other things. Another option is Siteimprove. This tooling is not fully free and it’s up to you whether it makes sense to buy it or not. However, this tooling provides detailed reports on all possible aspects of your site, including accessibility. Moreover, it gives you hints on how to fix issues that have been found.

    Useful tools for checking/testing your website

    1. Accessibility checkers: AChecker, WAVE app (extensions available for Chrome and Firefox).
    2. Screen reader software: NVDA, JAWS - Gives you a sense of what a person with visual disabilities can hear/do on your website.
    3. Screen magnifiers.
    4. Special keyboards to test ease of typing using this keyboard.

    No matter at what stage of the project you are, below you can see a table with my top basic things to consider to improve website accessibility.

    <grammarly-extension style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension>

    <grammarly-extension style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension><grammarly-extension class="_1KJtL"></grammarly-extension>

    <grammarly-extension style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="_1KJtL"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension><grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension>
    Website elementRequirements to considerOther (checking, testing, etc.)
    Forms

    All controls are readable and additional descriptions are available.

    Try to navigate the form using the keyboard only. You can also use a screen reader to check what will hear a person who will use it.

    Form handling error flows

    1. Identify where the error has occurred.

    2. Show required fields that have not been completed

    3. Provide a description for correct formats such as suggested words or formats.

    Images

    1. ALT text ensures that a text description is available to be read by assistive technology.

    2. ALT text should be 125 characters or less per image (because of the limitations of screen readers).

    3. ALT text can be left empty, in case, the image has purely decorative meaning or has a caption.

    Logo

    For logos, ALT text should be still added, but it should display the exact content of the image. E.g. Company name.

    Images with a link

    ALT text should describe the destination of the link, not the image content.

    Graphs

    Ensure that graphs have an appropriate legend and you are not purely relying on color.

    Text

    For text, it is important to remember that style should be separated from the structure.

    In a nutshell, HTML should never, ever be used to control the visual presentation of text.

    Instead, it should provide users with an understanding of the structure of the content in a document.

    Good practice to test text on its accessibility is to check how it looks when you use magnifiers.

    Table

    Data tables need to have particular structure elements to assist non-sighted users in comprehending the tabular data (align with front-end developers).

    Data tables should always have a <caption> element providing a brief description of the table data.

    Note! Assistive technologies read table content in a linear fashion.

    Because of this, it is important that tables are created in a way that informs the user of the table structure.

    Some useful links:

    1. MDN: What’s accessibility?
    2. Google Assistant now can read web pages in 42 languages out loud
    3. Disability statistics: USA UK
    Author of the article Anna Ustinova
    written bySenior Business Analyst, EPAM Anywhere
    our editorial policy

    Explore our Editorial Policy to learn more about our standards for content creation.

    read more