Accessibility

Accessible design starts with these fundamental rules that our styles try to follow and encourage.

  1. Keep html simple. There is rarly a need to create complex div structures if the proper built in classes and controls are used.
  2. Let the html speak for itself. Use the proper elements for your intent. For example, an anchor tag that doesnt navigate the user should be a button. Likewise a div with only text should probably be a heading or paragraph tag.
  3. Use ARIA properly This is hard but worth it. Learn how ARIA works on MSDN. and use it consistently. SME controls will use and encourage the use of these attributes as much as possible.

Keyboard Navigation

Keyboard navigation is easy to overlook but a few simple principals will help make it simple.

  1. Anchors without hrefs should always hav a tab index
  2. If elements appear in a different order than declared in html, use tabIndex to correct the focus order

Keyboard vs Mouse Focus

SME Core includes some default functionality that will add/remove the sme-focus-hidden class when an element is focused with a mouse as opposed to a keyboard.

By default any focusable element, when it recieves focus, will show a dashed outline to indicate that it has focus. However when the sme-focus-hidden class is applied this outline does not show up.