#accessible HTML CSS

[g8d]

distributing digital books as pdf files (only) is an abuse of the medium

[mousiecat]

Coding Study Plan!

I've enjoyed learning coding at a casual pace, but I'm ready to really buckle in and focus on moving forward to build my skills. SO, here is my plan:

Routine

Learn/practice coding at least 45 minutes per week day, alternating between FreeCodeCamp, web accessibility lessons, and personal projects. I aim to post about my progress at least once per week.

I plan to solidify my HTML/CSS, move onto JavaScript soon, and then decide where to go after that :)

Details and resources under the jump!

Coding Lessons

FreeCodeCamp: Great, project-based way to learn coding!

I'm almost done with the Responsive Web Design course, which covers HTML/CSS. I have enjoyed this way more than other tutorial methods I have tried before. Instead of providing a lesson with a separate activity afterwards, the project is the lesson, and you immediately use the coding and see the direct results. Learning by doing!

I'm excited to start on the JavaScript course soon!

Web Accessibility

Here are some free resources I'll use to study web accessibility:

Wix's Web Accessibility Course (thanks to @xiacodes for posting about this!)

Altogether, the videos for the lesson total about 1hr 15 mins.

This will prepare me to take the Accessibility Specialist Certification Exam which provides a fun certificate for passing~

Accessibility Resource List from @accessibleaesthetics

Includes accessibility info that is relevant for everyone, as well as more specific knowledge for programmers, bloggers, writers, artists, and roleplayers.

I'm always learning from @accessibleaesthetics's posts! please give them a follow to learn accessibility during your casual Tumblring :)

Web Accessibility Twitch Stream with Africa Kenyah, hosted by @kitkatcodes

1hr 30 mins, can't wait to watch!

Africa Kenyah is a software engineer, accessibility specialist, and yoga teacher. Visit her website here!

[fyeahnix]

as a web dev I actually get irrationally angry when people recommend w3schools as learning material

[werewolf-kat]

My Neocities site has a layout now! There's still more to do, but I want to try working on actual pages next. All that exists is the home page at the moment.

Also, all of the site will come with a "Plain HTML" alternative to it.

I plan on creating my HTML and CSS guides with full accessibility practices taught from the get-go. Doing bare bones text formatting? I want others to learn right away that there are best practices for that too when it comes to screen readers. Making sure things are in the right reading order before you do any styling on 'em.

Keep an eye out for this if you're interested! I've been wanting to make web design guides for years now - and I'm confident at this stage to go for it. Especially since uh, I've shared a lot of my web dev thoughts/advice/resources here on Tumblr already... But it can get buried or awkward to find that on my varied blog. I'm eager to have this stuff all in one place... And it'll be more flexible to work with since it won't be inside a Tumblr post.

URL: https://wolfkat-webdev.neocities.org/

[bkthemes]

What Influences Custom Website Development Project

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.4″ _module_preset=”default”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.27.4″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.4″ _module_preset=”default”…

[werewolf-kat]

Solutions for web designers out there

( All animations and movement on a page should be considered for photo-sensitivity including motion sickness and vertigo. )

For animated .GIF image files:

Create a .JPG or .PNG still image version of the animations from their most important or appealing frame. That should be loaded into the HTML first instead of the .GIF.

And before we go into the optimal JavaScript interaction, let’s stick with the HTML a little more...

If you have images that are not already hyperlinked, you can instead make them link to their animated GIF version to open in a new tab (target=“_blank”). Be sure to have appropriate warnings about those links leading to the animated version of that image, right before/above the image itself for those who may be going through the page in order with some accessibility devices. (Thus, they read the warning before they interact with the link.)

Then, from there, we do the script side for this. You can store the different image file paths into your JavaScript and use mouseover/mouseout events to change the file path inside your src=“” attribute. (Here’s how you can dynamically and efficiently do this for many images and give them their own Event Listener: My JSFiddle Example.)

EDIT: I've updated the example to have a 1-second delay for the images to change into animations in case someone accidentally has their mouse over the image after the page loads in. It'll be best to also make hover/active animations optional, which will tie into the JavaScript needed to achieve the hover/active functions to begin with.

Also added a few more in-code comments for extra instruction and clarity.

Another idea with JavaScript is to have a “toggle” sort of <button> on your page that someone can click/confirm whether or not everything on a page should animate/move or not. If you’re nicely familiar with JavaScript, you can make a more in-depth options menu for this sort of thing too!

This is also a great solution since there are web users who look at webpages either in a simplified view or blocking all scripts (like JavaScript) from your website. They could be viewing your website like this due to personal needs, or technological limitations. And so, having a still image in your HTML by default is MUCH preferred!

For CSS @ keyframe animations:

In the raw CSS file, the default value for the animation-play-state property should be paused. We have to keep simplified view users and script-blocking users in mind for moving objects and images on our webpages. So, whatever is loaded in by default must maintain this priority.

Thankfully, sticking with the CSS, we can just as easily changed the animation-play-state to running when the element is hovered (for mouse users) or active (for touch-screen users).

