Has it happened to you that you enter a website and the font is too small? Are there backgrounds that do not allow you to read easily? Annoying pop-ups blocking important parts of the site? When we talk about web accessibility, we refer to issues that make it easier for the contents of a website to be understood by all people, including those who have a visual, hearing or other type of disability. In this post I will tell you more about this interesting topic and how to achieve an accessible web page.
What is web accessibility?
A website is accessible when its contents can be understood by all people. For this to be possible, good design, programming and technology must be combined.
Accessibility guidelines
The W3C has published a series of recommendations for a more inclusive Internet. They start from four important guides:
- Perceivable. It should be easy for users to see and listen to the content. For an image, alternative text should be provided that can be heard rather than seen. The lyrics must be properly punctuated, the language must be understandable, and alternatives for time-based media must also be provided.
- Operable. Is achieved when website functions are available from a keyboard. This point also refers to usability, allowing easy navigation and giving users enough time to read and use the content.
- Understandable. The text must be legible and the website must function in a predictable manner. For example, if we put a button, the logical thing would be for it to have some function. Users can be provided with the ability to report bugs.
- Robust. Elements have unique IDs, elements have full start and end tagging, and are nested according to established specifications.
How to make a website accessible?
To have an inclusive website, its different components must be accessible. This covers aspects of design, writing and correct labeling of images and other multimedia elements.
Accessible design
An inclusive design considers that Internet users access content in different ways. The design should consider issues such as:
- Color. While a person may be perfectly capable of distinguishing between shades of colors, others may have a condition of color blindness. Therefore, there must be a balance between color and contrast and issues that have to do with structure or format should not be trusted solely to color. It must be considered that sometimes the graphs or diagrams can be printed in black and white, so the colors must be sufficiently distinguishable on a gray scale.
- Contrast. Refers to the difference between text and its background color or between different parts of an image. A sufficient contrast ratio can help people who have vision problems such as astigmatism or color blindness.
- Typography. Its size depends on the size of the screen on which the content is going to be displayed, so it must be adjusted for different devices. Capitalization should be limited to recommended uses only, such as proper nouns, as all caps could complicate the reading.
Accessible images
Screen readers use alt text to describe what images are about. The alternative text is an SEO meta tag that the Internet user who cannot see the site will hear from the screenreader. Both search engines and screen readers use this tag to understand what the image is about and read it.
- Decorative images. When an image is only there as an ornamental element and is not essential to understand the content of the site, the alternative text should be left empty.
- Informative images. When images are essential to understand the content of a page, it is necessary to place the alternative text so that it can be read by accessibility technologies.
- Charts and Infographics. Charts, diagrams, concept maps, schematics, infographics, and more can be difficult to decipher, especially in small fonts. If your design includes tables or charts with a lot of data, you should summarize them in alt text.
Accessible writing
- Spelling and grammar. Texts must be well written, without spelling mistakes that cause ambiguity problems.
- Legibility. Easy to understand, without elements that get in the way.
- Structure and format. The most important elements of the text should stand out from the rest. The content must be structured hierarchically through titles, subtitles, ordered lists, etc.
- Descriptive anchor texts. When linking to content via a link, the anchor text must be related to the content to which it is directed. For example, instead of a simple: ‘click here’ you can put ‘accessible writing services‘, and link to related content.
Benefits of an accessible website
In addition to making the content of a website understandable to people with different spectrums of abilities, accessible design has other benefits.
One of them is that search engines can better understand the contents of the site. In this way, when a user makes a query related to the topics that you cover on your page, the search engine will be more likely to show your site in the list of results.
Accessibility tools for web development
As web developers, there are guidelines for accessibility. Markup languages such as HTML, they have semantics behind them that contribute to accessibility. At first glance, many of the tags are not distinguishable since they are in the code, however, they help to make the contents of a website better understood.
As Internet users, we also have tools to know how accessible our browsers are. Plugins have been developed for web browsers to help display content more clearly when you have a condition.
Finally, there are other tools that show us how people with some type of disability perceive the pages of a site. Through these empathy tools, a greater understanding of the importance of web accessibility can be achieved.
In conclusion…
- Web accessibility makes it easier for everyone to understand the content of a site.
- When developing a website, you need to consider the W3C guidelines and understand the semantics behind HTML tags.
- In addition to being more inclusive, an accessible website is correctly integrated by search engines, so its web positioning will be better.
Do you want to know more about web development? Read other related articles on our blog and comment on what you thought of this post.
