#accessibility in web design

[adasitecompliance]

Accessible Web Design

Accessible web design ensures equal access and usability for all users, regardless of their abilities, promoting inclusivity and a seamless online experience!

[weaselsblaugh]

I guess browser Back buttons are officially just a suggestion and not actually intended to help you go back to the previous page anymore. Can't even page back in Tumblr without specifically scrolling down to find their in-page Back button. That's not very accessible and I kind of dislike it. A lot.

[foxpunk]

Hey, you! Yeah, you with the cool neocities!

You're doing great! Really love what you've done with the place so far. Now here's something important moving forward. If you are making a neocities - especially if you are doing so with the motivation to fight back against Web 3.0 and reclaim the web as a space for individual users instead of for companies - please, keep the following in mind:

An inaccessible web is not a free web.

Repeat after me: An inaccessible web is not a free web.

Resources for Beginners to Learn About Web Accessibility and Web Design:

W3C's Introduction to Web Accessibility | W3C is the organization that decides on the standards of Accessibility on the web. They are an invaluable direct resource.

A Beginner's Guide to Understanding Web Accessibility

Mozilla's Accessibility Overview

WebAIM's Introduction to Web Accessibility

What is Web Accesibility in 60 Seconds! [YouTube Video]

Accessibility: What's the difference between WCAG Levels A and AA? [YouTube Video]

FreeCodeCamp | FCC provides an extremely beginner friendly Responsive Web Design course. The lessons for this course integrate accessibility standards naturally, and also have individual lessons specifically for teaching accessibility.

FreeCodeCamp's Accessibility Tag on their News Page

HTML Dog's Tutorial's for HTML, CSS, and Javascript

MarkSheet's Free HTML and CSS Tutorial

W3C's Easy Checks

W3C's QuickRef on How to Meet WCAG | I have filtered the QuickRef link to only show Level A requirements. This is the easiest level to meet and is considered the "bare minimum."

WAVE: Web Accessibility Evaluation Tool

[wrender]

Hey everyone, I did a write up on my website of what I feel are the 7 deadly neocitites sins, when it comes to design and accessibility. I have examples (which made myself ofc, no putting others on blast), and steps and advice on how to fix it. I also have a bunch of smaller, bonus sins!

Check it out here!

[izicodes]

Wix Learn's Free Web Accessibility Certification | Resources ✨

Hiya! 💗 Today, I stumbled upon an absolute gem that I wanted to share with all of you. If you're learning about web design and inclusivity as I am, this is something you might want to look into~!

Introducing the Web Accessibility Course by Wix Learn - a game-changer for anyone striving to create websites that cater to all users, regardless of impairments. This comprehensive course covers everything you need to know to build an inclusive online space that leaves no one behind. AND IT COMES WITH AN EXAM AND CERTIFICATE (all free too hehe).

In this course, you'll gain mastery over essential skills, including:

🌐 Creating Inclusive Sites: Learn the best practices to make your websites accessible to people with various impairments, ensuring equal access for everyone.

📚 Accessible Title Tags and Headings: Dive into the world of proper title tags and heading structures, making navigation a breeze for every visitor.

👁️‍🗨️ Crafting Alt Text and Alternative Media: Discover the art of writing meaningful alt text and incorporating alternative media, providing a seamless experience for those with visual challenges.

⚙️ Optimizing Navigation for Assisted Technology Users: Enhance site navigation for individuals relying on assisted technologies, making their browsing experience smooth and efficient.

💬 The Power of an Accessibility Statement: Learn to create a compelling accessibility statement, showcasing your dedication to inclusivity and informing visitors about your website's accessibility features.

They even have prep courses for the exam! 🤗✨

Here's the link to the course: LINK

Hope this helps someone out there, I will be trying it out and seeing how it goes! 👍🏾

[daughters-gallery]

ART DUMP!!! (some oldies and some newbies)

[theneighborhoodwatch]

actually using css on my wiki for a change. angry about it apparently being this easy the whole time

[lensdeer]

I made a simple tool to randomize faction picks in Root

It's all vanilla Javascript, so if you download its source code you can run it locally with no need for a server or a ridiculous chain of dependencies~

Hope it's useful!

[naradreamt]

My favorite find from that dig last night is just this random ass gif entitled "doll.gif" and its just hide spazzing out. Not sure if a fan did this one or if he had a talent for pixel art.

[earhartsease]

