WCAG Accessibility

When designing a website or web application we consider other aspects of UI/UX whereas we always forget to consider people with disability. Lets have a look at statistics of users with disability in USA.
  • 19.9 million (8.2%) have difficulty lifting or grasping. This could, for example impact their use of a mouse or keyboard.
  • 15.2 million (6.3%) have a cognitive, mental, or emotional impairment.
  • 8.1 million (3.3%) have a vision impairment. These people might rely on a screen magnifier or a screen reader, or might have a form of color blindness.
  • 7.6 million (3.1%) have a hearing impairment.  They might rely on transcripts and / or captions for audio and video media.
If we look at above number large user base is having some sort of disability hence if application is designed with accessibility in mind it can bring in more user which would translate to success of the product/website.
Also it is being made mandatory  by law for software applications to be designed as per accessibility standards to keep differently abled people in mainstream.

ABCD of Accessibility

As a differently abled person when I access a website following should happen.
  • Accessible using tabs for easier navigation across all the controls on the page.
  • Bigger the better, fonts should by default bigger enough for someone with bad eyesight to be able to read it with default zoom.
  • Color contrasts should be set in a way that text and surrounding areas do not cause any problem for some with color contrast issue. This applies to text and images and possible combination on the screen.
  • Descriptive readable labels help user to get better insight, this will enable screen readers to read the description
W3C has invested lot of efforts establishing standards for accessibility, lets look at them.

W3C's Web Accessibility Initiative

The W3C is an international, vendor-neutral group that determines protocols and standards for the web. Within the W3C, the Web Accessibility Initiative (WAI) and its working groups develop accessibility guidelines for web browsers, authoring tools, evaluation tools, and web content, to name a few. The Accessibility Guidelines Working Group creates guidelines called the Web Content Accessibility Guidelines (WCAG).

WCAG 1.0

WCAG 1.0, finalized in 1999, was a major development in making web content more accessible to people with disabilities. Its 14 guidelines and numerous checkpoints formed the basis for the initial Section 508 guidelines.
As technologies advanced, WCAG 1.0 became less relevant, and the development of WCAG 2.0 began.

WCAG 2.0

WCAG 2.0, released in 2008, shifted emphasis from technique-centered checkpoints to guidelines and success criteria rooted in four core principles:
  • Perceivable
  • Operable
  • Understandable
  • Robust
These principles (sometimes referred to as "POUR") remain constant as technology changes. Each principle contains guidelines, which in turn contain various success criteria. The principles are examined in depth in Constructing a POUR Website.

Levels of Conformance

To help development teams prioritize accessibility implementation and remediation efforts, WCAG success criteria are organized into three levels of conformance:
  • Level A is a basic requirement for some users with disabilities to be able to access and use web content.
  • Level AA indicates overall accessibility and removal of significant barriers to accessing content.
  • Level AAA provides improvements and enhancements to web accessibility for some users with disabilities.
These levels are cumulative. To claim Level AA conformance, a website must meet all Level A and AA success criteria. Likewise, Level AAA conformance implies that all success criteria from all three levels have been met.
To check level of conformance of your website/application have a look at checklist

Testing tools

To check for issues/bugs we can easily use one of the browser based plugins(Axe and Wave are recommended) which will analyze generated html and report issues like below:-
  • Missing aria-label,aria-describedby.
  • Color contrast.
  • Controls with same name/id.(To avoid confusion for end user)
  • Order of headings (h3 in h1)
  • Missing alt text for image.
  • Empty button.
  • Same alt text images.
  • Redundant links.
  • Redundant link titles.
  • Unreachable controls.
Once html has been tested it is always suggested that the page is tested with screen reader to make sure correct information is being read out to the end user (Enter your name, Enter your last name).
Screen reader will make sure that we don't end up making mistakes like having aria-label as Enter your name in place of address.

Axe(Chrome Plugin)

