Accessibility

WebWorkz can make sure your website is accessible to screen readers and compliant with the World Wide Web Consortium (W3C) recommendations.

WebWorkz Digital Services

What We Do

WebWorkz will assess what is needed on your website and then make the appropriate
changes to make it comply with the standards for accessibility.

Appropriate Alt Text for Images   Screen readers need alt text to help the visually impaired or users with learning disabilities understand images included in the content.

Keyboard Accessible Links and Menus   Some users with mobility impairments can’t use a mouse. They rely on the keyboard (or keyboard-like devices) to navigate the interactive features of a page. The Tab key is used to move forward through elements., and Shift+Tab to go back.   You should be able to access the following by tabbing through the page:

  • Links
  • Menus
  • Buttons
  • Form fields

Color Contrast  People with vision impairment may struggle to read text on a low-contrast background. Even reading on a laptop in bright sunlight can prove tricky for someone without sight problems.  The recommendation is the same as that in WCAG 2.0 level AA: a contrast ratio of 4.5:1 for normal text and 3:1 for large text (defined as 14 points (typically 18.66px) and bold or larger, or 18 points (typically 24px) or larger), and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Native HTML for Buttons and Links Incorrect markup will disable your users from using custom controls. For example, a user might not be able to tab to or press a custom button. If you want to make a button behave like a button, the simplest way is to use the  element! It’s understood by all assistive technologies.

Skip Links provides a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content. Can be visible or invisible skip navigation” link is to be put at the top of the page in regular text. Put the corresponding anchor (link destination) at the beginning of the main content.  webaim.org/techniques/skipnav

Semantic HTML Headings. A Good heading structure benefits everyone. Sighted users can easily scan down the page to see what’s important. Screen reader users can navigate by heading level to the section they want.

Screen Reader Text provides additional context for links, document structure, and form fields. Usually, that context is readily available to a sighted user because of visual cues and familiar patterns. Screen reader text has many specific applications. One common example of this is a link that says “read more”. On its own, this link lacks context in a screen reader. While a sighted visitor can easily identify the context from the surrounding text and images, a screen reader user benefits from including the title of the target in the link.

No Autoplaying Media

Explicit Form Labels  Forms without clear labeling can be problematic for screen reader users. They may not be able to tell what information is required in each field.

ARIA Landmark Roles help screen reader users navigate to particular parts of the page.  Roles to use are:

  • banner
  • main
  • complementary
  • content info
  • Search
  • navigation

Clear Typography  Fancy fonts can look cool but make your site harder to read for all users. Nielsen Norman Group specifies that content legibility is a key indicator of usability.  Use at least 16px font size for body text.  Go for serif or sans serif fonts, not cursive or fantasy types. Avoid large swathes of text in uppercase.

Remove or Reduce Open in New Window Links. Avoid opening links in new windows altogether, but if you must, provide a warning.  The simplest and best way to do this is through text. Add (opens in new window) after the link text.

need help? get in touch

we are here when you need us

need help? get in touch

we are here when you need us