website designers think they're so cool using not-quite-black text in their text and emails etc but then you're fucked if you're using dark mode and your eyes ain't great (dark mode on phones typically knows to turn black text white, but any rgbness outside of black makes its brain sad and then it takes it out on you)

we have emailed them about it, politely - we did try using their web form to submit feedback but it threw up an error, sigh

[ID: screencap with black background, top right corner has the large word "flutes" in red cursive script, below it the text reads:

"Order confirmed.

Hello, (name is blanked out in red)

Thank you for your order. Below is a copy of it, along with some other useful info such as our returns policy."

all of the text is in a very dark grey that's almost unreadable against the black background

ID ends]

[adasitecompliance]

Universal Design

Designing for Inclusivity: Best Practices for Accessible Web Design

The internet has become such an integral part of most people’s lives. It is the go-to resource for recipes, shopping, jobs, homes, travel, or maintaining contact with loved ones. However, did you ever realize that not everyone has equal online experiences? Yes, there are now at least one billion people across the world experiencing some form of inability. And in their case, connectivity and website access are not as easy as they should be.

And it is why creating accessible websites would be a priority for any business with an online presence. It is not only morally right, but increased web accessibility means increased traffic and more business. Besides, an accessibility design will not affect your product’s UX or UI if performed by professionals like us at ADA Site Compliance. We have a team of accessibility experts ready to handle all your website’s compliance needs.

What is an inclusive web design?

Inclusive and accessible web design goes hand in hand. While an all-inclusive design process ensures no group of people’s needs or concerns are overlooked, maintaining accessibility strategies helps keep this in mind. However, what’s most important while designing an inclusive design is remembering that not every user accesses or interacts with the website similarly. An inclusive design helps remove bias and assumptions from your website so that no user feels excluded.

How to create an inclusive web design persona

Web designers often come up with a persona while designing their projects. It helps them understand how the user will engage with the site. Similarly, there is a persona to follow while designing an inclusive web design which is broken down into:

Name

Goals

Motivations

Demographics

Personality

Fears

Frustrations

It also includes the persona:

Ability where you assess how some users will be physically and cognitively restricted on using and engaging with the website.

Aptitude, as some users may not be digitally literate. In this case, deviating from basic layouts and not providing sufficient context will not help.

Attitude as some users may perceive a website to be unsafe because of privacy issues or the risk of encountering malware. You can address these fears through recognized and trusted safety and privacy features.

Some users may not have internet connectivity at home but have alternatives. They can head to the cafe or library, where connectivity, location, hardware, and software can impact access.

Localization as it is unsafe to assume that every user lives in the same country or comes from the same culture, or speaks your language. Address these differences in your inclusive user persona.

16 ways to make your website more accessible and inclusive

The following tips will go a long way in helping ensure your website is more accessible and inclusive:

1. Proper content structure

It does not matter how great your website content is if your prospects cannot read them. And this is very likely to happen because 253 million people worldwide suffer from some form of visual disability. You thus risk missing out on connecting with them. There are various steps to make your content easy to read for users with visual, language, and cognitive disabilities. You can break up the content into smaller sections with headers and subheaders, properly contrast the background and content, and avoid using decorative font.

2. Use the right text size and fonts

A practically microscopic or curly font can be difficult for anyone to decipher. These fonts should be avoided, and only the appropriate ones in an inclusive design process. The right text size and font size enhance your site’s overall aesthetics and make it accessible to a broader audience. It is safe to use a font like Verdana that is clean, easy to read, and of at least 12pt.

3. Proper language and tone of voice

The website’s tone of voice and language is essential for an accessible and inclusive website. Sites with words like ‘wheelchair-bound’ negatively impact people with disabilities. ‘Wheelchair user’ is a better option. Similar websites with complex vocabulary and syntax make it difficult for those with learning disabilities and visual impairments to understand your web content.

4. Proper content mark-up

In addition to proper content structure, you must use the correct HTML markup to denote things like a button on a page. Also, use heading tags like H1, H2, etc., through the content to create a visual hierarchy in the front end and a proper code structure in the backend. It also gives context to HTML elements that screen readers and the visually impaired use while browsing.

5. Keyboard navigation

Keyboard accessibility is sufficient in an inclusive design. The visually impaired and those with visual disabilities or with motor disabilities may depend on keyboards to navigate websites. In this case, they use the tab key to select interactive elements on a webpage.

6. Useable focus states

The blue outline you occasionally see around links or buttons is called the focus state. They help people use keyboards to navigate websites by highlighting the selected page elements.

7. Images with alt text

Incorporating alt text into images makes your site more accessible. Alt text is a short text describing the image which screen readers read, making it easier for the visually impaired to understand the image information. The alt text should provide a clear and relevant image description or be too long. Screen readers find reading overly complicated and repetitive descriptions challenging. Conversely, purely decorative images are marked using an empty <alt> attribute to tell screen readers to skip the image.

8. Form fields with descriptive labels

Your marketing and sales depend on forms, so ensure they are accessible by using descriptive labels in form fields. It is better than using placeholder text as labels, as they typically disappear once you start filling out the form. This is difficult for the visually impaired to read and to remember what the field was for. You can also ensure users know what to do while filling out forms by using small helper text above the form field.

9. Simple copywriting

Keeping your copy and content clear, plain, and simple without unnecessary jargon helps you reach a larger audience. If you use acronyms or anything technical, provide a glossary of terms or a plain English alternative. It also helps to use the expanded version of the acronym for the first use and use more lists.

10. Proper color contrast

Many tend to overlook a website’s color contrast. While most are not affected by text blocks on differently colored backgrounds, reading the text can be a nightmare for those with vision impairments. The World Wide Web Consortium (W3C) stipulates that the typical color contrast ratio between text and background be at least 4.5:1. This ensures even those with limited color vision easily read the text. Also, ensure the colors of buttons, links, and other interactive elements stand out from the rest of the content.

11. Know your target audience

Conduct thorough research about your target audience for a deeper understanding of your audience and to design a more inclusive design. You can use your CRM and audience surveys and study website behavior trends to learn more about your target audience.

12. Proper representation

Audience research helps you understand your customers’ backgrounds, perspectives, and identities. You can accordingly present your digital content in the best way possible using the following:

Photos and videos

Testimonials

Blog posts

Your target audience tends to learn more about you once they see themselves represented in your web content.

13. Adhere to accessibility guidelines

Unfortunately, more than 97% of home pages of top websites have accessibility issues. But the good news is that you can rectify the problem by following the Web Content Accessibility Guidelines. You end up with a more accessible and inclusive website that resonates best with your target audience.

14. Avoid using color to display vital info

Never use color as the only visual cue to relay important information to website users. Visually impaired users or those color blind may find differentiating colors challenging. Using elements like labels and patterns with colors helps make the data easier to differentiate.

15. Avoid flashing animation

Avoid using flashing animations on your website as there is a risk of the flashing lights triggering the serious condition of epilepsy.

16. Useful tools and resources for accessible and inclusive designs

In addition to the tips mentioned above, many tools with complex ideas and resources will help you build an accessible and inclusive design. The most important is W3C, accessibility standards, and guidelines followed with tools like WebAccessibilty and WebAIM Color Contrast Checker.

6 Principles of Inclusive Web Design

The following principles will help ensure you end up with a universal design and an inclusive web design:

Flexibility

This means being ready to add extra features to the US if you feel it will help bridge the gap between different users’ experiences.

2. Be simple

A simple web design creates a visually pleasing interface while paving the way for a more intuitive design. This is best achieved by treating the website like a minimum viable product with minimal features and adding extra features only where and if needed.

3. Perception

Always consider how visitors prefer engaging with websites while designing yours. All web content would be a healthy mix of texts and images as some visitors prefer text more while some images.

4. Equity

Web design equity refers to equitable outcomes, meaning every visitor should complete tasks. Knowing your user’s input first-hand helps create friction-free user interaction and a user journey everyone prefers.

5. Prevention

Creating websites with inclusive designs helps prevent human errors by providing tolerating and helpful responses to errors. This helps reduce the frustration of making errors with visitors and builds trust. This means designing large buttons that are easily seen and clicked and displaying error messages in contact forms so everyone can see them.

6. Accommodation

With web ties deemed as ‘places of public accommodation’, They are now subject to more accessibility requirements and lawsuits. An inclusively designed website ensures everyone can read, navigate and engage with the website and guarantees some comfort like ample space or predictable layouts to visitors.

Conclusion

In short, an inclusive web design includes various disciplines like UX and accessible and responsive designs. The only difference is that inclusive designs ensure a top-end, universally accessible user experience, and a well-received website. However, it is not easy to create websites with an inclusive design. You must correctly and thoroughly understand people’s challenges while engaging with websites.

All it takes are simple changes like the proper use of language and tone of voice while incorporating alt text into images and the proper selection of fonts. This way, visitors with and without disabilities have a positive experience. Website accessibility helps boost your SEO efforts while helping you create an inclusive space for all visitors who need only a few minutes to think.

