It is not enough to just have a visually appealing or aesthetically pleasing website. If users find it difficult to navigate your page, It is a failure.
when designing or building websites, it's essential to consider accessibility for all users, including those with disabilities, especially those with disabilities because the web is for everyone. One way to improve the accessibility of your web pages is to include meta tags in the HTML head section. In this post, we'll discuss a few important accessibility meta tags that you can use to improve the user experience of your website.
some of these tags come pre-written in the html template, but it's important to konw what they do and how they work.
Lang
The "lang" attribute in the HTML tag specifies the language of the web page. This is important for screen readers, which can use the language information to select the appropriate voice and pronunciation for the content. Make sure to include the "lang" attribute and set the value to the appropriate language code, such as "en" for English or "es" for Spanish. Here is a list of supported language codes
Example:<html lang="en">title
The "title" element in the head section of the HTML page provides a short, descriptive title for the page. Screen readers and other assistive technologies can use the title to help users navigate and understand the content of the page. Make sure to include a descriptive and concise title that accurately represents the content of the page.
Example:<title>Important Accessibility Meta Tags in HTML</title>description
The "description" meta tag provides a brief summary of the content of the page, which can be used by search engines and other tools to display a preview or snippet of the page. This tag can also be useful for users who may use assistive technology to browse search engine results. Make sure to include a descriptive and concise summary of the page's content.
Example:<meta name="description" content="Learn about important accessibility meta tags in HTML for improving the user experience of your website.">viewport
The "viewport" meta tag helps to ensure that the web page is properly displayed on different devices and screen sizes. This is important for users with disabilities who may use different devices or screen magnification tools to view the content. Make sure to include a "viewport" meta tag that sets the width of the page to the device width and disables zooming.
Example:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Aside from accessibility, these meta tags can also help search engines and other tools better understand and display your content. Remember to always follow best practices for web accessibility to ensure that your website is accessible to all users.
Top comments (14)
I'm glad you mentioned "description" -- the conventional wisdom around SEO is that Google doesn't care about it, so no point in bothering with it. It's so easy to forget that accessibility is a goal entirely of its own, and that "description" is useful for something even if that something isn't SEO.
Thank you for reading and I hope you got value for your time. Follow me on twitter @Frontend_Jedi to connect and learn more about web development and ocassional sarcasm. Follow me here on dev.to @frontend_jedi for more contents like this. Remember to leave a comment.
I never knew that the tag can make code more accessible. I thought it was just protocol for setting up the HTML document. Thanks for the great post @frontend_jedi! 😁
my pleasure Christine and thanks for reading!
nice tips! you could also mention the
og:titleandog:descriptiontags for embedding.Hello Medea, thanks for your suggestion
Although content on the internet is typically created for the purpose of sharing and open graph simplifies this, I do not believe it neccesary in respect to accessibility
Please do not read this as me shrugging off your suggestion, I would love to know how og would help in accessibility, so please do well to elaborate your point. I would love to hear from you and thanks for reading my content.
Hey, I completely understand your point, and agree that embeds aren’t that important as the ones you have listed, but they can still play a part in accessibility.
For example, if someone sends you a link, there’s a big chance you might miss it if there is no context with it. However if it has an embed, there’s a bigger chance it will catch your eye and you will want to view it.
Mehn... I never thought about it this way, clever! and thanks for your explanation, because personally I love to see a preview of any link i'm being sent 😂
great to know you agree! keep posting because your posts are always pretty interesting
Thanks for your kind words, what's your twitter handle, I'd love to connect
hey, sorry I don’t have Twitter, but if you ever need to email me: vulcanwmemail@gmail.com
Hi Excel Bill, my understanding of accessibility differs from yours.
I would strongly advise against disabling user zooming, accessibility is about user choice to cater for the needs of the individual, although it’s mostly about allowing all content to be viewed by as many people as possible (those with poor vision who may require zoom to extremes) it is as much about UX because a well designed experience tends to lend itself to accessibility.
The description meta tag, this is another that falls under good experience and doesn’t immediately fall under accessibility it is just content that happens to be enriching a website that the Search Engine will also fallback for if none is provided, it’s UX because it doesn’t loose context if not provided due to that fallback.
Title, yes agreed it’s a really important one but again could that be UX, idea or no idea does not translate to some people understanding and others not due to the use of AT
You see my points and I hope that the least this comment will count towards your posts ranking😊
Hi Adam, thank you so much for your observations
Firstly, this is going to be a series and in one of the series, I was going to talk about enabling font size increment and decrement, the reason I support disabling user zooming is mostly ui, because it can lead to content and UI breaking, so to preserve the UI and still have the option of zooming, things like lightbox for images and optional font zoom for text should be put in place, it also helps for users who don't have fingers to zoom and also need the option of bigger text.
For the description meta tag, I'm probably wrong but I read somewhere that screen readers can give a brief description of the site on hover of the link shown in a search engine, which means you don't have to visit the site to know if it is what you're looking for, for me that screams accessibility for visually impaired users, please correct me if I'm wrong.
Lastly, I think the title tag speaks for itself in terms of screen readers aiding the visually impaired users understand or know what the site title is, for example, say a blind user prompts google to search for "How to make tofu" and the first link is an ad about the most famous tofu place in china, the title tag doesn't lie and the user will definitely know it's not the tutorial he or she was looking for.
Finally, thank you so much for taking out the time to read through and give me these educating feedback, I really appreciate and would still love to hear from you. Thanks.
Love how you focus on the HTML, we've had discussions internally at my company where Aria has come up and basically we were told don't as about everything you need can be done in HTML so long as you do it correctly so the tools work with it.