Next up: an encore presentation of Sara Soueidan’s presentation (from last year?) Accessibility and Progressive Enhancement: A Framework for a More inclusive Web. Sara was unable to record a new talk this year because Lebanon is in a sustained food and fuel crisis.
Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
You want a way to navigate the app without getting your dirty hands on the screen because you’re cooking. They built voice navigation for the application. They also built gestural input
[Now I am hungry for cupcakes.]
— Anne Gibson (@perpendicularme) October 12, 2021
Voice and hand gestures make the web app more inclusive, are human, and more memorable. This was from 10 years ago.
accessibility doesn’t have to be a burden. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Some people are born with permanent disabilities. Others might have temporary disability. Situational disabilities also occur. Over 1 billion people live with some form of disability. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Semantic markup is part of that foundation. Semantic — descriptive, and providing meaning — HTML means using the correct element for the structure and meaning of the content. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
What if you don’t have textual headers because the sighted user can infer information from the page?
Sara built the basic structure of the page, then tested. Headings were a problem, landmarks were a problem.
Add a heading exposed only to screen readers. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
You can use aria-labelledby to ensure that the right parts are labeled even when the text is outside of the landmark that it refers to. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
80% of respondents will use regions to navigate, but only if you provide them. Otherwise you’re building a frustrating and accessible page.
— Anne Gibson (@perpendicularme) October 12, 2021
You could make the buttons more specific – “add [product name] to cart”.
Inserting visually hidden strings of text to visual text is bad by the way, it can break the experience for people using voice recognition software. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
The next tweet references a video by Level Access, which you can find here:
Visual labels are important for people using voice interfaces — if you have hidden text in the middle of a string, like a button name, the voice interface will break.
We can fix a scenario for one person and break it for someone else. It’s a challenge.
— Anne Gibson (@perpendicularme) October 12, 2021
Dot navigation in carousels can be hard for visual labels. Users might need to use voice commands for tab. The next option is to show a label on focus. Don’t make the users use the mouse grid if you don’t absolutely have to.
— Anne Gibson (@perpendicularme) October 12, 2021
I always feel obligated to link to fuck carousels whenever someone mentions restyling them. Yes, they should be accessible if you have to use them, but for god’s sake do everything you can not to use them. Anyway, moving on…
There are lots of way to hide content from screens.
* clip path: inset (100%)
* opacity: 0
* visibility: hidden;
* display: none.The bottom 2 also hide from screen readers so they’re the wrong tools. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
@SaraSoueidan provides a lot of good detail in this talk and is getting into code at this point. You should sign up for @aneventapart so you can get access to the code. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
the aria-label attribute will let you add a label on a button without a visual text label. aria-label overrides the content of the button. These contents aren’t translatable so be aware of impacts on translation tools. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Read https://t.co/sMs6g2uLdd for more information on accessible icon buttons #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Using the .visually-hidden utility class or moving the checkbox off canvas with absolute positioning to hide the native checkbox will also hide the checkboxes by touch. Android touch devices allow screen reader users to touch the screen and hear interactive elements. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Read https://t.co/axiosqgl4H for more information on these techniques #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
For example, a blog might have thumbnail, post title, and read more link on each article on a menu page… all of which go to the same article. The more posts there are the longer the tabbing journey will be. This happens a lot on news and long form writing sites. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Make sure that you’re not breaking the experience — make sure it’s still easy to access the article. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Read https://t.co/MugfLR6nWL for more information on this technique.
While you’re at it, https://t.co/W9e0rcVk1R is a link to all @SaraSoueidan’s blog posts and they are full of gold. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 Accessibility and Progressive Enhancement: A Framework for a More inclusive Web by Sara Soueidan – Perpendicular Angel Design