Accessibility

This page under construction! jump to Visitors jump to Developers

What is our responsibility to others on the personal web?

Why is your site online?

Do you keep a website as a hobby? Why did you choose to put it online, instead of keeping it locally on your computer? Why are you participating in the Web?

As hobby developers on the Personal Web, we aren't here to make a profit. We don't have to answer to customers. We may be partially keeping a website for ourselves, like a journal, educational sandbox, or an inspirational bulletin board. But we are also at least partially keeping a website for other people to read it. The Internet would not exist without visitors.

Humans are social creatures and it is natural for us to support each other even when it's hard, and put effort into communicating with each other. This is why we desire to put our websites onto other people's computers. We feel responsible for curating a space others might be able to experience. We feel embarrassed when our website is broken or unusable, and we try to fix it.

There are a lot of visitors who experience our websites as broken and unusable when our websites are not designed to be accessible. That's really embarrassing for us, and it's really lonely for them. I am assuming you would want to fix it so that you get to share with them all the cool things you've worked so hard to make. Let's learn how to make sure all our visitors can access our corners of the web properly.

Accessibility And The "Old" Web Versus The "New" Web

Is the Old Web Revival For Everyone, Or Is It For The Aesthetic?

raw html and brutalist web aesthetic: the easiest ways to keep things accessible. But are our websites just vessels for content? NeoCities is understood to be hyper-customizable places of self-expression of design, not just written content and images. Does looking backwards to the aesthetic of the old web, like so many want to do, mean walking backwards into the inaccessibility of the old web, with its table layouts and unreadable contrast? Would being accessible make our websites "cookie-cutter"?

What can we learn from the old web?

Design for accessibility like it's 1999

HMTL5

I started programming in 2005, three years before 2008, when HTML5 first had a public demo available. W3C finally deemed HTML5 sufficiently stable and broadly supported to recommend it for general use in 2014.

The adoption of HTML5 was really important because it allowed us to put things like videos or games on our pages without having to use proprietary plugins like QuickTime or Flash. It really shook things up, but it also made the Web more free and powerful.

However there was another change that came along with HTML5 that was more behind-the-scenes (at least for those of us who surf the Web without assistive technology). HTML5 introduced a variety of semantic tags, which completely change the way we write accessible websites.

Want to work into this WCAG2.0 (also from 2008) and talk a bit about WCAG1.0 (released in 1999).

WCAG 1.0

Accessible design is not new. I am enjoying browsing A List Apart's accessibility section, which has articles going all the way back to 2000. One of the writers led WCAG Samurai, an unofficial errata for WCAG1.0 that was intended to update and improve it. It was an alternative to WCAG2.0, which they thought was too vague and unrealistic to implement. It is an interesting piece of history, and I am curious as to what we can learn from it, as it comes from a time where there was more old-fashioned websites, but I have not sat with it long enough to have an opinion on it versus WCAG2.0.

Oh wow, this person also wrote a book on accessible web design in 2002. The technical information is outdated (so used copies are very cheap), even for our old-fashioned websites of the modern era, but the historical context it provides is invaluable. Building Accessible Websites by Joe Clark is fully available online. I have not read it yet.

The Mullet Design Philosophy: We Can Have Both.

In this book, I refuse to advocate the unnecessary compromise of visual sophistication for accessibility. But I will not advocate the compromise of accessibility for visual sophistication, either. If you have to noticeably alter your layout to make it accessible, that’s what I’ll tell you to do. But if, as is nearly always the case, it is possible to provide accessibility with no visible alteration whatsover, I will tell you exactly how to do it. It simply is not the case that appearance is more important than accessibility. Nor is it less important. Neither is it a question of “balancing” the two, as if they were incompatible. Zero-sum arithmetic is irrelevant here.Yes, you can design a site with a higher or a lower calibre of graphic design, and the entire edifice of Web accessibility as we know it is built around incremental compliance levels.You have lots of leeway. But despite what you have heard, appearance need not come at the wholesale expense of access, or vice-versa.

From that book. Business in the front (HTML), party in the back (CSS), keep a hairtie on your wrist (Media Queries). We can do this with the power of modern CSS. CSS has not always been so powerful.

Accessibility needs your creativity!

Alt text is an essential part of web accessibility.
It is often disregarded or understood through the lens of compliance, as an unwelcome burden to be met with minimum effort.
How can we instead approach alt text thoughtfully and creatively?

(From the Alt Text As Poetry project.) Invisible animations

For Visitors

