This is a collection of web accessibility examples that are useful for learning.
Access-o-rama presentationHere is a paragraph with a bunch of links. These links are interspersed in the text so that it's hard to tell what is text and what is a link. If they had underlines it would be pretty easy. If we were to make the links green or red it would fix it for some users but not others. We can make it a little better by using a lighter color but that still might not be enough.
On the other hand, these links are really easy to see on all the simulation modes. We can change the color however we like and it shouldn't be a problem (though color indication is still helpful!).
High contrast mode is cool!
This is a really long long long long long long long long long long long long long long long long long long long long paragraph. It's not responsive so browser zoom will make it really annoying or impossible to read.
Good heading structure is really useful for users with low vision (and all users!).
Here is a button that shouldn't be read literally: . We can explicitly label it to make it more useful: , though most of the time we should create a text label.
Screenreader users often move through a page by moving between links or buttons. So links like Learn more are very frustrating! Try something like Learn more about XYZ. This style of listing multiple links is even worse.
Images need a text alternative! Directly describe what the picture depicts, focusing on the relevant features. If an image is purely decorational, there are specific ways to mark that.
Low-vision users make up the majority of vision-impaired users and a substantial portion of screenreader users.
Try to aim for an equivalent experience between sighted and unsighted users. It means sighted and unsighted users can communicate reliably about the content of the page, and it's also good to avoid confusing partially sighted users. This button trying to be helpful but is actually confusing: .
One more note: combining screenreader-relevant tests with high contrast mode, browser zoom, and magnifiers will go a long way in helping this user group.