Accessibility enhancements

[vikramj74]

I've added ARIA markup for making the page more accessible for differently abled persons. Also, I've added support for navigation and UI interaction through keyboard.

Tool used for accessibility testing: NVDA screen reader ( OS : Windows 10 )

[handasolo]

Sorry for the delay but I'm still researching everything about accessibility. I can imagine why it took you so long and it might take me some time as well. Meanwhile, I found some problems that you can deal with. Also, I've not fully researched accessibility and you've probably read about it more than me by now. So, if you disagree with any point, let me know.

• The navigation should go through our the image, even if it is just to read the alt-text saying 'Mozpacers team picture'. People should know that there is a hero image on the page in my opinion. Maybe I'm wrong and you left it out because it's a good practice. Please do tell.
• Also cover the firefox image along with the 'Commited to you, your privacy and an open web' as they cover it.
• The links 'About us' and 'contact us' in the nav bar says About U.S. and Contact U.S. instead of saying us.
• Our events section is dynamic and it changes to a empty frame when clicked upon 'more events' or 'more info' and we have no sort of indication for that. As far as I have researched, there should be some sort of indication that the screen has been changed because of a use action. Have a look at the first video here. You can also look at the other videos, they are good.
• In the same frame I was talking about, we have a back button and there is no voice indication suggesting that it is a back button. Plus, please add keypress event for the button. It doesn't work with enter.
• Also, why does the 'more info' and 'register' buttons disappear as you navigate through them? Same with the brief info in the card.
• This is weird but NVDA does not navigate well through our slider whereas Orca is doing just fine. NVDA doesn't annouce the header and the link in the slide whereas Orca does.
• The navigation through tab never reaches our About us section. People should be able to read that, if you had any reasons to leave that out please do tell. Also, it'll be good if the reader could read the contributors we are adding to that section and not just the link present there.
• Lastly, please cover form errors and success messages. You can try giving out false data in the forms and you'll see that the reader never announces the error.

[CuriousLearner]

@vikramj74 Please update your fork and fix the changes. Please keep us updated about the task.

Thanks for your work.

[vikramj74]

@CuriousLearner Sure, I'll update my fork and keep you guys updated about this.

[vikramj74]

@CuriousLearner I've updated my fork and the conflicts have been fixed.

[vikramj74]

@Slayslot Thanks for your review and insights. I'm sorry for the delay in my response . Something urgent came up, so I couldn't work on these issues for a while. Here's my response to your the review points.

• I think you are right about this. The hero image is not entirely presentational, it represents the mozpacers group. Hence, it should be announced. I've added accessibility markup for this.
• I don't understand what you mean by this. Can you please explain ?

I'm still working on the rest and will post the updates here.

[vikramj74]

@Slayslot Update : Response to point 3.

• I think the problem here lies with the text itself. It isn't good practice to use completely capitalized letter for menus. We can include a 'screen reader only' variant but, even that won't be a good idea according to me. I would like to know your views about this. For more info, please visit : http://www.456bereastreet.com/archive/201012/use_uppercase_capitalised_text_judiciously/

[handasolo]

I don't understand what you mean by this. Can you please explain ?

Try to navigate with tab through their download firefox section, you'll see.

I think the problem here lies with the text itself. It isn't good practice to use completely capitalized letter for menus. We can include a 'screen reader only' variant but, even that won't be a good idea according to me. I would like to know your views about this. For more info, please visit : http://www.456bereastreet.com/archive/201012/use_uppercase_capitalised_text_judiciously/

I never knew this. Well, I guess you'll have to turn text-transform off and @h4xr is going to have to deal with it typographically in PR #37.
Apologies for the late reply, Orca wasn't functioning properly.

[CuriousLearner]

Hello,

@vikramj74 What's the update with this PR?

[cosmologist10]

hey @Slayslot ,i want to work on it.please guide.

[handasolo]

Hi, @TheCOsmOLogISt10. Thank you for your interest in this task. Know that this is a pretty huge task in itself. You can take a look at this entire PR and how @vikramj74 was doing things. Also, the problems enlisted by me in his method. Here's some resources for you to take a look at:
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://www.w3.org/WAI/intro/accessibility.php
http://www.w3.org/standards/webdesign/accessibility
Also, if you can contact @vikramj74 to update his fork and add you as a contributor to it. That way, you won't have to repeat everything that he has already done and he also gets the credit. Let me know if you need anything else. Thanks.

[cosmologist10]

hey @vikramj74,can you update your fork and add me as a contributer,as it would be easy for me to work.Thanks

[CuriousLearner]

Rather than waiting to provide access, why don't you just pull his work on your local and start from there?

@TheCOsmOLogISt10

cc @Slayslot

[vikramj74]

@TheCOsmOLogISt10 I've added you as a collaborator to the fork. I've not been able to contribute to the fork, for a very long time ( I got very busy in some other things ). I will try to update the fork ASAP, and then you can take it forward from there.

Meanwhile, as @CuriousLearner mentioned you may clone the fork and start exploring the code.
cc @Slayslot

[handasolo]

Thanks, @vikramj74 for the help. Let me know if you need any help with updating your fork.