An informal proposal for dedicated elements for spoiler tags in HTML: use-cases, syntax, semantics, recommended UA behavior, and comparisons with “details”
I recently needed to test the support of a dynamic accessible description – a element’s description that is initially one (or no) value, then changes to…
"Most importantly, tooltips should only provide descriptive and non-essential text, giving slightly more detailed text for active elements such as links and form controls. Ultimately, they provide expendable text which is already on the web page."
Great in-depth article about #tooltips by Jan Hellbusch. He knows what he's talking about, had the pleasure to be in one of his workshops and he's an absolute pro. 🤯
I have some other questions in this area. Safari removes list semantics if you remove the bullets (with exceptions, such as if the list is a child of "nav"), due to alleged "list-itis". At what point do lists become inappropriate? If I have a list of blog posts, and I format them as cards, with a heading, publish date, summary, and an image, is that too much content for each <li>?
Also, MDN and WHATWG point out not all links should be contained in navs (such as footer links), and "nav" should instead signal major blocks of navigation links. Would my prior example of a list of blog posts count as a major block? Should I enclose my list of blog posts in a nav? Does that extend to all section, category, and tag pages listing pages in that section/category/tag?
Feel free to respond if you have opinions, but keep it civil, and boosts are appreciated.
A follow-up to my talk at A11yTO I cannot pinpoint the source of this misconception, it could have been a vendor, or long-lost blog post, or one of the many webinars I attended in my early days as a program lead.
Accessible Chips demo — "modified to use the HTML datalist element instead of a custom autosuggest". Nice! kindhearted-meal.glitch.me/ By @mfairchild365 (and inspired by me 😁 ). This demo is actually 4 years old! Browser support (for datalist) is better. #webdev #html #a11y
Ensuring negative numbers are available for everyone. "The minus character (−) yields great support in most screen readers, and suffers less situational gotchas than the hyphen-minus character"
"Making a positive change: PDF to HTML The Government Digital Service (GDS) states “Compared with HTML content, information published in a PDF is harder to find, use and maintain”."
Consider the needs of the people you are publishing the information for. Engage with them early to explore alternative options that may better meet their needs.
The abbreviation appreciation society “the HTML <abbr> element is deceptively familiar and attractive, its been around forever (1999) and thus people assume that it does what it does and does it well. Nothing much changed over the iterations of the abbr element definition over the years. One notable exception is that the acronym element was obsoleted in HTML5 and abbr now is used for both acronyms and abbreviations.”
In other articles we looked at how to build a cross browser video player using the HTMLMediaElement and Window.fullScreen APIs, and also at how to style the player.
I repeatedly see certain bad practices in HTML that ironically contain clues for implementing them properly in their class names or in the way they're built. In this evergreen post, I collect them.
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.
File Uploads for the Web (1): Upload Files with HTML austingil.com/uploading-files-… A nice, succinct tutorial plus follow-up of enhancing with Javascript. #webdev #html
The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
This allows a browser to display an appropriate virtual keyboard.
This presentation was recorded at GOTO Copenhagen 2019. #GOTOcon #GOTOcphhttp://gotocph.comStuart Langridge - Member of the Web Standards Project's DOM Scrip...
tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way.
