Let's make our websites accessible for everyone!
As a self-taught front-end developer, when I discovered the concepts of accessibility and inclusive design a few months ago, I did not know much about it. But I realised that many of us, in this web dev field, also don't know much about it. It is regrettable but accessibility is not the best field to invest in these days. It is just a popular buzzword which sometimes comes in and out of our attention. But we can really make a difference when we decide to start learning more about this. And possibly this would just be a small drop in the ocean but we really need that to achieve our goals.
Are you ready or eager to learn more?
What does a11y stand for?
“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y. Other numeronyms you may be familiar with include: i18n (internationalization), P2P (peer to peer) etc.
11 Golden Rules for Accessibility
Which steps should we follow when we create a website?
The below rules are important and deserve our attention not only for accessibility but also for the usability of your website.
Always use a meaningful
Alt text:
Screen readers may read out ugly, nonsense filenames to describe images. We don't want that as responsible developers right 😏 ?Define the level of accessibility of your website and follow the guidelines : Web Content Accessibility Guidelines
This website should be your holy book when you want to get inspired 📕 .Optimise Color Contrast: Getstark This is one of the color optimization platforms where you can find more information about optimising colours for accessibility.
Simplify the language: We don't need complicated or sophisticated words to have a website. Someone once said that if you cannot explain your work simply then you don't understand it well enough.. Keep your content always simple and understandable, and keep your layout clear.
Lead the users: e.g. Always use form labels to describe input fields and place holders. Keep in mind that acceptable input field examples are really handy and useful.
Always provide captions for video content. Without captions it is meaningless to a person with a permanent or temporary visual problem. Never ever have your video automatically begin playing.
Don't forget to test keyboard navigation. A user should have the right to use his/her keyboard to navigate the website. We cannot take this advantage away from them.
Create large buttons! You don't have to be a designer to create large buttons. In this way it is more clear that this is a clickable button and it calls an action.
Create understandable links: Have you ever thought: "I don't know where to click or where to go"? Yes! This is the reason why we need to be clear when we create links. Every link should have a meaningful reason behind it. So don't just make a href because you love a href..
Use semantic HTML elements: What on earth is semantic markup? Semantic elements mean elements with a meaning.
<main>, <nav>, <header>, <section>, <article>, <form>
and so on. Semantic elements clearly define its content.Use ARIA landmark roles to add feature context to HTML elements.
Aria Landmark Features
If you followed all the golden rules and are not sure where to ask, then ask the community: A11Y Project; they have the Accessibility Checklist for beginners to guide and enlighten you..
In a nutshell, Accessibility and Inclusive Design are really import to increase web content quality and make the standards higher on the web. Everyone has the right to reach your content. We should be more aware of these different aspects of web design and development.. I encourage you to everyday apply one new accessibility guideline on your website and enjoy while teaching to others.
Useful links to learn more:
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://www.a11yproject.com/
- https://www.edx.org/course/web-accessibility-introduction
- https://www.webaccessibility.com/
Please do not hesitate to give any comment and add more sources or knowledge about accessibility.
Thank you for reading.
Top comments (10)
This is a great list of important things making the web more accessible! 😊
By the way, video captions (mentioned in the 6th item) are actually meant for the Deaf and Hard of Hearing, not people with visual impairment 😊 Audio description or a media alternative would help them with synchronised media.
I'd add to this. Captions should be added to audio (where it makes sense) too. Think about those training presentations that every companies HR sends round. They're typically made up of mixed video and presentations with a voiceover. Supplying a text alternative only for the video part could still mean some people miss out on some content.
Another point which is especially important in speech on an audio/video clip is to make sure it uses full stereo channels. I work with someone who has loss of hearing in one ear. When the annual HR training stuff came through, some parts could only be heard in one earphone, meaning they had no idea that anything was being said, it just looked broken!
The best advice I would give is to take small steps. Look at the rules the author of this post has outlined and start there. Try out using a screen reader (most operating systems have one built in, like Narrator, Voiceover, or Orca), and have a look at the accessibility tools built into your browser (I really recommend the Firefox ones which go into a lot more detail than Chromes version).
There's a lot to take in at first, and it is daunting. But, just like programming, it takes time and practice. Keep at it, put some of these checks into your development process, and over time it will just become second nature.
Great read! 🔥
I didn't know these were called Neumronym. Thanks. 😄
Every time I see "A11y", I wonder what is sounds like being read by a screen reader! 🤔
Edit: I checked it. It's "A", eleven ,"Y".
Ironic (and depressing) that an article on "accessibility" is rendered in absurdly small text with no obvious way to increase it to a readable size, and the page itself can't be displayed at all in Lynx...
Yes, I agree, it does take a bit of getting used to how the guidelines and their success/failure requirements are structured. I have been working on a side project to make the guidelines a bit more human readable in some places, and to help understand what guidelines need to be tested given the type of content you want to test. The source code for it is at github.com/AshleyJSheridan/a11y-ch... and there's a link there to a version already set up online. It's still a work in progress, but feedback is welcome!
Your nice list has accessibility in it. The items are numbered and the keywords are highlighted. Thank you for sharing.
Nice list and great resources! Though, some of these items sound a little arbitrary and easily forgotten without further elaboration or an example.
For example, I've never heard of #4 before and I'm wondering what you mean by keeping your content simple/understandable, seems like a huge grey area. In #9, I'm not exactly sure what you're saying we should do with links. Including a link naming example there would be helpful, and also some tips with using aria-label or aria-labelledby for non-text links.
Some disabilities can make it difficult for people to understand complicated content or terms. Also, by simplifying content, you make it more accessible to those who aren't native speakers of that languages.
There is something called a Flesch-Kinkaid test which can be run on text content (that specific test is aimed at the rules of the English language, but other language variants do exist) which can give you an estimated reading age of the content. The average reading age varies from country to country, but in the US, for example, the average is about 12 years. If your content is overly complex, it could shut out a large audience.
Obviously, not all content can be simplified to be available to all people. Some subject matters are just complicated by their nature, and you need to use more complicated terms and phrasing to adequetly cover the topic.