An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Web Designer Wall
- Joshua Blankenship
- The Logo Smith
- Abduzeedo
- TutsPlus - Design
- Naldz Graphics
- Crazy Leaf Design
- Reencoded
- Stylized Web
- Specky Boy
Help Webnuz
Referal links:
Website accessibility with HTML
What is website accessibility?
Some users on your sites will use screen readers, only use a keyboard to navigate, use screen magnification or use speech input software. In HTML there are a number of ways you can make your sites accessible to these users.
- Website language
- Semantic HTML
- Proper HMTL headings
- Image alt attribute
- Aria labels
Website Language
In your HTML document you can declare the language used on the web page. This will be used by browsers and search engines. You can specify the language of the HTML document, and the language of individual elements.
<!DOCTYPE html><html lang="en"><body> <p lang="fr">Ce paragraphe est dfini en franais.</p></body></html>Semantic HTML
Semantic HTML is the use of HTML tags to convey the meaning of the information on the page rather than simply presenting it. A few tags that demonstrate this are <h1>, <button>, <article>, <footer> and <header> to name a few. This is important for screen readers, or users who only use a keyboard to navigate the site.
<!-- Bad example --><div> <div>Header</div> <div>Click Here</div> <span>Article information</span></div><!-- Good example --><section> <h1>Header</h1> <button>Click Here</button> <article>Article information</article></section>Proper HTML headers
Screen readers use header tags to navigate the site. These header tags are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. These header tags are used to show the relationships between different sections.
Image alt attribute
The alt text is displayed if the image cannot be displayed. The text should describe the image if the image contacts information. You can leave the alt text blank if the image is for decoration and does not contain information. If the image is used for a link, then the alt text should explain where the link goes.
<img src="profilePic.png" alt="User profile image"><a href="https://twitter.com"> <img src="twitterIcon.png" alt="Link to Twitter"></a><img src="background.png" alt="">Aria labels
The aria-label attribute is used to provide meaning to HTML elements where that meaning is missing. For example, usually a button will have meaning based on the text in-between the button tags, but in some cases this is not done. The aria-label is intended for interactive elements only.
<button aria-label="Close"> <svg></svg></button>Here is some more info about accessibility in HTML: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
Leave a comment if you have any feedback or questions.
Original Link: https://dev.to/fig781/website-accessibility-with-html-17ap
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To