fejes713 / accessibility-guide

A curated collection of web accessibility tips, tricks, and best practices

fejes713

accessibility-guide's Issues

The absence of link in the Follow heading hierarchy

I noticed that Follow heading hierarchy section hasn't got any link in Resources
I think this resource will fit well: Headings

Images with text should be accessible to screen readers

Great article. Thanks for creating.

I was quite interested to read the following under this heading:

The most straightforward way to do this is to style a header element as image and use text-indent: -9999px as its text content.

The second rule of 'using aria' says "Do not change native semantics, unless you really have to." which seems to contradict your recommendation.

Would you mind clarifying what you meant, a code example would be great (esp on the site)

Thanks

New tip on deque's axe open source a11y tools

https://www.deque.com/axe/

• react-axe: https://github.com/dequelabs/react-axe
• axe-core: https://github.com/dequelabs/axe-core
• axe-cli: https://github.com/dequelabs/axe-cli

Hover state on buttons

When hovered over a button icon it receives the same styles as the button itself. Should be an easy fix with CSS selectors.

Version 2.0

After some time and feedback, I decided it's time for the second version of this project.

This version should focus on storytelling while still showcasing useful tips and tricks developers can use to make their websites more accessible.

I'd like to have the following storytelling included in the project:

1. Show the problem
2. Present different types of disabilities and certain facts about them
3. Showcase how disabled users use the web
4. Display a short list of most important tips with a link to more in-dept explanations
5. Communicate that accessible websites can both improve general UX and be pretty

The project needs to be pretty ✨ and accessible 😉

I'd like this to finish this by mid-october.

Does anybody have any opinions on this one? I've talked to @atomiks and he is willing to help on this one and already provided a lot of useful feedback and guidelines.

Add http://accessible-colors.com to colors tip?

This is a really strong tool, as well.

http://accessible-colors.com/

Project release checklist

Todo:

Project:

• Generate website using hyperapp @fejes713
• Set up Netlify
• Make sure website is accessible
• Have at least 30ish snippets until launch (we're at 20 now)
• Buy domain: https://webaccessibility.guide
• Generate README.md (thanks @Chalarangelo)
• Think of header introductory text
• Graphics and fancy clean CSS (ask @atomiks & @petrovicstefanrs for inspiration & help)
• ESLint & Prettier setup, possibly with git-hooks
• Write contributor guidelines @fejes713
• Logo design

Launch:

• Reddit & Twitter community
• Product Hunt
• LinkedIn promotion
• Motivation, people from the industry etc.
• Set up analytics

webaccessibility.guide is not viewable in lynx

HI

lynx, the text browser commonly used to render the web by the visually impaired (and used by lots of other folks), does not seem to render your website at https://webaccessibility.guide/. It looks to me like this is caused by the site being rendered by some sort of javascript? (lynx does not support js.) Is it possible to include some (accessible) html on your site as a fallback?

Favicon missing

I noticed you don't have a favicon, I threw something simple together.

I think it looks ok scaled down to 16px too, feel free to use this image or use this issue as a place to talk about favicon ideas.

Create a tip for using lighthouse

There's a tip suggesting not relying on the lighthouse too much, but many people don't actually know what lighthouse it and how useful it could be. Should we add a lighthouse tip and introduce it first?

Terminology

Actual: “Put a full stop at the end of the alt tag”
Expected: “Put a full stop at the end of the alt text”

Alt is an attribute that contains a text value – not a tag or an element.