Search for a command to run...
What's up!? 🤙 We're two developers who love to share their knowledge! You will find here awesome stuff about programming and tech stuff. Feel free to contact us if you got any questions!
Check out our website https://codingbrah.com
Thanks a lot! 😊 I really appreciate it! 🤓
#IntroToCrypto
Which to use and when? 🧐
What is a Service Worker? 🤔 Service Worker is just a fancy Web Worker. The difference is, it’s actually placed between your application and the third party services. You can consider it as a kind of middleware function that can parse all requests an...
What's up, everyone!? 🤙 Recently, I'm not that active here, but this is due to a lot of work that I have 🤓 I'm working on a couple of projects on which I will share more in near future (one of the projects is a game build with React Native - siiiic...
What's up, everyone!? 🤙 I haven't posted for a while, but... I'm back! 🤟 Today I'm going to give you 5 tips on how to easily improve accessibility on your website! 🤓
Semantic HTML tags are very essential because when a screen reader or any other sort of assistive device scans a web page, it gets information about the Document Object Model (DOM), or the HTML structure of the page.
HTML elements that you should consider using when creating any page are header, nav, main, article, aside, footer. Elements like div or span are recommended to be used only for layout purpose.
When it comes to the headings, it’s recommended to use one h1 tag per page, and it should match the page title. Other headings should logically represent the page content for screen readers, so they will read the website like kind of a book.
Let’s start with what is alt attribute. When it comes to accessibility, alt text is used in screen readers to better understand an on-page image. However, it also helps in other cases. For example, it will show up in place of an image when the image can’t be loaded and it is also used to provide better image descriptions to search engine crawlers, which helps them to index an image properly.
How to write good alt text?
Describe the image as precisely as you can
Keep it short (let’s say around 125 characters)
Avoid keyword stuffing
Don’t include “photo of”, “image of” etc.,
Use longdesc=“” when you need to describe more complex images, which require a longer description
Image buttons should have an alt attribute that describes the function of the button i.e.: “sign up”.
Accessible Rich Internet Applications (ARIA) is a set of attributes, which define ways to make content and web apps more accessible to people with disabilities. It gives HTML the possibility so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism.
HTML5 semantic elements already have built-in ARIA elements, so you don’t need to worry about it in case of them!
Example of ARIA properly used:
<div id=“percent-loaded” role=“progressbar” aria-valuenow=“75”
aria-valuemin=“0” aria-valuemax=“100”>
</div>
Probably all of us were accused of being a robot more than a once. I’m not risking to say that we all love CAPTCHA as much as we love PHP 💜. However, when it comes to accessibility, it’s good to not implement CAPTCHA at all 🤓.
In case if you really, really need it then have in mind to make it simple to understand and to include alternatives for users with disabilities, such as:
Labels ale really important when it comes to the forms. They’re describing the purpose of the form control. Therefore you should provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.
Example:
<label for=“firstname”>First name:</label>
<input type=“text” name=“firstname” id=“firstname”>
However, if you want to hide the label as its purpose is clear from the surrounding content, then it’s recommended to use aria-label or aria-labelledby, so the form controls could be easily described by screen readers and other assistive technology.
Example:
<input type=“text” name=“search” aria-label=“Search”>
<button type=“submit”>Search</button>
<input type=“text” name=“search” aria-labelledby=“searchbutton”>
<button id=“searchbutton” type=“submit”>Search</button>