For sprite sheet animations:

If you’ve figured out how to make sprite animations on a web doc, then you’re already involved in the JavaScript for it and familiar with the code. Or, you're doing it the pure CSS way (see here). In which you can refer back to the @ keyframe section above.

So, here’s a general guideline that you can follow in JavaScript!

The sprite sheet element in your CSS should focus on your most important frame that you want to be seen by users on the default page appearance. Set its background-position to that frame inside the CSS.

For users who can load JavaScript on the page, set that element to toggle its animation by mouseover/mouseout or clicking.

For users who cannot load the JavaScript, the next best thing is to build the sprite animation from CSS keyframe steps().

And for most absolute safe case scenario in case of browser or device compatibility issues with any of these properties in the CSS, you could make an animated .GIF file of your sprite sheet. Make sure it's under 1Mb for users in this category who are also likely to be viewing your page from slow download speeds. With that, refer back to the section for handling image files without JavaScript.

Hopefully this is of great help, if not a starting point for accessibility ideas and considerations for your websites!

pleeeeeeeease indie web and scenecore and whatever other subcultures.... have fun and be cringe but PLEASE be careful with your blinkies. if your website has flashing lights that are on by default or that can't be turned off, then it is inaccessible to photosensitive people. if your post has flashing lights, it needs to be tagged. PLEASE. i love indie web stuff but the prevalence of unavoidable flashing lights makes me really anxious!! people have migraines and seizures! please use tags like "flashing lights" and "eye strain," NOT "epilepsy" or "epilepsy warning," and please consider making your site accessible by removing flashing lights or making them avoidable. PLEASE. make the web usable for photosensitive people.

[scriptingthewhy]

Why Front-End Development is Key to User Experience

AI-generated image. “Yay, another project. And I have front-end development duty. Nice.” Decoding the Digital Canvas: A Front-End Deep Dive from A Maryland Web Dev Lately, it feels like I’m caught in some kind of front-end developer limbo. Every time I start a new project, it’s always the front-end work that comes up first—and then I just get stuck there. Don’t get me wrong, I know how critical…

[cre8tivit]

New Website!

After months of hard work and sharpening my web design skills-- the new and improved version of my portfolio website is now live!

Please stop by and take a look at all the fun projects and responsive code I've added. The website has been tested on a multitude of different screen-sizes and should be perfectly usable on any device larger than a smart-watch.

For those of you in the web-design industry yourselves, feel free to give me some tips about improving my design! 

