add aria-label to main element

[scottaohara]

This is a small quality of life update for screen readers, so now the

element will be announced as ‘main content’ rather than just ‘main’, adding a bit of extra context for these users.

[oriSomething]

I'm really not sure about this. Did you something like this anywhere?

[toddmotto]

Just had a quick google search as I've not seen it before either (weird also that it's capital C too). Found Jekyll had changed to it: https://github.com/jekyll/jekyll/pull/4636/files

[scottaohara]

this is an extra label that i first learned about working w/the lead accessibility engineer at edX, and have since tested this with screen reader users that have unanimously appreciated the inclusion of it on various other projects i've worked on.

[oriSomething]

@scottaohara Hey, but is there any medium+ size website out there that implement this?

[scottaohara]

As i mentioned, there's https://www.edx.org. They'd definitely meet the medium+ category since their site is used the world over for higher education.

The Perkins School for the Blind also does this...and they're one of the leading international institutions for blind individuals and assistive technology training.

But to be honest with you, there are far more sites out there, especially medium-large sites, that have abysmal a11y support. So I wouldn't expect to find this used a lot in the wild, because 1. not many people are aware of how little extras like this can help screen reader users, and 2. many large, popular sites are a sea of divs... building sites w/accessibility in mind is unfortunately not yet a truly common practice...

So I'll mention again, this has been received very well in the tests i've performed with screen reader users. I've included this on at least 4 other large scale websites/apps that I am not at liberty to name due to NDAs. But I'm at a loss for how else to explain that this is a beneficial add...

[oriSomething]

LGTM

[scottaohara]

thanks :)