Image for post
Image for post

Introduction

In the previous story, we learned about the importance of web accessibility and how we can achieve that using standard HTML, CSS, and JS. We have learned that WAI-ARIA defines a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve openness wherever it is lacking for Assistive technologies(using OS APIs).

From an HTML angle, WAI-ARIA provides extra attributes applicable to all HTML elements. An important point about WAI-ARIA attributes is that they don’t affect anything on the web page, except for the information exposed by the browser’s accessibility APIs

In the previous story, we have also learned that Accessibility does not just mean “blind users with screen readers”, but sighted keyboard users, users with colour blindness/deficiencies, deaf/hard of hearing users, users with cognitive disabilities. however, ARIA is (almost) exclusively about how to ensure that web content is correctly conveyed to assistive technologies (screen readers, screen magnifiers with screen reading capability…


Image for post
Image for post
Photo by Paul Green on Unsplash

Introduction

If you are part of software development lifecycle then you must have heard the term of Accessibility. It is nothing but to keep your software accessible for all type of users independent of their physical or mental abilities and for all type of hardware. Similarly, Web-Accessibility talks about the Accessibility of your web-content or web-application or website.

Right To Content Equality

In nutshell, The Web is designed to work for all people irrespective of their hardware, software, language, culture, location, or physical or mental ability. …


Image for post
Image for post

Recently, my sister brought me the 250GB Transcend JetDrive from the USA for my MacBook Pro (Retina, 15-inch, Mid 2015). My current SSD has only 250 Gb of storage which is enough for System Applications along with my professional Software Development but I can not keep oversized File format particularly media files like Video, Images etc. Being a Cross-platform developer I also need to switch to multiple platforms to verify my development on a different platform, for that, I also need to keep Windows and Linux Virtual machines set up on my machine. …


Image for post
Image for post
Photo by Shagal Sajid on Unsplash

We all know the scroll bar is a UI component which commonly located on the far right or bottom of a window that allows you to move the window viewing area up, down, left, or right. Most people today are familiar with scroll bars because of the need to scroll up and down on almost every web page and application.

Problems with the scrollbar in web-application

  • All operating systems have a different type of Native Scrollbars and most browsers inherit OS-specific scrollbar, which makes your web-application Scrollbar’s look & feel different on different OS. …


Image for post
Image for post

Recently, I was using a Linear Gradient in one of my projects, to implement linear-gradient I have read complete usage documentation from MDN, It works like charm on Chrome, firefox but when I tested it on safari it was not working as expected then I have found out, safari requires special WebKit prefixed gradient function, instead of normal gradient function

background: -webkit-linear-gradient(aqua, white)

I have added two background styling like we generally do to support different vendor-specific properties

background: -webkit-linear-gradient(to right, rgb(245, 245, 245, 0.8), #f5f5f5 65%);

background: linear-gradient(to right, rgb(245, 245, 245, 0.8), #f5f5f5 65%);

Still, it was not working on safari as expected maybe you have figured out the issue, but it took me more than 40 min to found the actual issue, yes the issue is, it should be rgba instead if rgb, well at my end we have some utility which is converting Hex color to RGBa color I have never realized it is giving rgb instead of rgba but why I was not able to found this bug earlier? because Chrome and Firefox both behaving correctly with rgb(245, 245, 245, 0.8) wheres safari requires rgba in order to make it work. …

About

Harsh Kurra

Senior Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store