Posted on Oct 10 As someone who suffers from chronic migraines, I am particularly sensitive to bright colors, which can trigger migraines. Navigating applications without a dark mode option can sometimes pose a bit of a challenge for me, especially when I need to use them for extended periods. As I progressed in my development career, I became acquainted with web accessibility, It dawned on me that there are individuals who face persistent challenges accessing applications not just sometimes, but every time because their unique needs have been overlooked.This realization led me to educate myself about disabilities and it became clear to me that every day is not always straightforward for people with disabilities. As a developer, I believe it is my responsibility to make sure that I create applications that are convenient for everyone, including people living with disabilities.Using the appropriate semantic elements in Html can act as a guide for visually impaired users to navigate a website. HTML provides a lot of semantic elements, and it is crucial to use them properly. Some types of semantic elements include:List items: When used correctly, HTML lists group-related elements and helps users with Screen Readers better understand the information presented. Examples are:
, , , Body structure: Instead of using divs to separate every section of your website, use the semantic element to give structure to your website or web application. Examples of the body structure include , , . , .Accessible attributes: HTML attributes are very important when building accessible web platforms. They can give more information about an element, especially for people using screen readers to access your platform. Some web-accessible attributes are: aria, rel, alt, role, title, and so on. alt: The alt attribute is an important tag in HTML that provides more information about the images used on a webpage. It is used by screen readers to describe the image to users. It is recommended to keep the alt text brief and to the point. If the image is purely decorative, then the alt tag should be left blank. Avoid using phrases like "image of" or "photo of" in the alt text, as these are already interpreted by screen readers.An example of a descriptive image: An example of a decorative image: .I created an image component in my React app using typescript to ensure that I always provide an alt text. I made it mandatory to pass the alt as a prop, so if I ever forget to add the alt attribute to my image, typescript throws an error and reminds me to add it.role: The 'role' attribute does exactly what it says—it tells browsers and screen readers what an element does. It's like giving an element a specific job title. Always use the most fitting role possible, and avoid using generic roles like 'group' unless it's really necessary. Also, don't double up on roles; if something already has a clear description, let it be. e.gWhen creating a web page or component, I prioritize smooth keyboard navigation to ensure a seamless user experience. If I encounter any challenges in navigating with a keyboard, I revisit my code and make the required adjustments. It's important to remember that some users rely solely on their keyboards to interact with your applications. Neglecting to test and optimize for keyboard navigation can create barriers for these users, hindering their experience with your platform. Therefore, it is crucial to ensure that keyboard navigation is seamless and user-friendly for all users. I have visited some websites where it was quite difficult for me to navigate due to the color scheme. If you are not someone with a permanent color vision issue it is still important to understand how people perceive color and contrast. This will help you understand how to best support their visual needs.For a comprehensive understanding of the color system and accessibility, refer to this article by material.io.. When working with colors it is important to understand the CSS media @prefers-color-scheme and @prefers-contrast. The linked MDN articles offer detailed insights on how to effectively utilize these features.Web accessibility goes beyond using correct HTML codes; it also involves considering the impact of animations on users. Personally, as someone prone to migraines, certain animations can trigger dizziness for me. If you've experienced motion sickness, be it in a car or on a boat, you can relate.To address this concern, the @prefers-reduced-motion CSS media query comes into play. It checks whether users have enabled a setting on their device to minimize the amount of motion they experience.It is also important to avoid flashing content which can be particularly frustrating for users with photosensitivity, frequent flashes also have the potential to trigger seizures.In cases where flashing content is unavoidable, it's imperative to include a Flash Warning alert on your platform. This proactive approach ensures users are informed and can take necessary precautions while engaging with the content.When you're working with form elements and attributes, the default elements have very good accessibility support. But sometimes the styles are not very pretty and uniform across different browsers and we might need to create custom form styles. when building custom forms, it's essential to prioritize accessibility.Ensuring that custom styles maintain accessibility standards is crucial. This guarantees that, despite the visual enhancements, users of all abilities can seamlessly interact with and navigate through the form.Always add a focus style for your form so a keyboard user knows which field they're currently on, the HTML input element already has a focus style using an outline, I personally don't like that style so using tailwind I would usually replace it with something like:Labels: They are used to inform a user about the purpose of an input field. Do not replace the labels with placeholders as they serve different purposes. If a field is required a good practice is to add that to the label.Error handling: When a user encounters a form error, we need to make the error known to the user in the simplest way possible, and offer suggestions on how to fix the error. In my next article, we'll look at how to test your website for accessibility. If you found this article helpful, please like and consider sharing it with others who may also benefit.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Fernando - Sep 12 Naomi Chopra - Sep 25 Alicia Marianne - Oct 3 Odumosu Matthew - Sep 15 Once suspended, ilizette will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ilizette will be able to comment and publish posts again. Once unpublished, all posts by ilizette will become hidden and only accessible to themselves. If ilizette is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Elizabeth. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ilizette: ilizette consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ilizette will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.
