Andrew Malek’s Post

A great article about tooltips. It seems a small details but there are some good practices to pay attention to. #webdevelopment #css https://lnkd.in/d3-XnZQZ

Tooltip Best Practices CSS Tricks

Tooltip Best Practices CSS Tricks

Tooltip Best Practices CSS Tricks

This article shares practical advice on marking up three common UI patterns the right way. Whether you’re new to accessibility or just need a refresher, these tips will help you build more inclusive interfaces. https://buff.ly/3zFLQiz #WebDev #WebDevelopment #DigitalAccessibility #Accessibility #A11y #HTML

For those who are beginners in frontend development or looking to fill gaps in CSS layout, I highly recommend Josh Comeau's three classic tutorials. I believe they're the best interactive tutorials available, even surpassing resources like MDN. These articles are so good, they not only save my hair from being pulled out in frustration but also feel like a life preserver in the sea of coding! Interactive Guide to Flexbox: https://lnkd.in/eCBW2ds9 Interactive Guide to Grid: https://lnkd.in/eCBW2ds9 The Ultimate Guide to Centering a Div: https://lnkd.in/eFRmGaGE

Accessibility Tip of the Day 151: Don't use accessibility overlays. Accessibility overlays are widgets that you can include on a website, usually through a small JavaScript snippet. The overlay usually does two things: 1. Provides some additional controls and profiles for users, like activating a "keyboard mode" or "screen reader mode" or "colorblind mode" on the website 2. Runs some JavaScript on the website's HTML to modify the existing code, usually by adding various ARIA roles and attributes to the HTML elements on the page The allure of accessibility overlays is that they are often marketed as a simple solution to all of your website's accessibility problems. Just include this snippet and your site will be accessible. However, there are very real limitations to what accessibility overlays can accomplish. Some things they can do well, and other things they can't. In my experience working with overlays, I've even seen them make the site less accessible in some areas. Automating accessibility is hard. We know that accessibility checkers can't catch all types of accessibility issues, so it's not reasonable to expect accessibility overlays to be able to catch and fix all types of accessibility issues. For now, we need humans involved to help make websites more accessible. You can find more info on the Overlay Fact Sheet here: https://lnkd.in/g32eNT7A #accessibility #a11y #accessibilityTipOfTheDay

Debugging and testing were integral parts of the development process, helping me identify and resolve compatibility issues across different browsers and devices. This project not only strengthened my understanding of HTML, CSS, and JavaScript but also underscored the importance of responsive design principles and user-centered development. By creating a responsive landing page, I gained practical experience in creating engaging web experiences that are both functional and visually appealing across a diverse range of devices and screen sizes. Creating a responsive landing page involves implementing a combination of HTML, CSS, and JavaScript to ensure optimal user experience across various devices and screen sizes. HTML forms the structure of the page, utilizing semantic elements for headers, sections, and footers to enhance accessibility and SEO. CSS is pivotal for styling, utilizing media queries to apply different styles based on screen width, ensuring the layout adjusts fluidly from desktops to mobile devices. Techniques like CSS Grid or Flexbox are employed to create flexible and responsive layouts that adapt to different viewport sizes. JavaScript adds interactivity by enabling dynamic elements such as sliders, modals, or interactive menus. Event listeners are used to respond to user actions, such as toggling visibility of elements or triggering animations. Form validation ensures data integrity by checking user inputs before submission, enhancing usability. Performance optimization techniques like lazy loading images and minifying files are applied to improve loading times and overall user experience. Testing and debugging ensure the landing page functions seamlessly across browsers and devices, addressing compatibility issues and ensuring consistency. This project not only reinforces proficiency in front-end development but also underscores the importance of responsive design principles in creating modern and accessible web experiences. source code:https://lnkd.in/guPA9XcJ #WEBDEVELOPMENT #CODSOFT #LANDINGPAGE

Recently, I've posted quite a bit about web development tech, and the latest additions to HTML, CSS and JavaScript. But there's more to development than just the technical side, and that aspect sadly gets a lot less attention online, despite arguably being just as important or even more so. So today, I'm gonna discuss #Accessibility, and correct two mistakes people often make when talking about it for #WebDevelopment. 𝟭. 𝗚𝗼𝗼𝗱 𝗗𝗲𝘀𝗶𝗴𝗻 𝗧𝗿𝘂𝗺𝗽𝘀 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗙𝗶𝘅𝗲𝘀 Starting with something a lot of developers fail to realise. Things like aria tags, skip links and marked up data are not the most important aspects when it comes to making an accessible site or app. No, they're fixes. Last minute tweaks to fix sites that were probably poorly engineered to begin with. For example, most examples of aria-roles are only necessary if you used the wrong HTML element to begin with: https://lnkd.in/eBMZW3J2 <article> is better than role="article", <li> is better than role="listitem", <h1> is better than role="heading", etc. If you need to use something like those, reconsider how you're writing HTML. And the same goes with links, buttons, etc too. Yes, you can add a bunch of extra markup to tell screen readers that a <div> with a click event is a button, or you could... just use a <button>. Aria and roles and other such things are fixes for mistakes that are hard to change at the last minute, or for when you really, 𝘳𝘦𝘢𝘭𝘭𝘺 need to implement completely custom behaviour for a complex widget that isn't represented well in default HTML and CSS. 𝟮. 𝗗𝗶𝘀𝗮𝗯𝗶𝗹𝗶𝘁𝗶𝗲𝘀 𝗮𝗿𝗲 𝗻𝗼𝘁 𝗔𝗹𝘄𝗮𝘆𝘀 𝗣𝗲𝗿𝗺𝗮𝗻𝗲𝗻𝘁 Secondly, you need to realise one more thing about accessibility and disabilities as a whole. Namely, they're not always a permanent thing. No, they're also sometimes temporary or situational. You might struggle to see something properly if in a dark area or with a dim device display. That's a situational disability, since you're left less abled by the situation you're in. Meanwhile, if you break an arm and need to use other means to interact with your PC, that's a temporary disability, since it'll get better over time, but is an important issue right now. Add this to how accessible design helps those without disabilities too, and it becomes an obvious priority. You're not just coldly looking at some stat like (1% of users have a screen reader), you're realising your work can help everyone. Helping everyone use your site is important enough, but even from a sociopathic money only standpoint, it's a big deal too. Hope you found this useful, and come back next time for more thoughts and articles! #webdevelopment #accessibility #softwareengineering

Two different kinds of “focusable” UI elements · https://lnkd.in/dFTje7xy #accessibility #html #WebDev