The axe accessibility checker for Chrome is a fast, lightweight accessibility testing tool that returns zero false positives. It only tests for accessibility issues that can be accurately detected via automation, and it only tests for components that actually exist on the page or application you’re testing. The axe Chrome extension utilizes the axe open source JavaScript library developed by Deque Systems – the third generation of accessibility rules for HTML-based user interfaces. The axe library differentiates itself from other approaches and rules repositories in the following ways: 
1. It works on all modern browsers,
2. It supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth
3. It has zero false positives (bugs notwithstanding)
4. It is open source (the axe-core library, not the extension)
5. It is actively supported by a major accessibility vendor
6. It is designed to work with whatever tools, frameworks, libraries and environments you have today
7. It is designed to be integrated into your existing functional/acceptance automated tests
8. It automatically determines which rules to run based on the evaluation context

WAVE Web Accessibility Evaluation Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.

NVDA(Screen Reader)

NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. Providing feedback via synthetic speech and Braille, it enables blind or vision impaired people to access computers running Windows for no more cost than a sighted person.

References:- 

Comments

Post a Comment

Popular posts from this blog

RabbitMQ setup and cluster configuration on a windows network

Image
  Queuing has been integral part of application architecture for quite sometime and therefore there are number of frameworks available to let you manage Queue/Bus. Queue as you may know is used when you have one node to process your message and Bus (Service Bus/Topic) is used when there is more than one node that needs to process the message. RabbitMQ is one of available framework along with MSMQ, Kafka, Azure Service Bus and etc. RabbitMQ is one of the most popular framework as it can be used to create highly available and fault tolerant cluster of nodes that hold the queue's and message's for processing. In the writeup we will try to install RabbitMQ cluster on couple of windows machines which can be easily translated to containerised application using docker. 1) To install docker visit RabbitMQ official  and download required file, once downloaded execute the exe and follow the wizard. You may be asked to install Erlang in the process as that is one of the primary requiremen
Read more

Gitflow using source tree

Image
In early 2010, Vincent Driessen wrote an article called   “A successful Git branching model”  which recommended an approach called  git-flow  to use git branches in your development cycle. The idea was to standardise branching and merging when developing features, handling releases and managing hot fixes, in order to be consistent and gain the advantages of git’s ‘branchy’ development model. Using many separate branches in Git gives you lots of flexibility, but it can get complex. Adopting a standardised approach has many advantages: ·         Keep your repository tidier ·         Keep your procedures clearer ·         Move between projects more easily with familiar branch structures ·         Get new developers up to speed more quickly SourceTree   now integrates with git-flow and presents it to you in a friendly and intuitive way. Summary of the concept The general idea of git-flow is to use the following branch structure in your repository: ·         Develop
Read more

Component analysis for application security

Image
If you are into writing software you probably follow security practices to keep your application secure. Since most of the platforms are now open source we consume a lot of open source components in our projects. It happened sometime back when a vulnerability was found in one of the popular components(log4j) and companies were clueless about the existence of any such issue as a result many kept running their software on the vulnerable version of log4j. You may not have been impacted or attacked for that matter but never know when it's your turn, is best to have protection against scenarios where components/license used in thrid party component becomes vulnerable/outdated. I recently stumbled upon  Dependency-Track  , it works in two parts:- Identify the list of components in your project, which is also called the SBOM (Software bill of material). CycloneDX can be installed with just a few commands to generate SBOM. Upload BOM to Dependency-Track using UI/API which then scans it aga
Read more

Analyse log using plug and play FileBeat

Image
ELK-B stack is one of the powerful frameworks for log analysis which helps to draw important business decisions and helps evolve ALM. There are few ways to inject data in Elasticsearch for analysis  Writing data using REST API    Using available frameworks(Serilog, NLog, etc) that have an abstraction layer and does all the REST calls behind the scene for you. While changing code is the most popular method but it may not be always possible/viable, also sometimes you do not have access to the environment and all you have is the log files in one format or another.  Filebeat is another powerful plugin in the ELK-B stack that can help you analyze logs without changing code, all you need to do is download FileBeat  and unzip the file. Once you have extracted the content open filebeat.yml and under  filebeat.inputs: of filebeat.yml   locate  paths:          paths maintains list of folders or docker path that will contain logs:-          paths:                   - C:\ProductService\logs\*   
Read more

