Kicking it in Dayton, Ohio as a software engineer with a passion for learning and teaching #a11y. Other passions include frontend web dev, drawing, running, and anime.
I would recommend reading the WCAG standards to get a comprehensive understanding. I would check them out through WebAim, which also has reference to ATAG and WAI-ARIA. Most legal guidelines have their basis on WCAG 2.0 + 2.1.
The first step to making an accessible Web app is to write Semantic HTML.
Then also finding Tools that will help you. There are dev tool extensions like Lighthouse and AXE that will also help make your web app more accessible, without having extensive knowledge on accessibility.
And understanding that DOM order is the reading order/ tab order so moving elements around with CSS may not be the best of ideas.
But then I tested it with screen reader and result was ... not so good. So I would say that semantic HTML and WAI-ARIA != accessible. Actually testing with real assistive technology - this is what matters.
Kicking it in Dayton, Ohio as a software engineer with a passion for learning and teaching #a11y. Other passions include frontend web dev, drawing, running, and anime.
I pulled your code. It's not too off from being a good example of aria for screen readers. It reads fairly well for your actionable items. it is a little buggy on initial loading, but It's reading fairly well on the screen reader I'm using. So I guess I'm curious what issues you are seeing?
I don't remember - it was long time ago. Which screen reader did you use? I guess, I used built in Mac OS assistive technology (but maybe something else)
Kicking it in Dayton, Ohio as a software engineer with a passion for learning and teaching #a11y. Other passions include frontend web dev, drawing, running, and anime.
I would recommend reading the WCAG standards to get a comprehensive understanding. I would check them out through WebAim, which also has reference to ATAG and WAI-ARIA. Most legal guidelines have their basis on WCAG 2.0 + 2.1.
The first step to making an accessible Web app is to write Semantic HTML.
Then also finding Tools that will help you. There are dev tool extensions like Lighthouse and AXE that will also help make your web app more accessible, without having extensive knowledge on accessibility.
And understanding that DOM order is the reading order/ tab order so moving elements around with CSS may not be the best of ideas.
I tried to follow WAI-ARIA recommendations (including semantic HTML) and used Lighthouse. Example is here dev.to/stereobooster/accessible-re...
But then I tested it with screen reader and result was ... not so good. So I would say that semantic HTML and WAI-ARIA != accessible. Actually testing with real assistive technology - this is what matters.
I pulled your code. It's not too off from being a good example of aria for screen readers. It reads fairly well for your actionable items. it is a little buggy on initial loading, but It's reading fairly well on the screen reader I'm using. So I guess I'm curious what issues you are seeing?
I don't remember - it was long time ago. Which screen reader did you use? I guess, I used built in Mac OS assistive technology (but maybe something else)
I’m using Chrome vox. I’ll have to try it out with the OS assistant on Mac.