Nice to see 17 years of my articles while at TPGi are now collected together:
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
Search
Items tagged with: HTML
Web developers need to read this, and study it really well. "Foundations: HTML semantics" tetralogical.com/blog/2022/10/… #html #webdev #webdevelopment
Foundations: HTML semantics - TetraLogical
Accessibility consultancy with a focus on inclusion. We can help you with knowledge, experience, strategy, assessments, and development.TetraLogical
Yup!!! "Web developers don't know HTML anymore" reidmore.online/post/accessibi… #webdev #webdevelopment #fail #html
Accessibility training will not save you
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.Reidmore
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
With the help of ChatGPT I have added alt text to images in my slide deck "No Industry for Old Men" from #a11yTO 2023
#a11y #webStandards #HTML #ARIA #Depression #aging #ai
New post! Strikethrough Accessibility:
webaxe.org/strikethrough-html-…
#webdev #a11y #html #screenreaders #accessibility
webaxe.org/strikethrough-html-…
#webdev #a11y #html #screenreaders #accessibility
Not picking on anyone, but I just saw someone asking devs not to use "2FA" in user messages, and instead use "two factor authentication."
2FA is 3 syllables. Two factor authentication is 8.
From my #a11y use case, 2FA is an accommodation.
I would argue that there's already an HTML way to solve this problem, and that's the html abbr element with the title attribute.
: The Abbreviation element - HTML: HyperText Markup Language | MDN
The HTML element represents an abbreviation or acronym.developer.mozilla.org
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"
deque.com/blog/ensuring-negati…
Great article written by 2 of my favorite comrades.
"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.
YES !
accessibility.blog.gov.uk/2023…
Making a positive change: PDF to HTML
This is for everyone: documenting how we rebuild inclusive digital services across governmentaccessibility.blog.gov.uk
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.”
tpgi.com/short-note-the-abbrev…
/cc @micmath
Short note: The abbreviation appreciation society - TPGi
The HTML element is an incredibly common, but do you know how you can make it accessible? Find out how in this article.Steve Faulkner (TPGi)
Using HTML landmark roles to improve accessibility developer.mozilla.org/en-US/bl… by Schalk Neethling via MDN #a11y #webdev #html
Using HTML landmark roles to improve accessibility | MDN Blog
Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your website effectively.developer.mozilla.org
Today the <blink> element was officially removed from MDN.
github.com/mdn/content/pull/26…
It was an awful element, but, oh, so many memories.
#HTML
Remove docs for the element by Elchi3 · Pull Request #26904 · mdn/content
For mdn/browser-compat-data#19658GitHub
Adding captions and subtitles to HTML video: developer.mozilla.org/en-US/do… #captions #subtitles #a11y #video #webdev #html
Adding captions and subtitles to HTML video - Developer guides | MDN
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.developer.mozilla.org
Related, my HTMHell article "You Don't Need ARIA For That" htmhell.dev/adventcalendar/202… #aria #webdev #a11y #html
You Don't Need ARIA For That - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
if you're using javascript:void(0) as the value of the href attribute, the element you're actually looking for is <button> matuzo.at/blog/its-very-likely… Great series from @matuzo #webdev #html #a11y
It's very likely that…
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.It's very likely that…
Overlapping interactive areas [are bad in HTML] — please don't nest Anchors and Buttons! tempertemper.net/blog/overlapp… #webdev #webdesign #a11y #html
Overlapping interactive areas
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.tempertemper
Intro to HTML-first Frontend Frameworks sitepen.com/blog/intro-to-html… #webdev #html #FTW
Intro to HTML-first Frontend Frameworks - SitePen
HTML-first front-end frameworks can help you develop modern interactive web applications while keeping page load times low and responsiveness high.SitePen
A Theory of Web Relativity — great article on many uses of the REL attribute htmhell.dev/adventcalendar/202… #html #rel #webdev
A Theory of Web Relativity - HTMHell
A collection of bad practices in HTML, copied from real websites.A Theory of Web Relativity - HTMHell
Modern HTML email (great tips including tables no longer required) fullystacked.net/posts/modern-… #email #html #css #amp
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
File Uploads for the Web (1): Upload Files with HTML
This is the first post in a series all about uploading files to the web. In this post, we cover the steps needed to upload files using only HTML.Austin (Austin Gil)
I find that web developers need to implement inputmode more often (to customize virtual keyboard for phone, email, etc). Hey Safari, why don't you support it?! developer.mozilla.org/en-US/do… #safari #browsers #html #forms #usability
inputmode - HTML: HyperText Markup Language | MDN
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.developer.mozilla.org
You Really Don't Need All that JavaScript, I Promise 👏 youtube.com/watch?v=rxlJRydqmk… GOTO Copenhagen 2019 (includes Chrome Portal demo) #webdev #webperf #javascript #html
You Really Don't Need All that JavaScript, I Promise • Stuart Langridge • GOTO 2019
This presentation was recorded at GOTO Copenhagen 2019. #GOTOcon #GOTOcphhttp://gotocph.comStuart Langridge - Member of the Web Standards Project's DOM Scrip...YouTube
How to use, and not use, the tabindex attribute: a11yproject.com/posts/how-to-u… #webdev #a11y #html
How-to: Use the tabindex attribute - The A11Y Project
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.
#Development #Outlooks
The end of front-end development · Things are going to change, but not in the scary way people are saying ilo.im/11t8v2
_____
#Job #AI #GPT4 #ChatGPT #ChatBot #WebDevelopment #WebDev #Code #Frontend #HTML #CSS #JavaScript #Skills #Productivity
The End of Front-End Development
Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! …Or at least, that's the narrative going viral on Twitter.ilo.im
"Description list support [by screen readers] is generally good (with Safari being the outlier), even if you may not like how it is supported." adrianroselli.com/2022/12/brie… #html #a11y
Brief Note on Description List Support
TL;DR: Description list support is generally good (with Safari being the outlier), even if you may not like how it is supported.Adrian Roselli
I have started contributing PR's to improve the @w3c #HTML Validator/Checker, you should too!
github.com/validator/validator…
Issues · validator/validator
Nu Html Checker – Helps you catch problems in your HTML/CSS/SVG - Issues · validator/validatorGitHub
Learn HTML — two resources:
web.dev/learn/html/ &
developer.mozilla.org/en-US/do…
#html #webdev #tutorial
web.dev/learn/html/ &
developer.mozilla.org/en-US/do…
#html #webdev #tutorial
HTML: A good basis for accessibility - Learn web development | MDN
You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this knowledge, but this article has taken care of the basics.developer.mozilla.org
Glad <dialog> focus is finally being implemented/defined in a reasonable way after a torturous years long, largely pointless, discussion.
“1. Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element.
2. Make the dialog element itself get focus if it has the autofocus="" attribute set.
3. Make the dialog element itself get focus as a fallback instead of focus being reset to the body element.”
#HTML #WebStandards #a11y
github.com/whatwg/html/commit/…
Implement dialog initial focus proposal · whatwg/html@a9f103c
This implements the changes proposed here: https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#dialog-draft-text Specifically: 1. Make the dialog focusing steps look at seq...GitHub
"Overlapping interactive areas" — don't do it! tempertemper.net/blog/overlapp… #webdev #html #tips
Overlapping interactive areas
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.tempertemper
Added a color theme picker to my site recently, using a progressive enhancement strategy.
If you're interested, I wrote an article on how I approached it:
darins.page/articles/progressi…
#ux #frontend #development #html #css #javascript #userexperience #webdev
Progressively-enhanced dark mode - Darin Senneff
Recently, I added a dark mode setting to my website. Dark mode is a color theme feature that’s pretty common these days. Letting users adjust the color of…Darin Senneff
Common nesting issues in HTML htmhell.dev/adventcalendar/202… 🔥 HTMHell Advent 2022 Day 20 #html #webdev
Common nesting issues in HTML - HTMHell
A collection of bad practices in HTML, copied from real websites.Common nesting issues in HTML - HTMHell