Posted on Oct 9 I recently completed a full-stack project at The Collab Lab and developed a shopping list app with 3 other developers. Throughout this journey, I gained a profound appreciation for the importance of Accessibility in web development. It is crucial for front-end developers to have accessibility awareness in mind so the apps we are building can be user-friendly to all. While I don't claim to be an accessibility expert, below are the 6 simple low-hanging fruit that you can grab to significantly enhance your site's accessibility.Since we are all well-acquainted with HTML, this is an intuitive one. Utilize semantic labels such as , , as opposed to overusing tag all the way throughout the code.However, it is easy to overlook this aspect when you are using third-party component libraries such as Daisy UI and simply copying example code from documentation without a second thought. This happened in our project where I used the Daisy UI accordion component and later found out the
Screen Readers wouldn't announce the content because Daisy UI uses an
element without
. This is also a valuable lesson for me to choose external libraries with built-in accessibility to avoid potential pitfalls down the road.You can press Command + F5 to activate Voiceover screen reader on a Mac. While testing, navigate through your web page using only the keyboard by pressing tab to move forward and shift+tab to go backward. Ensure screen readers announce all necessary content, and the layout is structured in a logical and tabbable order. Also test across different browsers (Chrome, Firefox, Safari) to ensure consistent performance.Include aria-label as an attribute of any interactive element such as a so screen readers can convey the purpose of the button. One use case in our app is we have an icon button used for copying tokens. Since this button lacks a textual label, we need to include an aria-label like below:You can read more on the MDN Docs aria-label.On the other hand, aria-live serves a different purpose. It is used to announce live updates such as a state change. By wrapping your content inside an aria-live , whenever the content changes, the screen readers will reread.You can read more on the MDN Docs aria-live.If you have an
Input Field , ensuring the focus remains on the input can be helpful. In our app, we have an input field that allows users to filter items by name. After they clear the field, notice how the focus is brought back to the input field so they can start typing again without manually clicking into the input field again. You can achieve this in React using the useRef hook and ref attribute in
.When picking your color palette, it is crucial to maintain enough color contrast between the text and background so users with low vision can still read the content clearly.You can use a Color Contrast Analyzer or install a Google Chrome extension called Lighthouse to generate an accessibility report.Some users may have sensitivity to motion effects or prefer slower animations. In our app, we use Toastify to display notifications, and the default transition mode bounce might be too fast for slow-motion users, so we've adjusted it to Slide instead.Those are the 6 accessibility lessons I learned from building this project. What are some other good tips to ensure your web app can serve everyone? Let me know in the comment below!If you found this post helpful, please give me a 💜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 Zane Schepke - Oct 2 Shivam Singh - Oct 3 Szymon - Oct 2 Sebastian Fritsch - Sep 28 Once suspended, shangguanwang will not be able to comment or publish posts until their suspension is removed. Once unsuspended, shangguanwang will be able to comment and publish posts again. Once unpublished, all posts by shangguanwang will become hidden and only accessible to themselves. If shangguanwang 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 Shangguan Wang. 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 shangguanwang: shangguanwang consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging shangguanwang 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.
