Hello guys!!! I am back with another blog Applied Accessibility, part of my web development learning blog series.
Accessibility refers to web content and UI that can be understood, navigated, and interacted with by a broad audience. It includes people with visual, auditory, mobility or cognitive disabilities.
There are various factors which can help us in making website more understood, I am sharing some important ones below.
Add a text alternative to Images for visually impaired accessibility -
People with visual impairments rely on screen readers to convert web content to an audio interface. Screen readers can access the alt attribute. You should always include an alt attribute on your image. And in the cases when image is already descriptive set the alt attribute to empty strings.
Jump straight to the content using the main element -
The main element is use to wrap the main content and there should be only one per page. It adds semantic meaning to the content.
Improve accessibility of Audio Content with the audio element -
The audio tag supports the controls attribute. It is a boolean attribute, it doesn't need a value, it's presence on tag turns the setting on.
<audio id ="meow clip" controls>
<source src = " URL" type =" TYPE">
</audio>
Improve Readability with high contrast Text -
The WCAG recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors.
Avoid colorblindness issues by using sufficient contrast -
Color is a large part of visual design. Foreground and background colors need sufficient contrast so colorblind users can distinguish them. Some online color picking tools include visual simulations of how colors appear for different types of colorblindness.
Make Links navigable with HTML Access Keys -
Adding an access key attribute can make navigation more efficient for keyboard-only users. HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.
<button accesskey="b">Important Button</button>
Use TabIndex to add keyboard focus to an element-
The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that the element can be focused on.
<div tabindex="0">I need keyboard focus!</div>
Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex="0" items.
These few practices can help you build web pages that can be accessible to everyone, you can explore many others too.
Hope you find this article helpful!!