arghc
arghc
KPCKevin Powell - Community
Created by arghc on 2/8/2024 in #front-end
Titles, tooltips, and accessibility
I'm working on a multilingual page and where other languages happen I add titles where appropriate like
<span lang="zh-Hant" title="flower in Chinese">花</span>
<span lang="zh-Hant" title="flower in Chinese">花</span>
or
<dt title="Hangeul">Korean</dt>
<dt title="Hangeul">Korean</dt>
. I was finding that the tooltips were taking almost 2 seconds to appear so I wanted to have a more instant notification that help was on the way. I considered colouring the text or add some other visual indicator and may still do that, but I found styling the cursor when the text is hovered like so
dt:hover[title]:hover, span[title]:hover, .emoticon:hover { cursor: help; }
dt:hover[title]:hover, span[title]:hover, .emoticon:hover { cursor: help; }
works great for people using mice. What I have no idea, is how accessibility tools work with spans and if I should be adding :focus or :focus-within styles or ???. For that matter, I suppose that touch device users are also being left out. 8-( Is action needed for accessibility?
4 replies
KPCKevin Powell - Community
Created by arghc on 1/10/2024 in #front-end
Intrinsic clamp formulation problems
top-margin of main is zero
1 replies
KPCKevin Powell - Community
Created by arghc on 10/2/2023 in #front-end
Sidebar layout with intrinsic collapsing grid, CSS-only
I'm trying to make an intrinsic and responsive sidebar design. All the no-media query responsive tutorials that I could find (eg. https://css-tricks.com/responsive-layouts-fewer-media-queries/) have the grid columns the same width, but I'd like the first column to be narrower. Of course this can be done with flexbox (https://every-layout.dev/layouts/sidebar/), but only with 2 layout items??? In the collapsed form I'd like:
1. logo/title bar 2. main content 3. navigation 4. footer but in expanded form I'd like 1) -----2------ 3) -----4------ I've achieved something like this by making the inital number of columns be 15 and having the content span 14, but that is very magic number-y and I was hoping for something more intrinsic.
2 replies