Features Of My Site

Improvements I Have Planned

How To Request Improvements

For Developers

Why Do We Do It?

When Do We Do It?

Semantic HTML Layout Generator

Why is it important to have a layout generator with accessible defaults? Sadgrl's layout generator just got a huge update, and is a lot better out of the box now for accessibility! That's huge for our community! I will be comparing it to the old one in theLayout Lab and discussing any further points of improvement.

Why Is It Hard?

Educational resources don't use accessible best practicies. And WCAG 2.0 may be more confusing than it could be, as in this paper I haven't read yet, Communication Challenges in the W3C’s Web Content Accessibility Guidelines by Catherine M. Brys and Wim Vanderbauwhede, about technical communication breaking down their proplems with the WCAG 2.0 draft in 2004. I do not know how many of their concerns were adressed in later versions, I guess I'll find out when I read it.

People today are still talking about how accessible web dev is to learn. It's not just you. We just don't have good enough resources at our disposal.

WAVE Is Not Enough

Building an intentionally horrible website and running it through accessibility checkers, it missed a lot.

Could NeoCities Help?

Since there's a learn tab right there, maybe they could link directly to some beginner-friendly accessible development resources? It is much easier to start out accessible than to retrofit, after all! Even if not everybody reads them right away, it plants the seeds for those willing to water them.

How Is The Web Accessed?

Screen Readers

Screen Reader User Survey Landmarks, labels, alt text and links

Keyboard Navigation

Reasonable tab order, easy to jump around, buttons are real buttons, css uses both :hover and :focus, use lists (how to make lists look good?)

Mouse Navigation

(including eye gaze) Small buttons, make sure scroll wheel works, change color on hover

Vision

Zooming in a lot, contrast, eye strain, motion / blinking sensitivity.

Brains

Reducing cognitive load, breaking up text, what else? lists?

Curb Cuts

Semantic CSS Is Easier

Responsive Design

CSS For Print

Zine-in-a-can on itch Saves paper for people who need to print stuff out (screens can cause migraines, for example, and eases some forms of visual processing trouble) Linking back

Resources For Accessible Web Development

HTMHell, especially:
- gifs and reduced motion
- landmarks
Mozilla Web Docs Accessibility Lessons, especially:
- HTML: A good basis for accessibility
The Nu HTML Checker will generate an outline of your page's current organizational structure.
The Contrast Checker allows you to pick colors for text and background and get a preview at 12pt and 18pt. It gives a live report of which accessibility standards the combination satisfies. I try to meet all of them, but I like the fact that you can choose if that's right for you. Hovering over each of the standards will give you a quick explanation about what they mean.

Seirdy's Website Best Practices (focused on text-focused websites, but some of it is relevant for all of us.
Exclusive Design
Learn how to turn your art's alt text into something as expressive as your art. (free / pay what you want workbook)
Access Guide, which tries to be more approachable. Really cute pictures. Filter by bare minimum requirements to get started.
A11y Project Checklist approachable, itemized summary of WCAG2 requirements.

Accessible NeoCities / Personal Web Spotlight and Directory

is a great example of a website with a strong aesthetic style that doesn't sacrifice accessibility. There are fancy column and golden frame images surrounding the text, and beautifully atmospheric background images behind the text. However these can be turned off with Javascript buttons in a settings sidebar. If the visitor has Javascript disabled, there are no background images. That way, nobody is stuck with them without being able to turn them off. The color scheme of the text and background can be controlled from this menu as well, with options that allow you to choose from light versus dark, and high contrast versus low contrast. Some people absolutely need high contrast in order to access a website, but high contrast can give other people eye strain. I love being able to have the choice! E-Wizard also makes CSS themes to hack mainstream websites into looking and behaving better on Userstyles.World, which sounds like a powerful tool for reclaiming an accessible and customized web browsing experience.

Do you belong in this directory? You might if you:

check your site on an accessibility scanner like WAVE and prioritize addressing errors and warnings,
use landmarks and section headings (like <h1> or <h2>) to organize your pages appropriately,
avoid using flashing animations,
and are open to feedback for accessibility improvements.

You do not have to be perfect, you have to be pretty good and motivated to keep learning. It is wonderful if you also talk about accessibility on your page or use innovative techniques, but it is not required whatsoever.

I would like to curate a directory of normal NeoCities websites (or other personally-managed websites) of a variety of subject matters that someone could browse without having to worry as much if they'll be able to access the content. Please comment on my NeoCities page if you'd like to be listed!