DEV Community

Discussion on: What are WCAG and WAI-ARIA?

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

There's a few odd things here.

Firstly, there's nothing wrong or outdated with their recommendation of using padding and margin instead of spacer images and table layouts. You recommend using gap instead, but that's only an option if you're using CSS grid layout which you've not mentioned. CSS grid has many quirks which make it all too easy to create less accessible content, such as breaking the natural document order and tabbing order by re-arranging content visually in a way that doesn't match the DOM.

Using a title for each page is absolutely still recommended. If you're creating an SPA, you can still alter the title of the document to reflect the new view. The title isn't just something that's seen once and never again. Dynamic titles can benefit everyone. Just look at any popular messaging app or social network when in a tab not in the current foreground. They make use of dynamic titles (along with other methods) to alert the user that they have a message or notification to read.

Their choice of not listing disabilities is correct. Developers (and content creators) get far too attached to the idea of fixing things for a specific disability, that they don't see the bigger picture. Often, changes made to address a disability actually benefit everyone. For example, video captions were originally aimed to address the problems that the Deaf community faces, but captions are useful for a lot more people than that . Most of the guidelines are beneficial for more than a single disability, which is why they're not targetting any group of people at all.

You mention that ARIA is meant to address keyboard accessibility, but that's not entirely true. The most popular ARIA attributes are things like aria-label and aria-describedby which are used heavily by speech readers and Braille displays. ARIA is intended to fill the gaps that exist with our current ecosystem. HTML tags and their implied roles is only a small part of it, there are interactive associations (e.g. toggle buttons, revealed content, etc) and dynamic content (live areas, insertions, deletions, etc).

Collapse
 
stereobooster profile image
stereobooster

but that's only an option if you're using CSS grid layout which you've not mentioned

caniuse.com/flexbox-gap

Using a title for each page is absolutely still recommended.

I'm didn't say you shouldn't use it. I said it will work only on the initial load, but not on consequent navigations

Their choice of not listing disabilities is correct.

As far as I understood, they will list more disabilities, to give more context in WCAG3

The most popular ARIA attributes are things like aria-label and aria-describedby which are used heavily by speech readers and Braille displays.

That is true. What I meant that if you take a look at code examples, most of them are about how to add keyboard navigation (JS code). But markup and other attributes are indeed would be useful for other assistive technologies

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

caniuse.com/flexbox-gap

You said gap, not flexbox-gap, two very different properties. Also, there are still times where neither of these is being used. margin and padding are still very much in use today, and not out-of-date at all.

I'm didn't say you shouldn't use it. I said it will work only on the initial load, but not on consequent navigations

But it will, and I even mentioned examples.

Thread Thread
 
stereobooster profile image
stereobooster

You said gap, not flexbox-gap, two very different properties.

.flex-parent {
  display: flex;
  gap: 1rem; // 👈 "gap"
}
Enter fullscreen mode Exit fullscreen mode

But it will, and I even mentioned examples.

With which assistive technology did you test it ( e.g. VoiceOver, NVDA, JAWS)?

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

Sorry, you're right about the gap being now also used for Flexbox, it's just badly documented.

As for the dynamic title thing, just tested it in NVDA and it works fine. I think the problem you're running into is that you're just expecting the screen reader to read out anything on the page that has changed. That won't happen, you have to make the browser aware that it needs to watch regions for changes. But NVDA has absolutely no problem reading out the new title.

If you have a valid reason to change the title for someone not using a screen reader, then it also applies for someone who is using one.

Thread Thread
 
stereobooster profile image
stereobooster

I need to get my hands on NVDA - I need virtual machine for that

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I'm assuming you're using a Mac then? VoiceOver should behave just the same. Or there's Orca and equivalents on Linux.