search

BeWelcome / rox

:earth_africa: BeWelcome lets you share a place to stay, connect with travellers, meet up and find accommodation on your journey. It is and will always be a free, open source, non for profit, democratic community.
https://www.bewelcome.org
GNU General Public License v2.0
189 stars 53 forks source link

Make sure the site is accessible #55

Open jhodgdon-drp opened 7 years ago

jhodgdon-drp commented 7 years ago

All web sites should be accessible, especially those whose mission statement is about inclusiveness and connecting people. The standard guidelines are the Web Content Accessibility Guidelines from W3C: https://www.w3.org/TR/WCAG21/

The latest alpha web site, as of today, has at least a few accessibility problems... It would probably be a good idea to run an automated accessibility checker to see if there are more problems. The most commonly used accessibility checker is WAVE: http://wave.webaim.org/

Problems that I noticed (and I'm not really an accessibility expert):

a) All information presented as icons/images, needs to have a text alternative. https://www.w3.org/TR/WCAG21/#text-alternatives

Examples of icons/images without text alternatives: Navigation icons in the top bar after you log in (messages, logout). In addition, using standard icons similar to those on other sites might make these more understandable -- I personally had no idea what they were meant to be until I either clicked on them or looked at the URLs.

b) Minimize abbreviations, or provide text that expands them. https://www.w3.org/TR/WCAG21/#abbreviations

Example of this: the "Vol" link (meaning Volunteer) in the top navigation bar when you are logged in. Again, I personally had no idea what this meant until I looked at the URL or clicked on the link, and I am a native speaker of English. It could stand for many words. Also this would be difficult for translators to translate.

c) Can the home page (not logged in) be navigated without a mouse? I don't think so. https://www.w3.org/TR/WCAG21/#keyboard-accessible

simison commented 7 years ago

FYI, me and Kasper wrote this long ago: https://www.bewelcome.org/wiki/Accessibility

jhodgdon-drp commented 7 years ago

That is a good start! But it's not just blind people. The web site also needs to be accessible for:

The WCAG guidelines are pretty comprehensive, and cover all kinds of accessibility issues. The current revision of them is pretty easy to understand too, I think. Plus there are these automated accessibility checking tools (see original issue) that can find accessibility problems. You can also test a site by trying it out in screen reader software to understand what a blind person would hear.

jhodgdon-drp commented 7 years ago

You can run the WAVE tool on the alpha home page to see all the problems it identifies: http://wave.webaim.org/report#/https://alpha.bewelcome.org/

The main errors: a) Many images are missing alt text

b) Many form fields are missing labels (these can be visually hidden if they interfere with the design, but they need to be present)

c) Two buttons have no text

d) Contrast. The text over images areas need to be provided with a contrasting background color in case the images do not display, otherwise they are white-on-white

e) There are 6 H1 headers on the page. Normally, you should have only 1 H1 on any page. This is an SEO issue too. In general, the home page doesn't follow a logical outline of H1 -> H2 -> H3 etc.