search

selfthinker / CSS1K

A demonstration of what can be accomplished with only 1 K of CSS.
http://css1k.net
22 stars 9 forks source link

Fix accessibility issues (including on mobile) #7

Open selfthinker opened 8 years ago

selfthinker commented 8 years ago

Lots of designs have accessibility issues. Although accessibility is not the most important in such a contest and some designs will be impossible to make accessible, I would prefer to fix at least all the easy issues.

Lots of designs hide certain sections (navigation and others) and then show them on :hover. That makes those sections inaccessible to touchscreens (i.e. most mobile devices) and keyboard users. I just added a tabindex to the HTML of 4 elements (3973272c96815550fe06a03c7df3e8dea852c353) so that those designs can be fixed by using :focus instead. That will make them mostly accessible for touchscreens and partly accessible for keyboard users (e.g. the navigation would show, but couldn't be visibly navigated via a keyboard).

And many designs don't work on smaller screen sizes, i.e. they are not mobile-friendly.

In 2016 CSS1K should really mostly provide responsive and accessible designs. I'm not sure it can be taken seriously if it doesn't work on a phone. I plan to make that a new rule (with exceptions) and will try to fix existing designs, potentially also contacting original authors.

selfthinker commented 8 years ago

Meh, just realised that my touchscreen fix I pushed just now doesn't work in iOS. :( It works in all other mobile devices I tested in (Android various browsers and Windows Phone IE). It seems Safari has an issue with tabindex in general, so it might not even work on a desktop Safari. (I will test that tomorrow.)

selfthinker commented 8 years ago

After testing on a Mac, it first didn't seem too bad as all of Chrome, Firefox and Safari were reacting accordingly to focussing on tabindex areas. But both Chrome and Firefox wouldn't make it possible to click on any links inside that area. :( I guess that is because the focus is removed before the click registers.

I will revert those tabindex/focus changes for now and will think about how else to fix it.