These benefits are related to creating accessible products and having enough money to survive and not invest. Most web designers and marketers have the power and responsibility to ensure everyone sees what they create. So to ensure nothing of the sort happens, we have a team of professional web designers and developers at ADA Site Compliance to audit and rectify your website so everyone can easily access it!

[noctomania]

Help Protect the Internet Archive!

“If our patrons around the globe think this latest situation is upsetting, then they should be very worried about what the publishing and recording industries have in mind,” added Kahle. “I think they are trying to destroy this library entirely and hobble all libraries everywhere. But just as we’re resisting the DDoS attack, we appreciate all the support in pushing back on this unjust litigation against our library and others.”

I just donated to Archive.org because they have spent the past two decades building this Digital Library that has collected over 100 PETRAbytes (1 petra = 1000 tera) of content from all over time and the world.

All kinds of media, even game emulators.

Books you can rent.

Full feature films.

Historical documents.

Webpages - The Wayback Machine, archiving over 860mill webpages across time, is part of the library.

The have a slew of projects designed to help allow libraries and everyday individuals contribute to this library as well as help give everyone access like Offline Archive , Bookserver - even in unique ways like with the Bookmobile!

They are also under attack though, which is what encouraged me to contribute today. Libraries across the US, and lets be real - access to education in many areas of the world - is under attack. I do suspect not just DDoS, not just businesses, but even governments seeking to oppress people will try to suppress this archive and the knowledge is holds.

While you can donate there are other ways to help:

Volunteering is an option, if that fits your bill. If you have collections that should be digitized, they have Scanning Services that would help people contribute non-digitized media to the archive. Also the aptly named Open Library is a great place to contribute either with books or if you are a programmer you can build on top of the data as well. There are also some jobs available! (i can't be sure without their info, but they may qualify as a PSLF employer since they are non-profit)

Archive.org is my new favorite place of all time. Both because of the content but also because of the mission at the heart of it all:

The Internet Archive, a 501(c)(3) non-profit, is building a digital library of Internet sites and other cultural artifacts in digital form. Like a paper library, we provide free access to researchers, historians, scholars, people with print disabilities, and the general public. Our mission is to provide Universal Access to All Knowledge.

[faggypuppywhore]

Hey how does one add an image description to an image in HTML

[scaralol]

quick accessibility tip for neocities webmasters

this is something i learned while researching accessible web design and i just wanted to share for people on neocities who aren't aware. this applies to all web design tbh but yeah...

[Image ID: A snippet of code that reads:

<img src="mizuki-icon.png" class="icon" alt=" "> <h2>akiyama mizuki</h2> <p>Lorem ipsum dolor sit amet, consectetur adipis [...] aliquip ex ea commodo consequat. Duis auta irure [...] officia desenrunt mollit anim id est laborum.</p> /End ID]

see how in my code i put alt=" " for this image's alt text? this is called a null alt attribute. it indicates to screen readers that an image can be ignored. you reserve this for decorative images (a popular example being dividers), aka images that are non-essential to understanding the content and purpose of a page.

[Image ID: A container with an icon of Akiyama Mizuki from Project Sekai floating to the left of text. The header of the passage is "Akiyama Mizuki", and the body paragraph is "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ...", an excerpt that is frequently used as dummy text. /End ID]

you can see here that the icon is purely for aesthetic purposes. there's a header that indicates the name of the character i'm going to be talking about so i'm just using the icon to make the container look nice by breaking up the monotony of the text. because of that, i gave it a null alt attribute.

here's another example from my site:

[Image ID: A large graphic of the Vocaloid character Kagamine Len positioned in the background of a webpage. The webpage's header ("scaraa.neocities.org") is above it, and a music player tab that reads "Kagamine Radio" is below it. A container floats to the right. All of these elements cover parts of the graphic. /End ID]

this large image of kagamine len that i put in the background also has a null alt attribute. it's purely decorative, so there's no need to give it informative alt text. screen readers can skip it and no context is lost.

(lmk if my alt text that i used in this post needs improving! i'm kinda new to writing it.)

[wrender]

hey everyone, I'm planning on doing a write up for my website about neocities accessibility sins (things like cursors not having pointer states), lmk if any of you have seen something that makes a website hard to understand or navigate

[spice-ghouls]

Cannot help but roll my eyes when I read posts bemoaning how boring the colors on the web have gotten v.s. the early web when things were regularly all bright and neon.