The AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team provides accessibility expertise across the project to improve the accessibility of WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and resources.
AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) isn’t dark magic. Most of it comes down to using meaningful (semantic) HTML5.
If you inspect a page with the inspector of your browser you can see the DOM. And the DOM must make sense.
HTML5 landmarks like <header>, <nav>, <main>, <aside> and <footer> give structure to a page.
Headings (<h1> up to <h6>), paragraphs (<p>), images (<img>), lists (<ul> and <ol>), and for example quotes (<blockquote>) give meaning to the content.
Buttons(<button>) and links(<a>) add interaction with the page.
When you use the right elements for the job, your site works better on all devices. You can always change the way they look by using CSS if the native view of an element is not to your liking.
Note: Adding <h1>s to every <section> in a page, as proposed in early HTML5, is no longer valid, because no browser supports the HTML5 outline. Use of this model hinders screen reader users in understanding the web page. If you’re not convinced, read Computer says NO to HTML5 document outline by Steve Faulkner.
// Incorrect, a div doesn’t get keyboard focus.
// Also incorrect. You should use <a> only for a change of location, not to invoke an action.
<a class="menu-toggle" href="#">Menu</a>
// Correct, works on every device.
// Also correct: If you want to hide text
// from vision, use the screen-reader-text class.
It’s harder to check if your HTML is meaningful, because this highly depends on the content of your web page. Use common sense: search for the right element for the content and don’t suffer from Divitis.