People with vision impairments use screen readers to access computers, tablets and phones. Screen readers convert text on the screen to an understandable format for users to read. Users can also navigate and run commands by using some shortcut keys or touch gestures.
Here are a few things that we can do to make your website more accessible for blind people and people with vision impairments.
Front-end development typically involves three main languages: HTML, CSS and javascript.
Each of the languages performs a separate but essential function. They work together to determine how a webpage is structured(HTML), how it looks (CSS) and how it functions (javascript) in a web application.
And the browsers handle figuring out how to turn these files into a functioning web page.
Today I learned an easy solution to replace all occurrences of a forward slash in string in javascript. I had to convert an URL to a string in another format, so initially, I tried str.replace() method like But to my surprise, it only replaced the first occurrence in the string.Then I thought oh I might need to use a regular
The Fetch api is used to fetch data or resources from a server. It allows us to retrieve data from a URL without having to do a full page refresh. The Fetch api is an improvement over the XMLHttpRequest API (XHR). Here is a basic example of XMLHttpRequest. Example from MDN docs. And a simple fetch request looks like: fetch method accepts
Srcset is a property that we can use with img tag. It lets us list a set of images which we want to load at different resolutions for an image. For example: The browser chooses one from the list and then fetches the image based upon the viewport dimensions, the image size relative to the viewport, the pixel density of
The Flexible Box Layout Module (Flexbox) is a useful and easy-to-use CSS module that helps us to make our content responsive. Flexbox takes care of any spacing calculations for us, and it provides a bunch of ready-to-use CSS properties for structuring content.You can play with some sample code here. Flexbox has two components, a parent container and child items. Flexbox
Media queries help us determine the layout of our application based on various device types, specific characteristics and parameters such as screen resolution or device orientation. We can use media queries in CSS, HTML and javascript. CSS: We can use media queries in CSS with the @media at-rule. The @media rule allows us to conditionally apply parts of a style
The viewport is the area of a browser which shows the content of your website. The viewport can be different for devices of various sizes. If the content of the website does not fit in your browser’s viewport, the browser adds scroll bar to make it accessible. A viewport is neither the size of the windows of your browser nor