Introduction to Blazor

Image
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. Blazor is new addition to .Net arsenal which is based on WebAssembly and using that enables developers to create web apps using C# and HTML, hence removing dependency on JavaScript framework like Angular/React and etc. If we are to compare blazor with ASP.NET MVC above would be content in .cshtml file which in this case becomes .razor file, code for MVC controller is also embedded in .blazor page for blazor applications. There are 2 main flavors of Blazor:- 1) Blazor web application. In this case application is hosted in IIS and only html travels to the client application for every action on the page client communicates back to the server with information of action on client side. Server version will then send back response back to the client which
Read more

Azure

Image
What is Azure Cloud:- Microsoft has been building highly scalable applications in datacenters around the world—applications that have global reach and high availability, and offer great functionality to users. Azure allows you to take advantage of the same infrastructure to deploy your own applications, with the corresponding capabilities to reduce your maintenance requirements, maximize performance and minimize costs. Though we know that cloud adds lot of value but that only happens when it is done right and hence we need have thought of  below before taking a call:- 1. Always plan for the long-term . It’s easy to be tempted by solutions that promise immediate benefit and what looks like the quickest route to the cloud.  While the PaaS (platform as a service) approach may appear more complex, the long-term benefits such as built-in elasticity, service healing, patch management, and so forth, make it a worthwhile investment that will pay dividends both on the technology and busi
Read more

What Interview Is/Is Not for an interviewer

After spending more than decade and having participated in hundreds of interviews, following is my list of what interview "Is" and "Is Not" from interviewers stand point. Interview Is:- Opportunity to meet someone with a set of experience in which they have learned their own ways of doing things and may help you learn something new. To learn what worked for them and what didn't, also the reason why it was success or failure for them. Which provides you free knowledge which can help you avoid your next failure and probably this is not documented and you would have failed. To help build a better work force, so energy invested today in interviewing will save you a lot in future. Interview Is Not:- To ask questions which may not be needed for the role. To ask questions which you can't answer yourself, In doing so you will never know if the person is right/wrong. You can ask such questions to see if they bluff or become impatient but not to test t
Read more

.NET MAUI and Blazor to create windows/web and mobile application (.NET 6.0)

Image
If you are a .NET developer you would know the following frameworks are generally used for development:- I can tell you from my personal experience that this is not an easy stack to master and something that I have struggled with time. While you can solve problems with the tech stack of windows and the web by using ElectronNET with ASP.NET Core or Blazor, the problem still persists for mobile applications. Now, what if told you that you can do all of the above by just using 1 framework along with Blazor, exciting isn't it. .NET MAUI does just that and saves you from a lot of trouble learning and managing various frameworks. What is .NET MAUI:- .NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML or Blazor. So if you know Blazor you can write a web app and SPA but when combined with .NET MAUI you can use your skillset to create and deploy the application on web/mobile/desktop. Framework stack now would look
Read more

Clean Architecture

Image
 We have always heard and talked about N-Tier and N-Layer architecture along with SOLID and SOC, but as the size of application along with complexity has changed over a period of time do has application architecture. Also since teams have adopted agile, releases are much more frequent than they used to be a few years back. In the light of the changing landscape, it is important to structure your application design in a way to give best practices, manageable code, loosely coupled features/functionality, and the least possible change propagation into various layers of the application. Popular architecture:- Layered/N-Tiered architecture Monolithic architecture Microservices architecture Event-driven architecture Service-oriented architecture What is Clean Architecture:-     Clean architecture is another name for Onion architecture, it can be viewed as an onion that consists of various application layers, can be primarily divided into 2 parts i.e Core and Peripheral layers. In the below s
Read more