{"id":51572,"date":"2019-11-26T07:00:02","date_gmt":"2019-11-26T15:00:02","guid":{"rendered":"https:\/\/eigene-homepage-erstellen.net\/?p=51572"},"modified":"2024-09-05T08:02:46","modified_gmt":"2024-09-05T15:02:46","slug":"accessible-web-content-the-quick-start-guide","status":"publish","type":"post","link":"https:\/\/eigene-homepage-erstellen.net\/blog\/design-dev\/accessible-web-content-the-quick-start-guide.htm","title":{"rendered":"Accessible Web Content: The Quick Start Guide"},"content":{"rendered":"\n

Accessibility for the web<\/a> is not a new subject. However, the topic of web accessibility is growing in volume. That very fact may be what led you to this article; you need or want to know about accessible content practices but already see the topic is wide and deep.<\/p>\n

I want you to be able to shout about the importance of accessible web content along with us and everyone else. This guide is aimed at practitioners who are newly aware of accessibility concerns and need a practical, prescriptive place to get started.<\/strong> Having a general grasp of HTML and page structure will be helpful.<\/p>\n

How to Use This Guide<\/h2>\n

This article covers a small set of general accessibility issues that are part of Web Content Accessibility Guidelines (WCAG)<\/a> compliance. I will point them out and explain them, provide insight on how you can resolve these issues, and offer my professional opinion on how these issues make it into our applications or websites in the first place.<\/p>\n

To be more specific, nearly all of these issues can be flagged using tools such as AXE by Dequeue<\/a>, webAIM’s WAVE Accessibility Tool<\/a>, or the Audit tools in Google Chrome<\/a>. Any items that you cannot find via a tool, I will call out directly and provide context on what to look for.<\/p>\n

Screen Reader Use in Examples<\/h3>\n

One last point before we get started. Some screencaps in this article will show the Rotor menu from VoiceOver, a screen reader bundled with macOS. If your curiosity is piqued and you would like to test along with the article, WebAim.org has a guide for using VoiceOver to evaluate accessibility<\/a> to get you up and running with VoiceOver.<\/p>\n

For users on Windows PCs, you can use NVDA. WebAim has a guide that covers using NVDA to evaluate web accessibility<\/a>.<\/p>\n

Alright. Ready to jump in?<\/p>\n

Improper Use of Heading Tags (H1 through H6)<\/h2>\n

Day-to-day, I see this single issue more than any other. So often, content managers, designers, and developers use headings for page layout. Yes, headings are part of page layouts. However, their primary purpose is to provide hierarchical landmarks that organize your content. A heading cannot be deployed purely for the sake of visual impact.<\/p>\n

Improper Header Tag Usage<\/h3>\n

Another variation of the problem is headers skipping depths. If all of the sections after an H2 tag are H6s, several contextual depths have been skipped. Users accessing content with a screen reader rely on properly organized headers to navigate. When a heading tag of any number is used on a page it creates a promise you must fulfill for your user. The promise is that all headings underneath another will be contextually relevant to the one above it. If not, you have left your user to search for meaning in your meaningless content hierarchy.<\/p>\n