(And if you happen to know anything about adding proper ARIA accessibility to the code, please reach out. I've been trying to muddle through the documentation without much success, so beginner resources would be much appreciated.)

[basarisamima]

Web Design and Development

Template websites might be quick, but they lack the customization your brand deserves. Our custom web design services ensure your site reflects your unique brand and meets your business goals.

Call to Action: Stand out with a site tailored just for you. Get in touch today!

[mitu444]

Do you need a website?

just CLICK HERE and build your own website by your choice.

https://go.fiverr.com/visit/?bta=1026601&brand=fiverrmarketplace&landingPage=https%253A%252F%252Fwww.fiverr.com%252Fs%252FKe716Q4

[pythonjobsupport]

Design Modern UI in Access with HTML, CSS , JS and VBA with HandleView (Episode 1)

Here’s the link to a little demo app: How to get MVC like framework and a web interface in your MS … source

[tigmatemplate]

AI Writer Services HTML Landing Page Template

Are you ready to revolutionize your AI writing services? Look no further than "Writey" - the ultimate AI Writer Services HTML Landing Page Template that combines stunning design with powerful functionality. Whether you're a content creator, or copywriter, or run an AI writing service, Writey has got you covered.

Buy Now:

[rimon40]

I will fix HTML and CSS accessibility issues in your code

[98edits]

The Secrets of a Skilled WordPress Designer

A WordPress designer is a skilled professional adept at crafting dynamic and visually compelling websites using the WordPress platform. With expertise in both front-end and back-end development, a WordPress design, such as Jane Web Solutions, possesses a deep understanding of the platform's functionalities and customization options. They specialise in creating responsive, user-friendly designs that align with clients' brand identities and objectives. Jane Web Solutions stands out for their proficiency in leveraging WordPress's vast plugin ecosystem, ensuring seamless integration of features for enhanced website functionality. Whether designing corporate websites, blogs, or e-commerce platforms, a WordPress design plays a crucial role in delivering tailored, aesthetically pleasing, and functional websites that cater to the unique needs of clients and provide an engaging online experience for their audiences.

Role and Responsibilities of a WordPress Designer

A WordPress designer is a crucial professional responsible for creating visually appealing and functional websites using the WordPress platform. Their primary role involves translating client requirements into engaging website designs, ensuring a seamless user experience. They collaborate with clients to understand their brand identity and objectives, integrating these elements into the overall design.

Technical Proficiency and Skills

A skilled WordPress possesses a comprehensive understanding of HTML, CSS, and JavaScript, alongside in-depth knowledge of WordPress themes, plugins, and customization options. Proficiency in graphic design tools such as Adobe Photoshop or Illustrator is often essential. This technical expertise enables them to transform creative concepts into fully functional and responsive WordPress websites.

Customization and Theme Development

A designer excels in customization, tailoring websites to meet unique client needs. They adeptly navigate theme development, ensuring that the design aligns with the client's branding while maintaining optimal performance and responsiveness across various devices. The ability to create custom themes or modify existing ones showcases their versatility in adapting to diverse project requirements.

User-Centric Design and Accessibility

An effective WordPress designes prioritises user-centric design, creating interfaces that enhance user experience and accessibility. They consider factors such as intuitive navigation, readability, and mobile responsiveness to ensure that the website engages visitors effectively. Implementing accessibility features is crucial to make the website inclusive and compliant with industry standards.

SEO Integration and Optimization

A proficient designer understands the importance of search engine optimization (SEO) for a website's visibility. They integrate SEO best practices during the design phase, optimising elements like meta tags, headers, and image alt text. This proactive approach contributes to better search engine rankings and increased online visibility for the client's website.

Client Collaboration and Communication

Successful WordPress designer prioritise effective communication and collaboration with clients. They engage in thorough consultations to grasp the client's vision, providing regular updates and seeking feedback throughout the design process. Clear communication ensures that the final product aligns with the client's expectations and goals.

Adaptability and Continuous Learning

The dynamic nature of web design and technology requires designers to stay abreast of the latest trends, updates, and tools. A commitment to continuous learning and adaptability to evolving industry standards sets apart an excellent designer. This ensures that they can leverage new features and technologies to deliver innovative and up-to-date website solutions for their clients.

Conclusion

Engaging a skilled WordPress designer is paramount for a successful online presence. A proficient designer, like XYZ WordPress Designs, brings expertise in leveraging the versatile capabilities of the WordPress platform. With a proven track record of creating visually stunning and functionally robust websites, XYZ WordPress Designs stands out for its commitment to customization, ensuring each website reflects the unique identity and goals of the client. Their proficiency in optimising for responsiveness and user experience underscores their dedication to delivering websites that not only captivate audiences but also function seamlessly across devices. By choosing XYZ WordPress Designs, clients can expect a harmonious blend of aesthetic appeal and technical excellence, resulting in a dynamic and impactful online representation tailored to their specific needs.

[dan--q]

Lightboxes Without JavaScript

An image lightbox overlay with no JavaScript whatsoever? Absolutely. Here’s how I do it.

Read more...

[notesondigitalaccessibility]

What is new in WCAG 2.2

Notes from Deque Webinar 9/7

This will take years for rules and regulations to catch up. 2.2 in final comment period. 2.2 is focused on improving the experience of people with mobility and cognitive disabilities.

Overview:

Added 9 new Success Criteria.

Remove 1 Success Criteria: Parsing

Mobility improvements:

2.4.11 & 2.4.12 Focus not being obscured.

When navigating by keyboard focused element must not be covered by content. Helps people using keyboard navigation. Example a model where someone can tab to items behind it.

AA the item must be partially visible.

AAA the item must be totally visible.

2.5.7 Dragging Movement - AA

Drag and drop cannot be the only way to do something. Provide a simple pointer alternative. Keyboard alt does not meet this. Much have a touch screen/pointer alternative.

2.5.8 Target Size Minimum - AA

Touch area 24x24 CSS px. Minimum Size or control spacing. This applies to desktop and mobile. Draw circles 24 px in diameter and make sure they don't intersect.

You can provide an alternative. That is fine.

Inline exception. Links in text is fine. It's constrained by line height

User agent control. You often can't control browser controlled user elements like drop downs. If you build yourself it applies but if you use browser default it doesn't.

Essential: Maps may have overlapping, legal forms that need to look the same as the paper form.

2.4.13 Focus Appearance - AAA

Focus indicator has sufficient size and contrast from unfocused state.

2 CSS px thick parameter.

Contrast of 3:1 between same pixels in the unfocused state.

Cognitive Improvements

3.2.6 Consistent Help - A

Phone, email, FAQ link, contact info

Always in the same place. Example contact links on the footer.

3.3.7 Redundant Entry - A

Don't require people to enter info more than one. Make it easy for people to enter the info multiple times. They shouldn't have to enter same info more than once in the same session. For example shipping and billing where you can check a box to use shipping address for billing.

Alternate ways to populate info with the same data.

3.3.8 and 3.3.9 Accessible Authentication - AA and AAA

Authentication rules. Must have a way to authenticate that doesn't rely on transcribing codes, recalling something or solving puzzles.

No cognitive function test.

Double AA allows for captcha that requires recognizing items and clicking. AAA does not.

Do not block the ability of password managers and browsers to fill in password. Don't block copy/paste of passwords and username.

Applies to all possible steps including MFA, change password, recover account.

4.1.1 Parsing - A (REMOVED)

Most Parsing issues don't impact accessibility issues. They are hard to fix. Browsers can normally fix.

Issues with duplicate IDs in forms will be covered by the success criteria on accessible labels and names.