Make Hood.ie Accessible

[verpixelt]

No description provided.

[varjmes]

Original title: Add ARIA roles and tab index

I've changed the title because to make Hood.ie accessible, it may require more work than just ARIA roles and Tab Indexes.

I will now try and create a list of things that need to be done, so everyone can take part in making Hood.ie accessible :)

[varjmes]

@verpixelt what did you mean by "add TabIndex" by the way, whats the purpose of doing this?

[varjmes]

ARIA Roles

We need to make sure that the elements within all our .HTML pages have their appropriate ARIA roles, to make the website more accessible for those using assistive devices like screenreaders.

With HTML5 came the introduction of semantic elements (<header>, <article>) which means the need to use ARIA roles on all our elements reduces, as ARIA info should be implicit within the element. However, not all browsers support these semantic elements so until we have 100% coverage in the world, we should still use explicit ARIA roles wherever possible.

The important thing here is not just to add ARIA roles everywhere, but to consider whether or not they are needed. Something that is helpful is to use HTML5 elements as much as possible, these will indicate which ARIA roles you need and reduces a mass of <div> tags with no meaning which makes it harder to understand which ARIA roles you need.

Pages to be reviewed

• - index.html
• - doku.html *
• - 404.html
• - sponsoring/index.html
• - merchandise/index.html
• - intro/index.html
• - initiatives/index.html
• - impressum/index.html
• - gethelp/index.html
• - friends/index.html
• - events/index.html
• - contribute/index.html
• - contact/index.html
• - community/index.html
• - code-of-conduct/index.html
• - chat/index.html
• - bug/index.html
• - blog/index.html
• - animals/index.html
• - about/index.html
• - Everything in _layouts
• - Everything in _includes
• I don't know what doku.html is used for, but it should be updated in case someone uses it, or removed completely if it is unused.

[varjmes]

Navigating to main content

We have a lot of navigational items in the header that a user must tab through if they are using keyboard-only/ a screenreader. I'm sure that regular visitors to the Hood.ie website would just like to be able to go straight to the main content, so we should implement a skip link for all pages which will take you to the main content. I'm not sure yet which way to implement this, either in a header include that is already injected into each HTML page, or some other way. To do the former, we'd need to ensure that the main content has the same ID or element name so the skip link goes to the same place on each page. A skip link will likely require some JavaScript.

• - Implement skip links

[varjmes]

Guide to Accessibility

An accessibility guide should be written to help all contributors think about accessibility from the start when they build components so we do not have to go through the site ever again to do all this work. Accessibility first FTW. The issue for this task is here: hoodiehq/hoodie-css#1

• - Write guide to accessibility feat: accessibility guide hoodie-css#21

[varjmes]

Design

There are a number of improvements that can be made to the design of Hood.ie.

• - Improve the contrast ratio between elements and text. Particularly were we use a lot of greys
• - Make sure we have good :active, :hover and :focus states on all our focusable/activable/hoverable elements (like links and buttons)

[varjmes]

Other

• - Make sure all images have appropriate alt tags - http://a11yproject.com/posts/alt-text/
• - Ensure all forms are appropriately structured, with labelling for and connect to each input
• - Use semantic HTML5 elements wherever possible

[zoetrope69]

#mansplain

[zoepage]

To be honest, I think @pcalves answer was great and this is one of the things @Charlotteis asked about.
So I don't see any mansplaining here...?

also @zaccolley, I'd love to see more productive comments. This feels kind of passive-agressive. So please, be nice :) If you are not sure what is okay and what not, please take a look at our Code of Conduct: http://hood.ie/code-of-conduct/

[pcalves]

@zoepage Ugh, now I feel bad for deleting my comment. I guess I was afraid I actually had done something wrong, even when I felt my intentions were good, if that makes sense?

So then, tabindex. It's a property that lets the browser know whether an HTML element is focusable. Moreover, it tells the browser in which order elements should be focused as a person tabs through the page. Useful to give tab access to elements that aren't usually focusable by default (such as <div>s or <span>s). As always, MDN puts it much more eloquently than that and provides more information.

[zoepage]

@pcalves thank you for putting it up again :)
No worries, if there would have been something odd about it, we could have fixed that together. But anyways, thanks for your explanation!

[zoetrope69]

yeah I didn't add anything worthwhile to this, sorry gang

[varjmes]

Hi folks!

Though I do know what Tab Index is, having an explanation is great for
anyone else that hopefully comes along to this thread :)

My question was more the "why do we need to manually set this accross
hoodie?". Its generally not a good idea to start manually changing the
source order of elements (potentially) with Tab Index. If there is a
reason, perhaps the solution is something else if @verpixelt can shed some
light on this?

:)
On 12 Aug 2015 00:04, "Zac Colley" [email protected] wrote:

yeah I didn't add anything worthwhile to this, sorry gang

—
Reply to this email directly or view it on GitHub
#28 (comment).

[verpixelt]

Have you tried e.g. to navigate the index page just with tab? After you've passed the main navigation you jump into the left "row" which isn't the first according to the content flow. The first would have to be the middle one, next the left and than the right. There are a few elements on pages where it would make sense to alter the tab index to get the right content flow.

[varjmes]

Honestly, I see no problem with the way that things are tabbed on the main page. For someone interacting with a page, it would be confusing to not go to the left column first and actually start in the center. Visually people read from left to right and I don't think we should change that.

Looking at the HTML source they go left - center - right too.

I of course don't want to dismiss this completely! But with that example, it doesn't make sense to me and I think it would be a bad change. However, perhaps there is someone better at a11y than me who can jump in and help me understand.

[verpixelt]

The middle column tells you what this project is all about, the left one how to install it. It doesn't make sense to read the left one first (+ this was just an example).

[chrisdemars]

Is there still room for this to be worked on?

[varjmes]

@chrisdemars yes, almost no progress has been made here due to life, work and health.

[chrisdemars]

Okay, I will start looking in to this issue.

On Thu, Mar 3, 2016 at 9:27 AM, Charlotte Spencer [email protected]
wrote:

@chrisdemars https://github.com/chrisdemars yes, almost no progress has
been made here due to life, work and health.

—
Reply to this email directly or view it on GitHub
#28 (comment).

[gr2m]

that’s super awesome, thanks @chrisdemars 👍

[chrisdemars]

@Charlotteis @gr2m I just cloned the repo to my machine tonight, I am going to work on some of these a11y issues throughout the week. Is it okay to submit small PR's or one big one?

[gr2m]

@chrisdemars small PRs are perfect, thanks 👍