Accessibility in digital products. Public institutions’ websites overview.
Accessibility in the digital world is still a battlefield. However, awareness is growing, which is a very positive tendency that hopefully will change the course of how digital products are built. At Software Things, admittedly, we are really into projects in which the accessible product is a part of the core requirements. Our experience allowed us to notice and understand its importance, and we are glad that our work contributes to building accessible digital products.
This article will introduce you to the topic of accessibility in digital products using the examples of websites for cultural, medical, and local government institutions for which we have created products.
1. What is accessible product?
2. Accessibility related statistics
3. Why accessibility is important?
4. How accessibility standards are defined?
5. Our accessible websites
What does an accessible digital product mean?
An accessible digital product (website, web app, or software) is a product where everyone (despite personal limitations) can read its content and perform all the tasks:
using various tools, e.g., browser, screen reader,
on any device, e.g., laptop, smartphone, braille display,
using different types of internet connection, e.g. very slow,
in different conditions, e.g., noisy, bright lighting, dusk.
Nonetheless, accessibility should not be only about access but also a user-friendly experience. Truly accessible and high-quality digital products connect easy access with effectiveness and a pleasant experience for every user.
The lack of insufficient awareness, as well as still very bad statistics regarding accessibility, states clearly that people don’t understand how beneficial it is to build inclusive products. And they make a real change – for users but also for businesses.
A few important statistics regarding accessibility
– Per the World Health Organization (WHO), more than 2 billion people live with a disability
– Businesses that don’t provide accessible digital products lose almost $6.9 billion a year to competitors whose sites are accessible.
– In the European Union, around 80 million people live with a disability
– Consumers living with disabilities spend a half-trillion dollars per yearUnaccessible e-commerce solutions lose ⅔ digital transactions that people with visual impairments try to perform. (US Department of Commerce)
These are only a few statistics that highlight the hidden and potential benefits for businesses if they adjust to accessible products’ standards. Reality is packed with a lot of data that should convince companies to shift gears in terms of accessible digital products. And businesses really have a lot to change.
– 90% of websites are not accessible to people with disabilities who use AT- assistive technology. (AbilityNet).
– 86% of accessibility failures are due to low contrast (WebAIM)
– Companies also suffer financial effects: 2020 was the year of the biggest rise in lawsuits regarding the lack of accessibility standards: in the USA, more than 3,500 cases
Why is the accessibility topic an important one?
Making accessibility a rising trend is not only about money. Most of all, it’s about making the world a better place. And if the better place would bring additional financial benefits to companies, why not do this?
The number of people living with disabilities is rising, and it won’t change. What is more, people with disabilities will be more and more active. Therefore, building products that are accessible is the logical direction to take, as it expands the group of potential recipients.
Accessible standards for digital products
Web accessibility standards are established by the international Web Consortium (W3C for short). As part of the Web Accessibility Initiative (WAI), the Consortium has defined the Web Content Accessibility Guidelines (WCAG), which currently have a valid version of WCAG 2.1.
In order for a digital product to be fully accessible, for example, a website, it must meet all the criteria defined in WCAG, which may be difficult or even impossible to achieve in practice. Therefore, three levels of success criteria have been defined.
A level criteria (minimum level): the success criteria must be met, otherwise some groups of people will not have access to information on the site at all.
AA level criteria (recommended level): the success criteria should be met; otherwise, some groups of people will have difficulties accessing the information contained on the site.
The AAA level criteria (comfortable level) should be met in order to not restrict access to the content of the website in any way.
Introducing WCAG principles is not the easiest thing to do. That’s why it’s recommended to pass it on to specialists. It’s not enough to install even the most wonderful extension to the website, which will give users the ability to change the contrast, font size, and read the text with a screen reader. These types of solutions are narrow and tend to be rather faulty.
Myths about accessibility debunked
Accessible digital products are expensive
To get the most affordable experience, it’s better to introduce the accessibility standards from the beginning. Building an accessible website is not much more expensive than one that doesn’t meet standards. On the other hand, implementing accessibility standards on an existing website is a bit more complicated and costs additional money. Anyway, in most cases, it’s worth the deal, as the accessible website brings the money in the long term.
Accessibility makes design ugly or out-of-trends
This one is particularly unfair because it’s simply so untrue. Accessible design doesn’t have to be boring, as accessibility has nothing at all to do with aesthetics. However, it must be admitted that not every „fancy design widget” will be accessible. But an inclusive product doesn’t mean that every element is fully accessible. Not every website has to be AAA level, as there are options in between.
Besides, the most important thing to remember is that many of the accessibility standards aren’t even visible. They are hidden, they play a role in the background, or they must be switched on. Aesthetics and modern design have nothing to do with it. Aside from this, we should always keep in mind that a great design is not only about a nice interface; it’s more about how it interacts with users and how it makes them feel.
Accessibility is not required by law
This aspect depends on a specific country’s law. Poland has high standards for accessibility, so it is important to implement it carefully. Digital products of public institutions are often audited for accessibility. Failure to meet the requirement means the risk of financial penalties. At Software Thing, we have already implemented several projects accessible to institutions in various segments: medical, cultural, and local government.
Accessible websites made by Software Things
When creating accessible digital products we pay attention to many details that matter. The guide to implement them is the WCAG 2.1. The basic and the most easily noticeable accessible elements are:
– providing an additional contrast version of the website
– adjusting the letters’ size and spaces between them,
– paragraphs’ spaces,
– headings’ hierarchy
– using the alt texts,
– lack of blinking and flashing elements
– keyboard navigation
– giving instructions on how to deal with errors.
However, the accessible website is not limited to these elements. There are many more, less obvious choices that support accessibility and which we introduce to provide clients with accessible websites.
“We care about accessibility at the level of design and code, but we also encourage clients to ensure accessibility through friendly content exposure, for example, by choosing not to place text on photos but to use explanatory descriptions under the images.” Bartek Urbanek, full stack developer
Let’s take a look at the other accessibility features that we have implemented in two /three chosen projects.
Website for a cultural institution Silesia Film
What’s worth being highlighted is the client’s need of having a modern and aesthetic website that precisely reflects the client’s key visual principles. Attention to details mattered in this project a lot. All of that, plus the requirement of having an AA level website was our goal to reach in terms of design and accessibility.
A few examples of the accessibility standards we have introduced:
1. Adaptive and responsive layouts
2. Accessible design with a goal of passing the information
– proper choice of colours and providing a high-contrast to allow for dividing the foreground from the background.
3. Useful navigational aids
4. Design that helps users to scan for meaningful information, maintain reading order, and create a legible focus index.
– the UX UI designer created a heading instruction for the developer to code the site so the AT can read the information hierarchy and assist users in text reading (and skipping).
– Fonts (including size) are chosen to stress hierarchy, so that every user can distinguish which element is a title or headline and which is a paragraph.
5. Helpful navigation based on recognised principles
– call to action buttons with text and icons
6. Accessible interactions – simple forms, easy to read thanks to logical elements’ grouping, sensible labelling and proper use of colours
Website for a medical institution – blood donation centre
The goal of the website is to pass the information to users in the easiest and most effortless way possible. The target audience is very broad as the client is a medical entity, so the design must be very universal, informative, and easy to consume.
1. Improved clarity with good design
– the website is based on a clear and legible design, so the user can easily find the needed information. The differences in design reflect the various goals the user can achieve and make it easier to distinguish one piece of information from another.
2. Design that forwards and explains information
– crucial information is presented in various ways – visually and via content. It’s aimed at supporting the understanding of the message. Additionally, this type of information display allows AT to read the message easily.
3. Support of accessible interaction by significant links and adequate design
– to facilitate easy interactions, meaningful links are provided and highlighted with appropriate colour and contrast. To strengthen the visual presentation, we used another accessibility element – content on hover.
4. Accessible communication and information finding
– providing easily accessible tables and graphs with proper typography and colour usage to indicate hierarchy
Website for public institution
Another accessible project was for a city institution, for which we have created a new website. The client’s needs regarded a new design as well as a better experience for users in terms of website functionality. The most important requirement, however, was to meet accessibility standards for public institutions in creating digital products.
Here are a few solutions we have introduced that support accessibility.
1. Accessible videos, animation, and images
– There are no auto-firing animating elements. Additionally, each animation can be easily stopped—the user doesn’t have to search for the stop button in settings, as it is clearly visible and easy to find.
2. Accessible navigation
– We have implemented useful solutions that enhance easy navigation:
before downloading the file, the user sees a message with information about the file: its size, extension, and what it contains
3. Accessible design to communicate the message
– When designing for accessibility, we always put emphasis on multipath communication: via content and colour, and if necessary, icons. In the below example, the user can see the colour indicator, a legend explaining the meaning, and additionally, the AT sees what the specific colours mean.
4. Providing accessible solutions helping users to scan the valuable information and navigate on the website even more easily.
– The website has a separate subpage-sitemap that allows users to see the whole page content from one place, so the user can easily navigate and find needed sections and topics.
5. Accessibility declaration
– According to the Polish law, accessible digital products have to include an accessibility declaration that informs users what has been done to improve accessibility but also who to contact in case of accessibility issues. Here the declaration contains meta tags that allow AT to read the text but also additional information about the site.
Accessibility matters, and it is an indisputable fact. Inclusive digital products will hopefully be the future of how we approach design and development of software solutions. We are not saying it’s easy, but the same is with high-quality digital software – it takes expertise to create it. Meanwhile, as overall awareness increases, we are already thrilled to be making so many accessible products.
We will be happy to answer your questions about accessible digital products. Contact us and let’s talk about your needs and ideas.
Hi, we are Software Things, and we can help you with your website idea. If you are looking for a team to implement a useful, well-designed, and lightning-fast website – you've come to the right place.