Enough with the role-play—let’s get back to the basics
Having read Steve Faulkner’s post a short while ago about the often-questionable use of roles in HTML when a more suitable native HTML element would be far better, I was prompted to come up with...
View ArticleWhose nine is it anyway? (Feedback on the WCAG 2.2 working draft)
.site-main p a {display:inline;} On 31st May 2021, nine new WCAG success criteria and supporting documents were put out for wide review resulting in a wide range of comments and issues being raised on...
View ArticleTwo years of W3C participation
.site-main p a ,.site-main li a {display:inline;} img.fr {display:block;margin:0 auto;max-height:50vh;width:auto;} @media screen and (min-width:20em) { img.fr...
View ArticleHow you as a site author can help comprehension
.site-main img.portrait {max-width:400px;min-height: 80vh;} .site-main p a ,.site-main li a {display:inline;} .visually-hidden {clip-path: inset(100%);clip: rect(1px, 1px, 1px, 1px);height:...
View ArticleFive ways to include d/Deaf users in your designs
More than one in twenty people—an estimated 430 million people—experience disabling hearing loss according to the World Health Organization’s 2021 fact sheet on deafness and hearing loss. Some are...
View ArticleProvide an Inclusive QSR Restaurant Experience: Three Essential Requirements
After years of working with various QSR restaurants types, the Vispero team noticed industry-wide themes regarding the customer experience. Upon further review, we highlighted three essential...
View ArticleLabeling the point: Scenarios of label misuse in WCAG
Whether they’re for jars, clothes, or vinyl records, labels are essential for identifying and describing things. And form controls are no exception. First introduced in HTML 4.0, the <label>...
View ArticleWell Color Us Surprised—This SC Can Be a Tricky Customer
.actions {margin: 1em 0;border-radius:5px;background: lightyellow;padding: 0.5em;border:1px solid black;} .tests .row {display: block;} .tests label {display: block;font-weight: bold;} .tests form...
View ArticleBeyond WCAG: Losing Spoons Online
Have you heard of Christine Miserandino’s spoon theory? Spoon theory is a metaphor in which one’s physical and mental capacity for each day is represented by a fixed number of spoons that gets...
View ArticleThe Ballad of Text Overflow
The CSS text-overflow property can be used to show a visual indication for text that’s been clipped by its container. I’m not a fan, and take every suitable opportunity to discourage people from using...
View ArticleSubheadings, subtitles, alternative titles and taglines in HTML
Until recently there was no dedicated method in HTML to identify content as a subheading, subtitle, alternative title or tagline. Now there is. Previously, a common method for subheadings was to use a...
View ArticleAn argument against CSS opacity
.visually-hidden {clip-path: inset(100%);clip: rect(1px, 1px, 1px, 1px);height: 1px;overflow: hidden;position: absolute;white-space: nowrap;width: 1px;} .callout {font-size:1.2em; color:#555555;...
View Article
More Pages to Explore .....