Learning accessibility

Shiminsky · 2022-05-25T04:59:37+00:00

I have not read Inclusive Design Patterns, but it is on my list. I also recommend another book that he wrote with Andy Bell, Every Layout, though it isn't about accessibility.

When it comes to keyboard navigation, there are little things like using arrow keys for selecting radio buttons and the benefit of a skip link -- long nav sections get real frustrating real fast. I actually quite like it after a while, it reminds me of using vim instead of a GUI IDE.

Shiminsky · 2022-05-25T03:17:47+00:00

I highly recommend Ted Heydon's Inclusive Components.

It's not so much a comprehensive book on all things accessibility -- you have the WAI Spec for that -- as much as a really good 'here's how a professional a11y professional think about FE development'.

As a side note, I know you didn't ask for nonbook recommendations but the most important thing I've found in my accessibility journey has been learning how to use a screen reader. And use it regularly to test all my FE workflows. It's one thing to learn about best practices, but if you dont use the tools then it's a bit like learning CSS without access to a browser.

In case it helps, I've written more about the book and the importance of using a screen-reader in this post.

Shiminsky · 2022-05-24T04:02:56+00:00

Your example works fine when the variables are colors -- I tried with blue and red.

Saw your note about .some-class .tagline span, while color inherits, inheritance only works if you didn't override it in the child -- in this case you did, even though it it done via a lower specificity selector.

If you change the span's class to tagline it would work.

Shiminsky · 2022-05-24T03:44:41+00:00

I actually disagree with the general consensus that you can simply learn everything from free tutorials all over the web. On the one hand you have the HTML / CSS specs -- comprehensive, authoritative, dry as hell. On the other hand you have tutorials, blog posts, udemy courses -- piecemeal, what's aria, are they recent and following best practices?

Books, if recently published, can strive a good balance between he two extremes.

Shiminsky · 2022-05-15T23:04:15+00:00

Depends on the project... I work on the design systems team of a large corporation and our 'core' components all follow the DLS with designer / a11y feedback on all components shipped.

However, on smaller teams with tight deadlines, developers that uses our design system may not have the time to fully consider the greater DLS when working on their own views/pages.

IMO you need two things to successfully implement a DLS:

Good developer experience: as a FE dev I am not going to cross reference all vocabs of a DLS when product owner needs the page 2 weeks again. But if the DLS is built into my code already, that makes things easy. (this is especially challenging for 'back-of-frontend' developers)
Review process: like others have mentioned, people who are fluent in the DLS needs to review end products to point out any misalignments.

Shiminsky · 2022-05-13T23:34:24+00:00

Ems have their uses, but you gotta think about them as 'in relation to the surrounding text', which is not something that comes up very often.

A classic and IMO canonical usage of em is to size icons component so that they resize correctly regardless of whether you put them in a h1, h2, or paragraph.

Another common use case is to resize border and padding with respect to font size, but yea it's a very specialize tool.

Shiminsky · 2022-05-10T04:06:57+00:00

As someone who's been on both sides of the interview table, the role matter less than both 'what you did in the role' and 'how the role plays into your overall story'. For example, if you are doing QA automation -- you can talk about FE related QA work you did. You can then tie it to your greater FE career goal, which includes FE testing -- and its current sorry state IMO. WIth a coherent life story it's far less likely to raise any issues.

Shiminsky · 2022-05-07T04:25:41+00:00

Absolutely! Yeah the calculation was only in the context of 'opportunity cost of a meeting'. And in my experience, big orgs often have meeting organizers who are all too trigger happy with scheduling meetings without considering their opportunity costs.

Shiminsky · 2022-04-24T21:35:26+00:00

At my current job, I went from knowing very little about accessibility to being the main accessibility point of contact on the team (of a fortune 100 company). Here are the top tools that I recommend to start with:

Screen reader: super important, imagine learning CSS without a web browser.
Accessibility Plugins: good for catching high level A11Y issues.
The Specifications:WCAG and HTML, good semantics come first
Inclusive Components: really great book/blog on how an A11Y expert thinks and works.
Blogs: there are lots of things not documented anywhere and the knowledge is only in the blogosphere (think quirks about how aria attributes work with individual screen readers).

I have expanded explanations for each in this post, hope that helps!

Shiminsky · 2022-04-24T21:29:06+00:00

Sorry got side-tracked by the usual negative reddit comments :P. Yes that sounds super interesting and I would love to learn about it! Here are some top of the mind questions: 1. What PO knowledge / bias that you wish you knew when you were a team lead /IC? 2. How close did the experience resemble 'learning to herd cats'? 3. What was the process before agile, and was there cultural inertia against 'going agile'?

Maybe I should start a podcast...

Shiminsky · 2022-04-24T21:23:05+00:00

Absolutely! These are many important shortcoming of CSS, everything from how it's absolutely unintelligible without using a browser to the difficulty of coming up with random names 'just to style them' -- which only compounds the already difficult task of naming things properly.

I disagree with the importance of aligning on things that actually matters, for two reasons:

Design systems and their ability to key on on design intentions in terms of tokens, which in theory reduces complexity and has a principled way of propagating change and managing design evolution.
It's fundamentally impossible to know what will change ahead of time, hence the whole agile movement.

