Enrich my Web Accessibility Curriculum
May 20, 2018 3:22 PM Subscribe
I'm taking a bunch of web accessibility courses through DeQue University, in hopes of getting an accessibility certification in the next few months. I'd love some additional resources to supplement the information they provide.
I know the basics of HTML and Javascript and a bit of CSS, even if I feel like the latter is kind of a foreign language to me, as a blind computer user, given a lot of it seems very focused on how things look visually..
I'm searching for resources to help enrich my curriculum. There's a lot of focus in the courses on isolated code examples, which are helpful for seeing specific accessibility problems, but they're not always run "live."
I'm looking for some kind of "interactive console," where I can paste in a fragment of code and see what it does in real time. I know this kind of thing exists for Python and other programming languages but haven't had a lot of experience with HTML and other web equivalents.
Beyond that, any resources people can provide which help more than "View Source," on a ton of web pages would be ideal. I feel like a lot of complex pages nowadays are kind of unfriendly to view at a low level, because I can't tell where accessibility problems originate—is it something in the particular CMS template, is the author just bad at writing hand-coded HTML, or is it something Javascript-wise I'll have to trace through?
I know the basics of HTML and Javascript and a bit of CSS, even if I feel like the latter is kind of a foreign language to me, as a blind computer user, given a lot of it seems very focused on how things look visually..
I'm searching for resources to help enrich my curriculum. There's a lot of focus in the courses on isolated code examples, which are helpful for seeing specific accessibility problems, but they're not always run "live."
I'm looking for some kind of "interactive console," where I can paste in a fragment of code and see what it does in real time. I know this kind of thing exists for Python and other programming languages but haven't had a lot of experience with HTML and other web equivalents.
Beyond that, any resources people can provide which help more than "View Source," on a ton of web pages would be ideal. I feel like a lot of complex pages nowadays are kind of unfriendly to view at a low level, because I can't tell where accessibility problems originate—is it something in the particular CMS template, is the author just bad at writing hand-coded HTML, or is it something Javascript-wise I'll have to trace through?
Response by poster: Thanks for the tip about Codepen. I haven't tried it with all my screen readers yet, but it looks just about as bad as you thought it might be. The Google resource you linked seems as though it might be more useful, however. I guess if people really gave accessibility the attention it deserved, I wouldn't have a job.
posted by Alensin at 6:34 PM on May 20, 2018
posted by Alensin at 6:34 PM on May 20, 2018
Best answer: Short answer: try out this nice beginner tutorial from facebook, which has live code examples.
Long answer: given that you are blind, you obviously have a huge leg up on diagnosing accessibility problems over sighted users --you can identify practical issues based on "typical" screen reader use. I'm a sighted web developer who is interested in accessibility, and even though I use a screen reader to check my work, I can never have the confidence that something is actually accessible until someone fluent in screen reader use goes through it.
That said, you will be at a disadvantage for diagnosing certain issues -- for instance, I can see something important on a page that has been accidentally made invisible to screen readers, and flag it.
So I suggest you become familiar with automated accessibility tools as soon as possible: some major ones are Lighthouse (which also does audits for other aspects of site performance, you'll have to navigate to the accessibility tab) and the Axe browser plugin. Start running both of them on as many websites as you can, and notice how the warnings interact with your experience of the site on screen reader. They will be able to automatically catch some things that will probably initially be hard for you to notice.
As a next step, I might search github for widgets billing themselves as "aria compliant" (try search terms like "aria modal" or "aria tabs" for instance) and examining the source code. Many of them will have companion websites where the code is running to demonstrate the usage of the widget.
posted by loquacious crouton at 8:05 PM on May 20, 2018 [1 favorite]
Long answer: given that you are blind, you obviously have a huge leg up on diagnosing accessibility problems over sighted users --you can identify practical issues based on "typical" screen reader use. I'm a sighted web developer who is interested in accessibility, and even though I use a screen reader to check my work, I can never have the confidence that something is actually accessible until someone fluent in screen reader use goes through it.
That said, you will be at a disadvantage for diagnosing certain issues -- for instance, I can see something important on a page that has been accidentally made invisible to screen readers, and flag it.
So I suggest you become familiar with automated accessibility tools as soon as possible: some major ones are Lighthouse (which also does audits for other aspects of site performance, you'll have to navigate to the accessibility tab) and the Axe browser plugin. Start running both of them on as many websites as you can, and notice how the warnings interact with your experience of the site on screen reader. They will be able to automatically catch some things that will probably initially be hard for you to notice.
As a next step, I might search github for widgets billing themselves as "aria compliant" (try search terms like "aria modal" or "aria tabs" for instance) and examining the source code. Many of them will have companion websites where the code is running to demonstrate the usage of the widget.
posted by loquacious crouton at 8:05 PM on May 20, 2018 [1 favorite]
This thread is closed to new comments.
A lot of modern websites are heavily (if not virtually entirely) Javascript. If you use "inspect element" in the dev tools you can traverse the DOM looking at what has actually been rendered, even if "view source" shows nothing but React hooking into some DOM element and rendering.
I do note that Google's page describing ARIA has an image listing all the attributes. It does have alt text, but that just says "list of all the attributes".
posted by hoyland at 4:10 PM on May 20, 2018