basica11y

basic + accessibility

  • they/them

I have been working in accessible web design and software development since 2014 or so. I thought it would be a good idea to maybe share some of what I know here!

Avatar is by Dave Braunschweig and licensed under the Creative Commons Attribution-Share Alike 4.0 International license

posts from @basica11y tagged #wcag

also:

This resource introduces how disabled people use the web, including people with age-related impairments. It helps developers, designers, content creators, and others understand the reasons behind creating accessible digital products β€” including websites, apps, browsers, and other web tools.

I figured this might be worth sharing here. A practical guide from the Web Accessibility Initiative over at the W3C. A bit more friendly than technical standards like WCAG.



wolf-and-ghostling
@wolf-and-ghostling

a mobile web design accessibility thing that i have never seen addressed but impacts my daily life so much:

tons of websites just become unusable when you have your device's text display set to a larger size. text floats all over, button hitboxes overlap, images get pushed out of bounds etc

large text helps so much and i have it set up on both phone and tablet. but for a lot of websites the only way to get them functional is to go into desktop mode, which makes the text even tinier and i have to squint and suffer and zoom in and scroll horizontally every two words

eta: a lot of the time these websites are very important for people to be able to access, like identity document renewal info, healthcare info, nutrition and allergens info. there's ways around it, yes, but it just kind of sucks that it has to hurt or take more time to navigate these things if you have poor eyesight or migraines etc


basica11y
@basica11y

WCAG is the baseline accessibility standard referenced by most legal frameworks. The specific success criteria I'm talking about here (Resize Text) has been around for a long time. It works alongside the Reflow success criteria to improve accessibility for low-vision users.

Web and mobile developers just continue to fail it.



Disclaimer

This is not an excuse to bully or deride requests for communication and progress on accessibility needs. Do not tone police people asking for these things, please.

Dark Mode and Accessibility

"Dark Mode" in specific is not something covered by most accessibility guidelines directly, because there is very much no one-size-fits-all design criteria. In general, you should be making it possible for users to personalize the styling of your website (or software) to fit their needs. As long as you are not blocking users from being able to make those changes, you have done your duty from a legal and international standard perspective re: Dark Mode.

Of note: providing your own dark mode can actually be an issue, because you are now responsible for making it work with all color-related success criteria in addition to whatever the default theme for your site is.



WCAG 2.1: Understanding Success Criterion (SC) 1.1.1 (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...

Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):...

WCAG 2.1: Sufficient Technique G74

G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description

Also consider:

WCAG 2.1: Understanding SC 1.3.1: Info and Relationships (Level A)

The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:

WCAG 2.1: Sufficient Technique G115: Using semantic elements to mark up structure

MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.

MathType full demo, with copyable text that pastes as full MathML

MathJax demo, where you can paste and render both LaTex and MathML to see how your MathML can render using a common online math polyfill


Β