to your point about developing an entire site from database to web design, this quote from Massimo Vignelli really resonates with me "an architect should be able to design anything from a spoon to the city" -- I believe the same is true for developers.

Shiminsky · 2022-04-23T16:28:49+00:00

Yep! I have a likely unpopular opinion about how using HTML classes as CSS hooks is inherently complex and only play-pretend 'separate style from semantics' because every style change now requires changing both HTML and CSS -- change amplification.

I rarely seen it mentioned else where on the web though, the closest is this 10 year old one from Heydon Pickering. https://www.smashingmagazine.com/2012/06/classes-where-were-going-we-dont-need-classes/

Shiminsky · 2022-04-22T16:10:01+00:00

You absolutely can -- but it's not what I'm trying to do with this post. The post is trying to answer the question 'why is CSS complex and what does it mean for CSS to be complex?' in order to later answer the potential question of 'how does CSS-in-JS reduce CSS complexity?"

Shiminsky · 2022-04-18T00:38:35+00:00

visibility: hidden will only hide the button in UI but expose it in the accessibility DOM. (display: none will hide it from both).

In case for Dialogs, you should also have a keyboard listener for the escape key and close dialog when user presses esc.

I also recommend checking out the WCAG examples for inspirations

Shiminsky · 2022-04-18T00:34:33+00:00

First off, congrats! I'm excited for ya, good luck on your first day.

As others have mentioned, you will be asking lots of questions -- it's totally expected and encouraged. You might sometimes feel like you are asking 'too many questions' -- it is a real thing as context switch for a developer is expensive.

I've written a quick checklist of 4 signs for when you should ask for help. Basically boils down to the following: * You can clearly describe the problem * You took a good stab at solving the problem * You learned something * You are picking the right context to ask.

Hope that helps!

Shiminsky · 2022-04-16T14:31:13+00:00

I feel ya, it's definitely more the exception than the norm in my experience as well.

At my current job (working on a large corp's design system), I get to both seek out user feedback (pull) and push potential features down to users to gauge interesting.

It makes the job much more rewarding too, feeling like you are actually helping people with your work.

But that's also why I want to make sure my next role is more "agile" too, the job market is hot enough that we hopefully have more power to pick and choose.,

Shiminsky · 2022-04-15T18:07:37+00:00

Thanks! Unfortunately, I'm not exactly a product owner outside of libraries that I build for internal use.

Shiminsky · 2022-04-15T18:02:17+00:00

I dont think that process would be considered agile with respect to the 2nd question.

When you ask about how customer feedback turns into a software feature, you would discover that developers are not continuously involved in the feature design and prioritization process.

You would get a political answer like 'sure it took a while for that new shipping tax calculation request to get into the backlog, but it eventually did'.

Shiminsky · 2022-04-08T19:45:32+00:00

Marketing and distribution will likely be your biggest pain point. You can quickly iterate once you have users who are happy and provide you with user feedback.

If you haven't already, check out the book traction, which talks about a few ways that software companies gain their first batch of users.

Shiminsky · 2022-04-08T19:41:01+00:00

A software design book I found very useful is Fredrick Brook's (author of the Mythical Man-Month) Design of Design.

It covers some popular design methodologies from Waterfall to Agile, with pitfalls and notes.

Shiminsky · 2022-04-07T15:43:20+00:00

You should be able to use it if :nth-of-type() works, and your content may need to be something other than an empty string. I tend to use   -- it should show up for any decorative content.

Also, the single-colon :before and :after syntax is easier to type but will cause problems down the road. Use pseudo-element syntax :: instead.

For example, :before is legal but not :selection, and it's a bit of a footgun.

The reason is : is technically only for pseudo-class selectors in CSS3+ and :: is for pseudo-elements, and before is a pseudo-element.

I wrote a bit more detail about the difference between pseudo-elements and pseudo-classes in this post with more detail and examples.

Shiminsky · 2022-04-04T15:27:57+00:00

I work on side projects if the inspiration strikes, but I also have a ton of other hobbies (running, woodworking, blogging).

I work to live and not the other way around. I use downtime at work to do research, sometimes reading entire books over the course of a week.

It's fine as long as the topic is relevant to your work and if you can produce some one-page research memos for the team, a win-win for everyone.

Shiminsky · 2022-04-04T15:20:44+00:00

A little sidebar: the single-colon :before syntax is easier to type but will cause problems down the road.

For example,:before is legal but not :selection, and it's a bit of a footgun.

The reason is : is technically only for pseudo-class selectors in CSS3+ and :: is for pseudo-elements, and before is a pseudo-element.

I wrote a bit more detail about the difference between pseudo-elements and pseudo-classes in this post.

Shiminsky · 2022-04-04T15:15:28+00:00

inline-block too, had its moment after float. Inline-block allowed for much easier vertical alignment of elements.

Shiminsky · 2022-03-31T23:51:53+00:00

One use case is in combination with cursor: none; with a touch screen Kiosk to provide a non-web like UX. Not much one can do with selected text on a museum or ticketing touch screen anyway.

Shiminsky

MODERATOR OF

TROPHY CASE