Web accessibility is opening accessibility to everyone especially those who have disabilities. With web accessibility all user can perceive, understand, navigate and interact with the web”. Most websites have barriers that make accessibility difficult. Disabilities include visual, auditory, language, speech, learning and neurological.
Accessible websites have increased audience reach, faster load speed, better SEO and better search results. An accessible website demonstrates social responsibility and is good for public relations. Web accessibility has positive results for everyone.
WordPress Development being the contemporary web development company in a matter of providing advanced tools and plugins enables users to utilize the tools that meet their dev requirements. Themes accessibility on WordPress are modeled on the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) Level AA
SMART TOOLS FOR WEB ACCESSIBILITY
1. Use semantic HTML: Semantic HTML is the foundation of an accessible website. According to Leonie Watson, “HTML semantics are important in two ways: we get a consistent understanding of content structure and native behavior, and we get a common understanding of the contents meaning and purpose. The best thing of all is that we get those things for free when we use HTML as intended”. Good heading structure is useful for everyone. Sighted users can easily see what is important and screen reader users can navigate to the sections they want. The Twenty Seventeen theme uses semantic HTML.
When writing HTML think about:
- How the HTML is designed.
- How the HTML works when clicked or tabbed.
- How the HTML works with a keyboard.
- How the HTML works with different browsers and devices.
- How the HTML works with accessibility API and Assistive Technologies (AT) such as screen readers, head pointers, speech recognition software and magnification software.
2. Structure with HTML5 elements: HTML5 elements help Assistive Technology users navigate sections of a page. It is important that all content be inside semantically meaningful elements so it is not missed by the user.
Common landmark elements are:
header: is banner
nav: is navigation
main: is main
aside: is complementary
footer: is contentinfo
3. Make heading hierarchy clear: Headings help users scan and understand page content. It gives Assistive Technology users a way to navigate content and define page structure.
For headings structure in theme development:
- Use one unique H1 per page
- Use H2 through H6 to divide sections of the page.
- Don’t skip heading levels.
Tools used for checking heading structure include Headings Map Toolbar for Chrome and Headings Map Toolbar for Firefox.
4. Appropriate Alt Text for images: This will help screen reader users get the meaning of images. All inline images in a theme should have alt text and decorative images should be added via CSS. The Twenty Seventeen theme has Alt Texy
5. Keyboard accessible links and menus: Some users with impairments cannot use a mouse. Such users rely on the keyboard or keyboard-like devices to navigate pages.
The tab key is used to move through elements for example Shift+Tab is to go back. Links, menus, form fields and buttons should be accessible by tabbing through the page.
The Gently theme has accessible drop down menus.
6. Sufficient color contrast: Texts on a low contrast background are hard to read for people with vision impairment. Designs with low color contrast make it impossible for users with poor eyesight, color blind users or users with low quality monitors to read content. An example of a tool to check color contrast is Contrast Ratio Checker.
The ZBlackbeard theme has areas of low contrast.
Contrast between background and foreground should have a contrast ration of 4.5:1 for normal text and 3:1 for large text.
7. Skip links: Skip links main target is keyboard users. With “skip to content” link you can jump past all extra elements before the main content and head straight to the content. Skip links is good for screen reader users. The Twenty Sixteen theme uses a “skip to content” link to allow users bypass navigation.