Want to do more with static web apps?
Join us at CREATE:Frontend on Jul 29 (8:30am PDT / 11:30am EDT) for a 4-hr free virtual event with 8 talks and a 90-minute hands-on workshop to jumpstart your static web apps journey
Bookmark our anchor post and do check back for updates
Accessibility matters. Yet, so often, not enough people pay attention to it, or choose to pay attention to its principles.
But, really, why is this topic is so important? What is accessibility? Broadly stated, it’s intentionally designing the world to include everyone, regardless of disability. It’s working so others have access to more of life. How do we then do this well, how do we do this right?
Join our Speakers
I'm inviting our speakers from MSCreate:Frontend to have conversations with you here on Dev.to on what accessibility means to you, and businesses, and share use cases of accessible web sites. At MSCreate:Frontend we'll also be showing you how you can make websites more accessible.
MSCreate: Frontend
If you want to learn more about the MSCreate:Frontend event then check out this post with links to all the talks and speakers. And bookmark it to be notified of links to recordings and resources after the end!
Want to learn more about Azure Static Web Apps?
Top comments (9)
Really enjoyed the talk Gift.
A couple of questions:
Firstly, there are a lot of tools out there to help with accessibility but some seem to promise too much. I've heard a lot of accessibility experts say relying on such tools alone can cause a lot of issues and even get well-meaning teams sued. Any thoughts on that?
Secondly, do you have any advice relating to accessibility and user-generated content? For example, if a user uploads an image, is there anything more we can do than letting them populate the alt field to make that image accessible?
Hi, @brettjephson Thanks I'm glad you enjoyed my talk!
To answer your first question, I'll say we should not rely 100% on the tools. Sometimes going ahead to carry out manual checks and automated checks with tools like Axe and Cypress could help and If it's possible to test with people with disabilities before deploying that's another great way of covering all the edge cases.
Secondly, I haven't really seen this implemented as much on the web but thinking about this question it will be a very important feature to add alt text field option before uploading images. I can see how this will generally help improve a11y.
The only example I can think of right now is how Twitter handles this same scenario. You can add an alt text before posting images.
I agree on both points.
On the second one, the Twitter example was one I was thinking of. Great that we can add alt tags to images but it really relies on expert users.
I suppose increasing awareness is a huge part of the answer but wondering if there are any ways of enhancing that. Some AI/ML solutions promise a lot but they mostly offer very literal image descriptions that don’t necessarily relate to the purpose of the image.
Great talk @lauragift21 !
Question, how can one go about bringing awareness of a11y to the team as a sole dev? you know in the rush of getting things done and not being part of the product discussions.
Hi Juan 👋
I shared how we as developers can do more by advocating for accessibility on our team. I'll suggest having a discussion with the team and having an a11y checklist before deploying can help :)
If anyone has come across (or built) an accessible multiselect dropdown with search, I'd be very interested to hear about one. HTML select element (even though it has a multiple attribute) doesn't really suit the need when the amount of options grows to tens or hundreds. Ready made libraries all seem to lack at least screen reader accessibility.
One could attempt to make an accessible dropdown by creating a combobox with a text input tied to a role=listbox list with aria-controls. Adding the full functionality and relying on aria-attributes to carry and consistently provide screen reader comprehensive information across different browsers seems like a stretch for a more junior dev such as myself, even if I am tempted at starting an open source project of my own.
In general anything a bit more complex seems still super hard to make fully screen reader accessible. Even input type="date" doesn't support screen reader accessibility, let alone any custom date picker library you can find online (these can luckily be replaced with simple text inputs).
Great talk with an important topic! Glad to see the awareness spread <3
Hi @ilpotoikkanen ! Thank you :)
I understand your frustrations. Not every UI library account for accessibility and you really have to go ahead and do the work yourself of adding aria-controls at the end of the day.
I know about Chakra UI which is a great UI library for React and Vue and it has accessibility built into the several components including a select component. You can check it hopefully it fits what you're looking for.
Excellent talk Gift. You mentioned the aXe tool, along with a list of other tools, on one of your slides. Will you be making that slide available at all? All so, where I work, we're in a position where we're retrospectively auditing our sites for accessibility and making improvements. Which of the services you mentioned would you recommend we use to test our sites (mainly built in WordPress / Symfony)?
Hi Gary. Thank you :)
Here's a link to my slides
I included a few tools in my slides which you can use to audit and for specify tools for WordPress check these tools out: